2 * jQuery arrowSteps plugin
3 * Copyright Neil Kandalgaonkar, 2010
5 * This work is licensed under the terms of the GNU General Public License,
7 * (see http://www.fsf.org/licensing/licenses/gpl.html).
8 * Derivative works and later versions of the code must be free software
9 * licensed under the same or a compatible license.
13 * @class jQuery.plugin.arrowSteps
17 * Show users their progress through a series of steps, via a row of items that fit
18 * together like arrows. One item can be highlighted at a time.
20 * <ul id="robin-hood-daffy">
21 * <li id="guard"><div>Guard!</div></li>
22 * <li id="turn"><div>Turn!</div></li>
23 * <li id="parry"><div>Parry!</div></li>
24 * <li id="dodge"><div>Dodge!</div></li>
25 * <li id="spin"><div>Spin!</div></li>
26 * <li id="ha"><div>Ha!</div></li>
27 * <li id="thrust"><div>Thrust!</div></li>
31 * $( '#robin-hood-daffy' ).arrowSteps();
36 $.fn
.arrowSteps = function () {
37 var $steps
, width
, arrowWidth
,
38 paddingSide
= $( 'body' ).hasClass( 'rtl' ) ? 'padding-left' : 'padding-right';
40 this.addClass( 'arrowSteps' );
41 $steps
= this.find( 'li' );
43 width
= parseInt( 100 / $steps
.length
, 10 );
44 $steps
.css( 'width', width
+ '%' );
46 // Every step except the last one has an arrow pointing forward:
47 // at the right hand side in LTR languages, and at the left hand side in RTL.
48 // Also add in the padding for the calculated arrow width.
49 arrowWidth
= parseInt( this.outerHeight(), 10 );
50 $steps
.filter( ':not(:last-child)' ).addClass( 'arrow' )
51 .find( 'div' ).css( paddingSide
, arrowWidth
.toString() + 'px' );
53 this.data( 'arrowSteps', $steps
);
58 * Highlights the element selected by the selector.
60 * $( '#robin-hood-daffy' ).arrowStepsHighlight( '#guard' );
61 * // 'Guard!' is highlighted.
63 * // ... user completes the 'guard' step ...
65 * $( '#robin-hood-daffy' ).arrowStepsHighlight( '#turn' );
66 * // 'Turn!' is highlighted.
68 * @param {string} selector
70 $.fn
.arrowStepsHighlight = function ( selector
) {
72 $steps
= this.data( 'arrowSteps' );
73 $.each( $steps
, function ( i
, step
) {
74 var $step
= $( step
);
75 if ( $step
.is( selector
) ) {
77 $previous
.addClass( 'tail' );
79 $step
.addClass( 'head' );
81 $step
.removeClass( 'head tail lasthead' );
89 * @mixins jQuery.plugin.arrowSteps