Got something to say? let's get in touch: @jachinte. Please let me know if you're using Stacky, it's always nice to see what you're using it for!
Stacky is a jQuery plugin that gives you the ability to open panels horizontally, as you need them.
Panels can be opened and closed, and also expanded and collapsed. A panel can be opened either next to a given panel or a the end, in regular mode (pushed next to a panel) or in floating mode (absolute position). Additionally, the open and close events can optionally call functions to, for instance, set or retrieve data to/from panels.
With this plugin you can easily achieve user interfaces like this:
npm install jquery.stacky
bower install jquery.stacky
You can find the demo files in here.
Include the jQuery library, the stacky plugin and its CSS styles. These files can be found in the dist/ folder.
Then, initialize the plugin in the element that will hold the panels:
To push in a new panel use the push method:
var panel_options = ... ;containerdata 'Stacky' ;
Options can be set either in the plugin initialization or when pushing in a new panel.
Plugin initialization options
fadeInSpeed: Integer | 'fast' | 'slow'
The fade in speed (in milliseconds when it's an integer) when making a new panel visible.
scrollToSpeed: Integer | 'fast' | 'slow'
The speed (in milliseconds when it's an integer) with which the scroll bar moves when adding, expanding or collapsing panels.
An object containing default options to be applied to all new panels. These are the same Panel pushing options described in the next subsection.
Panel pushing options
after: jQuery object
If different than undefined, the new panel is inserted after this jQuery element (a panel).
HTML to be inserted into the panel.
Indicates if the new panel should be placed either after the 'after' panel [true] or after the other panels (at the end) [false]
The id attribute of the new panel.
The class attribute of the new panel. The CSS styles include the helper classes
wide to set the panel's width. The
expaned class can be configured in the CSS to control the expand behavior (default width is 100%)
onBeforeOpen: function ( $panel )
It's called before fading in the new panel.
onBeforeClose: function ( $panel )
It's called before hiding and removing the panel. To indicate that the panel must remain opened, a false value should be returned.
These are utility functions built-in within the plugin. The usage is similar to the
closeActive: function ( )
Closes the current active panel (or panels holding the
highlight: function ( $panel )
Moves the scroll bar to show the given panel, and then highlights it. This simply shows a left and right shadow for 1 second.
goTo: function ( $panel, callback )
Moves the scroll bar to show the given panel, and then executes the callback, if given.
Stacky panels come with the minimum styling. If you want to customize the appereance you can modify the styles in src/sass/styles.scss, and then re-run the grunt command to generate the distribution files again.
With Stacky, and some CSS effort, you can easily develop UIs like this:
You are invited to contribute code and suggestions to this project. The more the merrier.