Làm cách nào để mở rộng plugin accordion jQuery

Question

Làm cách nào để mở rộng plugin jQuery?

hiện tại tôi đang sử dụng plugin multiopen accordion.

Tôi cần thêm tính năng mới như khi mở rộng/thu gọn xong, tôi cần gọi lại hàm giống như thay đổi sự kiện trong plugin jquery ui accordion.

Cách thêm tính năng này trong plugin này.

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

Bạn đã thử các phương pháp tabHidden và tabShown chưa?

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

Bạn có thể dễ dàng gọi chức năng của mình trong các chức năng gọi lại của hoạt ảnh được thực hiện trên các tab. Thay đổi nhỏ trong jquery.multi-accordion-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

bạn không cần tiện ích accordion cho điều đó. bạn có thể làm điều này với một vài dòng 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) 

và toàn bộ điều làm việc trên jsfiddle http://jsfiddle.net/qpqL9/