首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何扩展jQuery accordion插件

如何扩展jQuery accordion插件
EN

Stack Overflow用户
提问于 2012-12-07 18:51:42
回答 4查看 1.1K关注 0票数 10

如何扩展jQuery插件?

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

我需要添加新的功能,比如一旦展开/折叠完成,我需要回调一个函数,就像jquery ui accordion插件中的change事件一样。

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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-12-20 03:39:14

代码语言:javascript
运行
AI代码解释
复制
$.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);
    }
});

票数 2
EN

Stack Overflow用户

发布于 2012-12-17 21:43:02

为此,您不需要accordion小部件。只需几行jQuery就可以做到这一点。

html:

代码语言:javascript
运行
AI代码解释
复制
<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:

代码语言:javascript
运行
AI代码解释
复制
( 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/上进行。

票数 5
EN

Stack Overflow用户

发布于 2012-12-14 14:55:56

您可以很容易地在选项卡上完成的动画的回调函数中调用您的函数。jquery.multi-accordion-1.5.3.js中的细微变化

代码语言:javascript
运行
AI代码解释
复制
$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
});
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13769215

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档