这是一款使用jQuery和css3 transitions制作垂直手风琴插件。
HTML
html结构使用一个class为st-accordion的div作为wrapper，在里面放置一个无序列表。每一个无序列表项是一个手风琴项。span st-arrow是手风琴右边的小箭头。
<div id="st-accordion" class="st-accordion"> <ul> <li> <a href="#"> Item Title <span class="st-arrow">Open or Close</span> </a> <div class="st-content"> <p>Some content</p> </div> </li> <li> ... </li> </ul></div> |
JAVASCRIPT
下面是该手风琴插件的可用参数：
$.Accordion.defaults = { // index of opened item. -1 means all are closed by default. open : -1, // if set to true, only one item can be opened. // Once one item is opened, any other that is // opened will be closed first oneOpenedItem : false, // speed of the open / close item animation speed : 600, // easing of the open / close item animation easing : 'easeInOutExpo', // speed of the scroll to action animation scrollSpeed : 900, // easing of the scroll to action animation scrollEasing : 'easeInOutExpo'}; |
通过init函数来初始化该手风琴插件：
_init : function( options ) { this.options = $.extend( true, {}, $.Accordion.defaults, options ); // validate options this._validate(); // current is the index of the opened item this.current = this.options.open; // hide the contents so we can fade it in afterwards this.$items.find('div.st-content').hide(); // save original height and top of each item this._saveDimValues(); // if we want a default opened item... if( this.current != -1 ) this._toggleItem( this.$items.eq( this.current ) ); // initialize the events this._initEvents(); }, |
_saveDimValues函数保存了手风琴项原来的高度，通过它我们可以知道在打开一个手风琴项时需要滚动多少高度。
如果我们设置一个手风琴项以默认方式打开，那么_toggleItem函数将被调用。
接下来是初始化所有的事件：
_toggleItem函数负责协调手风琴项被点击时的事件。如果有一个手风琴项已经被打开（该项拥有class为st-open），我们将设置current为-1，将高度设置为原始高度。如果点击的手风琴项是关闭的，那么设置current为当前项，然后使它的高度移动到适合内容的高度。通过_scroll函数将页面滚动到当前手风琴项的位置。
_toggleItem : function( $item ) { var $content = $item.find('div.st-content'); ( $item.hasClass( 'st-open' ) ) ? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({ height : $item.data( 'originalHeight' ) }, this.options.speed, this.options.easing ) ) : ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({ height : $item.data( 'originalHeight' ) + $content.outerHeight( true ) }, this.options.speed, this.options.easing ), this._scroll( this ) ) }, |
在_initEvents函数中初始化了两个事件：点击一个手风琴项和窗口的resize。当点击一个手风琴项时，_toggleItem函数被调用，如果我们设置oneOpenedItem为true，那么其它被打开的手风琴项先关闭在打开当前的手风琴项。
_initEvents : function() { var instance = this; // open / close item this.$items.find('a:first').bind('click.accordion', function( event ) { var $item = $(this).parent(); // close any opened item if oneOpenedItem is true if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) { instance._toggleItem( instance.$items.eq( instance.current ) ); } // open / close item instance._toggleItem( $item ); return false; }); $(window).bind('smartresize.accordion', function( event ) { // reset original item values instance._saveDimValues(); // reset the content's height of any item that is currently opened instance.$el.find('li.st-open').each( function() { var $this = $(this); $this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) ); }); // scroll to current if( instance._isOpened() ) instance._scroll(); }); }, |
CSS代码请参考下载文件。
