Skip to content

Latest commit

 

History

History
126 lines (90 loc) · 5.53 KB

README.markdown

File metadata and controls

126 lines (90 loc) · 5.53 KB
Raw

Features

  • Updated version of Kwicks for jQuery 1.5.1 by Jeremy Martin.
  • Horizontal and Vertical Modes.
  • Min vs. Max - Specify the width/height of all non-active kwicks instead.
  • Sticky Mode - When enabled, one kwick will always be open. This allows for more of an "accordion" type experience.
  • Custom Trigger Events - specify a trigger event for the opening &ampl closing animation.
  • Smooth Animation.
  • Get or set the active kwick, or collapse all kwicks.
  • Event hooks & callbacks added to allow extension of the plugin.

Usage & Options (Demo)

Header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>

<link href="css/kwicks.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.kwicks.js" type="text/javascript"></script>

HTML

<ul id="kwicks1">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Script (showing all defaults):

$('#kwicks1').kwicks({
  isVertical   : false,        // Kwicks will align vertically if true
  sticky       : false,        // One kwick will always be expanded if true
  defaultKwick : 0,            // The initially expanded kwick (if and only if sticky is true). zero based
  activeClass  : 'active',     // 
  event        : 'mouseenter', // The event that triggers the expand effect
  eventClose   : 'mouseleave', // The event that triggers the collapse effect
  spacing      : 0,            // The width (in pixels) separating each kwick element
  duration     : 500,          // The number of milliseconds required for each animation to complete
  easing       : 'swing',      // Custom animation easing (requires easing plugin if anything other than 'swing' or 'linear')
  max          : null,         // The width or height of a fully expanded kwick element
  min          : null,         // The width or height of a fully collapsed kwick element

  init         : null,         // event called when the event occurs (click or mouseover)
  expanding    : null,         // event called before kwicks expanding animation begins
  collapsing   : null,         // event called before kwicks collapsing animation begins
  completed    : null          // event called when animation completes
});

Methods

  • Expanded Kwick? (if sticky is set to true, this will always return true)

      $('#kwicks1').data('kwicks').isActive(); // returns true if kwick is expanded, or false if collapsed

  • Get expanded kwick (index)

      $('#kwicks1').data('kwicks').getActive(); // returns zero based index if kwick is expanded; returns -1 if collapsed

  • Set expanded kwick

      $('#kwicks1').data('kwicks').openKwick(2); // opens the third kwick panel (zero based index)

  • Collapse kwick (this will not work on sticky kwicks - that just sounds wrong LOL)

      $('#kwicks1').data('kwicks').closeKwick(); // collapses the kwick panel

Extending

  • Event Hooks (callback functions)

    • kwicks-init (init) - kwick event/eventClose occured, this event occurs before expanding or collapsing the kwick.
    • kwicks-expanding (expanding) - this event occurs only when the kwick is expanding. It is triggered immediately before the animation.
    • kwicks-collapsing (collapsing) - this event occurs only when the kwick is collapsing. It is triggered immediately before the animation.
    • kwicks-completed (completed) - this event occurs after the animation has completed.

  • Examples: You can bind to any of these custom event triggers as follows (see the demo page source for another example)

      $('#kwicks1').bind('kwicks-completed', function(e, kwicks){
    alert( 'kwick has completed opening panel #' + kwicks.active );
  })

  • or use on of the callback functions

      $('#kwicks').kwicks({
    completed: function(){
      alert('done!'); 
    }
  });

  • Callback Arguments ( if you use "kwicks" in the callback function, e.g. function(kwicks){...}, or in the trigger function, e.g. function(e, kwicks){...} these arguments will be available )

    • kwicks.active - index of the active quick (zero based index).
    • kwicks.$active - jQuery object of the active quick (the 'li.active').
    • kwicks.lastActive - index of the last active quick.
    • kwicks.$kwicks - jQuery object containing all kwicks (all the li's).
    • kwicks.$el - jQuery object of the entire kwick (the ul)

Theming

From the basic HTML above, classes are added to the Kwick panel as follows:

<ul id="kwicks1" class="kwicks horizontal">
  <li class="kwick-panel kwick1 active"></li>
  <li class="kwick-panel kwick2"></li>
  <li class="kwick-panel kwick3"></li>
  <li class="kwick-panel kwick4"></li>
</ul>
  • The "horizontal" class will be replaced with "vertical" if isVertical is set to true in the options.
  • The "active" class is only applied to expanded panels. The class name can be changed in the options using activeClass.

Changelog

Version 2.0 (11/8/2010)

  • Original Kwicks version 1.5.1 by Jeremy Martin.
  • Made a copy from Jeremy's google code and added to github.
  • Change plugin base pattern to ease use of plugin getters and setters.
  • Added custom events & triggers.