Kwicks for jQuery (v2.0.0)
Welcome to the Kwicks for jQuery home page. Kwicks for jQuery is a plugin providing sexy sliding panels with an emphasis on navigational interaction. Kwicks was originally a port of a MooTools effect (of the same name), but has since evolved into a highly configurable and versatile UI component. Please check out the examples to see it in action.
Kwicks has pretty relaxed markup requirements:
A container element with two classes:
kwicks-horizontal|vertical(depending on the orientation of this instance).
A single level of nested "panel" elements.
Unordered lists are a good semantic fit for most Kwicks use cases:
<ul class='kwicks kwicks-horizontal'> <li></li> <li></li> <li></li> <li></li> </ul>
However, as noted above, Kwicks doesn't require that unordered lists be used. For example, see the Anchor Markup example.
If you want one of the panels to be selected on initialization, simply add a
kwicks-selected class to it.
Kwicks follows the usual jQuery plugin convention:
// instantiate kwicks $(element).kwicks(opts); // invoke a method $(element).kwicks('method-name' [, param]); // handle events $(element).on('event-name.kwicks', handler);
Unfortunately, contrary to jQuery convention, I haven't figured out how to make all configurations optional in a way that makes sense. Be sure to read the configuration info below, and check out the examples to see them in use.
Kwicks is supported in the following browsers:
- Chrome 12+
- FF 3.6+
- Opera 11+
- Safari 5+
Important styling information: Please note that in order to provide the smoothest possible animations, the following style changes are made by the script:
- The Kwicks container is converted to relative positioning.
- All panels are converted to absolute positioning.
- To keep things as "jitter free" as possible, panel styles are set by overriding the whole
styleattribute, which currently causes any previously specified inline styles to be lost. Make sure any styles you want to keep are set externally with a selector, rather than inline.
- Margins on the panels are stripped, but the spacing option is respected through the absolute positioning.
- The width and height of the container is set to be consistent with the width and height of the panels (spacing included).
- Even though the panels' margins are stripped, in order for them to look correct in non-JS enabled browsers, they should still be given margins that correspond to the spacing option (if any). I strongly recommend that you look at the CSS in the examples.
Panel classes: Whenever a panel is expanded and/or selected, it is automatically given a
kwicks-selected class. This allows for more flexible styling based on the state of the panel.
Bugs, feature requests, etc:
Anything pertaining to bugs and/or the development of Kwicks can be dicussed on the GitHub issue queue.
Downloads, documentation, and examples for previous versions: