jQueryアコーディオンプラグインを拡張する方法

Question

jQueryプラグインを拡張するには？

現在、私はmultiopen accordionプラグインを使用しています。

expand/collapseが完了したら、新しい機能を追加する必要があります。jquery ui accordionプラグインでchangeイベントのようにコールバックする必要があります。

このプラグインでこの機能を追加する方法。

Answer 1

$.extend($.ui.multiAccordion, {  
    // private helper method that used to show tabs 
    _showTab: function($this) { 
     var $span = $this.children('span.ui-icon'); 
     var $div = $this.next(); 
     var options = this.options; 
     $this.removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top'); 
     $span.removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); 
     // MODIIFICATION 
     bindThis = this; 
     var ui = { 
      tab: $this, 
      content: $this.next('div') 
     } 
     $div.slideDown('fast', function(){ 
      $div.addClass(options._classes.divActive); 
      // MODIFICATION 
      bindThis._trigger('tabShownComplete'); 
     }); 
     this._trigger('tabShown', null, ui); 
    }, 

    // private helper method that used to show tabs 
    _hideTab: function($this) { 
     var $span = $this.children('span.ui-icon'); 
     var $div = $this.next(); 
     var options = this.options; 
     $this.removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all'); 
     $span.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); 
     // MODIIFICATION 
     bindThis = this; 
     var ui = { 
      tab: $this, 
      content: $this.next('div') 
     } 
     $div.slideUp('fast', function(){ 
      $div.removeClass(options._classes.divActive); 
      // MODIFICATION 
      bindThis._trigger('tabHiddenComplete', null, ui); 
     }); 
     this._trigger('tabHidden', null, ui); 
    } 
}); 

• https://gist.github.com/4342758
に取り組んで全部

Answer 2

tabHiddenメソッドとtabShownメソッドを試しましたか？

// when tab is shown, ui here hold the same as in click event above 
    tabShown: function(event, ui) {} 

    // when tab is hidden, ui here hold the same as in click event above 
    tabHidden: function(event, ui) {} 

Answer 3

タブで実行されたアニメーションのコールバック関数で簡単に関数を呼び出すことができます。 jquery.multi-アコーディオン-1.5.3.jsで わずかな変化

$div.slideDown('fast', function(){ 
    $div.addClass(options._classes.divActive); 
    //function to be called after expanding the tabs. 
}); 

$div.slideUp('fast', function(){ 
    $div.removeClass(options._classes.divActive); 
    //function to be called after collapsing the tabs 
}); 

Answer 4

あなたはそのためのアコーディオンウィジェットを必要といけません。数行のjQueryでこれを行うことができます。

HTML：

<h3 class="header"> Title 1 </h3> 
<div class="content"> Content 1 </div> 
<h3 class="header"> Title 2 </h3> 
<div class="content"> Content 2 </div> 

javascrpt/jQueryの：

(function($){ // closure to make sure jQuery = $ 
    $(function(){ // on document load 
    $(".header").click(function(e){ // select headers and set onClick event handler 
     // here you can maybe add a class to an opened header like this 
     $(this).toggleClass("open"); 
     $(this).next().toggle("slow", function(){ // toggle visibility 
     // what you write here will be executed after the animation 
     // "this" will refer to the hidden/revealed div element 
     // if you want to call a function depending on if the 
     // panel was opened or closed try this 
     if ($(this).is(":visible")) { 
      tabOpened(e, this); 
     } else { 
      tabClosed(e, this); 
     } 
     }) 
    }).next().hide() 
    }) 
})(jQuery) 

とjsfiddle http://jsfiddle.net/qpqL9/