如何扩展jQuery插件?
目前我使用的是multiopen accordion插件。
我需要添加新的功能,比如一旦展开/折叠完成,我需要回调一个函数,就像jquery ui accordion插件中的change事件一样。
如何在此插件中添加此功能。
发布于 2012-12-20 03:39:14
$.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);
}
});
发布于 2012-12-17 21:43:02
为此,您不需要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/上进行。
发布于 2012-12-14 14:55:56
您可以很容易地在选项卡上完成的动画的回调函数中调用您的函数。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
});
https://stackoverflow.com/questions/13769215
复制相似问题