Kwicks for jQuery (v2.2.1)
Welcome to the Kwicks for jQuery home page. Kwicks 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.
New in v2.2.1
This is a patch release with no API changes, and is aimed at fixing a rare and sporadic bug that causes styles to not initialize properly.
New in v2.2.0
Kwicks v2.2.0 is a substantial update that addresses several feature requests (keep them coming)! Here are the main updates since the last release:
- New events and a refactor of the existing events.
Important: the new events are awesome, but not compatible with earlier versions - be sure to read the new docs before updating!
- There is now a
kwicks-collapsedclass to go along with the pre-existing
kwicks-expandedclass (credit: gguerrero).
- There is now a built-in slideshow behavior (credit: gguerrero).
- Panel spacing can now be specified as a percentage (credit: Duke3D).
- There is now a
$().kwicks('expand')method now accepts a
- The menu behavior has new options:
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 conventions:
// instantiate kwicks $(element).kwicks(opts); // invoke a method $(element).kwicks('method-name' [, param]); // handle events $(element).on('event-name.kwicks', handler);
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.
- 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.
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: