The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 1 more by this user. Created: 06/5/12
Last CDN Push: 06/27/12
Build Tag: gallery-2012.06.27-20-10
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.0
Free for use.
Flick Panel was created so that you can easily tuck a sidebar or other panel out of view. By flicking the page, you slide open the flickPanel.
You can animate the main element of your page to the side along with the flickPanel, or the flickPanel can slide over the main element.
FlickPanel offers a pullTab. Typically you'd style this so it appears to be a tab on the side of your panel. You can then drag the panel open via the tab. This is nice if you'd prefer to have it feel very physical, with direct user control. You can also make the pullTab full-height and transparent, so that it appears that you're dragging the flickPanel open just by dragging from anywhere on the edge of the page.
You can open the flickPanel by firing an event, "flickpanel.toggle.click". This means you can wire up a toggle button anywhere in your UI and have it control the flickPanel. This is nice if you'd rather control it via an explicit button rather than a harder-to-discover gesture. You can also have both!
To gauge user interest in the feature, FlickPanel fires events "flickpanel.open" and "flickpanel.close".
FlickPanel is a YUI3 plugin, so it can easily be plugged and unplugged. For instance, if there's not enough viewport to contain your panel, you can plug it in. If the user changes orientation or resizes their window, you can unplug it.
FlickPanel has some rather sophisticated interpreting of user gesture intent, so that a diagonal flick to scroll the page doesn't get interpreted as a flick to open the flickPanel.
.flickPanel {
position: absolute;
width: 15em;
left: -15em;
}
FlickPanel will handle the rest. If FlickPanel is not initialized, the panel will stay off-screen. When plugged, FlickPanel measures the width of the panel and translates both main and panel the appropriate distance.
The following code listens for flicks on the entire page body. When the user flicks right, the flickPanel will slide open. Since animateMain is set to true, the main div will also slide to the right. (If it was set to false, the main div would stay put and the flickPanel would slide over it.)
A little setup and customization is required, as the flickPanel must be position:absolute just off-screen to the left of the main div.
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.06.27-20-10'
}).use('gallery-flickpanel', function(Y) {
Y.one('body').plug(Y.FlickPanelPlugin,{
flickPanel: Y.one('.flickPanel'),
main: Y.one('#web'),
animateMain: true
});
});
All code on this site is licensed under the BSD License unless stated otherwise.