jQuery akordeon eklentisi nasıl genişletilir

Question

jQuery eklentisi nasıl genişletilir?

şimdilik multiopen accordion eklentisini kullanıyorum.

Genişletme/daraltma bittiğinde olduğu gibi yeni özellik eklemem gerekiyor. Jquery ui akordeon eklentisinde değişiklik olayı gibi bir işlevi geri çağırmam gerekiyor.

Bu özellik bu eklentiye nasıl eklenir?

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
çalışan her şey

Answer 2

TabHidden ve tabShown yöntemlerini denediniz mi?

// 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

İşlevlerinizi sekmelerde gerçekleştirilen animasyonun geri arama işlevlerinde kolayca arayabilirsiniz. jquery.multi-akordeon-1.5.3.js içinde hafif değişiklikler

$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

bunun için akordiyon widget'ı ihtiyacım yok. Bunu birkaç jQuery satırı ile yapabilirsiniz.

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) 

ve jsfiddle http://jsfiddle.net/qpqL9/