Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up

A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.

License

NotificationsYou must be signed in to change notification settings

Torann/jquery.panel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information. Make sure to read therequirements at the bottom.

Required Element

The plugin does not create the panel for you. The reason for this is so that you can more easily customized the layout. The panel must have the id ofquick-panel.

<div>    <header>        <div>            <h1></h1>            <a data-panel="close">                Cancel            </a>        </div>    </header>    <div>        <div></div>    </div></div>

Basic SASS

// Variables$zindex-modal:    3040 !default;$base-gutter:     1.5rem !default;// Panel Style#quick-panel {  display: none;  position: fixed;  top: 0;  left: 0;  height: 100%;  width: 100%;  z-index: $zindex-modal;  &:after {    position: absolute;    content: '';    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(#000, 0);    transition: background 0s 0s;  }  // Forms variants  &.no-form {    // Any non-form specific tweks  }  &.with-form > header {    // Any form specific tweks  }  // Content  .quick-panel-container {    position: fixed;    width: 100%;    height: 100%;    top: 0;    background: #fff;    z-index: 1;    transition-property: transform;    transition-duration: 0.3s;    transition-delay: 0.2s;  }  .quick-panel-content {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    padding: (6rem + $base-gutter) $base-gutter $base-gutter;    overflow: hidden;    overflow-y: auto;    -webkit-overflow-scrolling: touch;    .loading {      position: absolute;      top: 50%;      margin-top: -5%;      left: 0;      right: 0;      text-align: center;      a {        color: #3c3c3c;        text-decoration: underline;      }      .icon-spin {        display: block;        font-size: 4rem;        line-height: 1;        margin: 0 0 1rem;        opacity: 0.6;        &:before {          animation: spin 2s infinite linear;        }      }    }  }  // Position  &.from-right {    .quick-panel-container {      right: 0;      transform: translate3d(100%, 0, 0);    }  }  &.from-left {    .quick-panel-container {      left: 0;      transform: translate3d(-100%, 0, 0);    }  }  // Reveal Event  &.is-visible {    &:after {      background: rgba(#000, .6);      transition: background .3s 0s;    }    .quick-panel-container {      transform: translate3d(0, 0, 0);      transition-delay: 0s;    }  }  // Responsive  @media only screen and (min-width: 577px) {    .quick-panel-container {      width: 70%;    }  }  @media only screen and (min-width: 769px) {    .quick-panel-container {      width: 50%;    }  }}

Trigger

Remote Content

To load remote content simple add the data attributedata-panel="open" to a link and the plugin show event will fire when the link is clicked.

Manually trigger

$.panel(element, {    pos: 'from-right',    reload: false,    afterClose: null,    formSuccess: null});

Element Attributes

href

This is required for the page fetching.

data-pos

Used to to specify the location where the panel will appear from. (defaultfrom-right)

data-reload

When set totrue this will reload the page after a form is successfully submitted. (defaultfalse)

Callbacks

  • afterReveal($panel, this) - fired after the panel is revealed
  • formSuccess(data, $form, this) - fired after the a successful form submission
  • afterClose(this) - fired after the panel closes

Override Defaults

    $.panel.setDefaults({        reload: true    });

Request Header

When a panel AJAX request is madeX-HTML-PARTIAL is included in header. This can be used to determine what part of the page to send back.

Requirements

This plugin is closely tied into my projects, and because of this their are certain dependency requirements that must be met.

Required Plugins

  • jquery-trans
  • jquery.form

Translation Keys Used (jquery-trans)

  • messages.Update successful
  • messages.Creation successful
  • messages.Are you sure you want to close this?
  • messages.Unable to load page
  • buttons.Cancel

Required Functions

This is built to use a simple snackbar helper function:

$.snackbar({    message: 'Message from the panel event',    style: 'error',    timeout: null});

This helper function toggles an on page load indicator.

$.toggleLoader(int) // Int: 1 = show, 0 = hide

Dirty form function and event. This takes the current form chunk and determines if the content has changed from when it was loaded. If it did then the eventdirty.form if fired on the element.

$.fn.dirtyForm()

About

A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp