如何擴展jQuery手風琴插件

目前我使用的是multiopen accordion插件。

我需要添加新的功能，如一旦展開/收縮完成我需要回調一個函數，就像在jquery ui手風琴插件中更改事件一樣。

如何在此插件中添加此功能。

2012-12-07 SAK

$.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

來源

2012-12-20 03:39:13 nickaknudson

你是對的;）。這是遲到了，我沒有測試我的代碼。我刪除了我的答案，並提出了你的答案。乾杯。 – Aktee

@Nick感謝您的回答..最初Nupur的回答幫助了我 – SAK

你試過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) {}

來源

2012-12-07 18:59:44

您可以輕鬆地在選項卡上完成的動畫的回調函數中調用您的函數。在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 
});

來源

2012-12-14 14:55:56 Nupur

好的，我應該在哪裏包括上面幾行以及如何調用我的用戶定義的javascript函數，如tabShown：function（event，ui）{} – SAK

不幸的是沒有參數被髮送到[function]（http：// api.jquery.com/slideDown/）。但是你可以很容易地從那裏調用任何函數。 – Nupur

非常感謝你:) – SAK

你不需要爲摺疊菜單。你可以用幾行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/

來源

2012-12-17 21:43:02 lordvlad

如何擴展jQuery手風琴插件

回答

相關問題