[英]How to extend the jQuery accordion plugin
如何擴展jQuery插件?
目前我正在使用multiopen手風琴插件。
我需要添加新功能,例如一旦展開/折疊完成,我需要像jquery ui accordion插件中的更改事件一樣回調函數。
如何在此插件中添加此功能。
你不需要手風琴小工具。 你可以用幾行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/上工作
您可以在選項卡上完成的動畫的回調函數中輕松調用您的函數。 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
});
您是否嘗試過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) {}
$.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);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.