Jak przedłużyć wtyczkę jQuery do akordeonu

Question

Jak przedłużyć wtyczkę jQuery?

Obecnie używam wtyczki multiopen accordion.

Potrzebuję dodać nową funkcję, jak po rozwinięciu/zwinięciu Muszę wywołać funkcję podobną do zmiany w jquery ui akordeonowej wtyczce.

Jak dodać tę funkcję do tej wtyczki.

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

Czy wypróbowałeś metody tabHidden i 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

Możesz łatwo wywołać swoją funkcję w funkcjach oddzwaniania animacji wykonanych na kartach. Nieznaczne zmiany w jquery.multi-akordeon-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

nie trzeba widget akordeon to. możesz to zrobić za pomocą kilku linii 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) 

a całość pracuje na jsfiddle http://jsfiddle.net/qpqL9/