IT技术博客大学习 共学习 共进步

改写jQuery UI的Accordion

记事本 2010-08-04 00:06:05 累计浏览 3,785 次

最近在做一个项目,其中有个UI要做成类似jQuery UI中Accordion的样子。但是Accordion在某一时刻只可以展开一个Panel,所以就改写了一下Accordion,让它可以同时展开多个Panel。

以下是代码片段:

(function($) {
    if ($.ui.accordion) {
        var old_clickHandler = $.ui.accordion.prototype._clickHandler;
        var new_clickHandler = function(event, target) {
            var o = this.options;
            if (o.disabled) return false;
            // called only when using activate(false) to close all parts programmatically
            if (!event.target && o.collapsible) {
                this.headers.removeClass("ui-state-active ui-corner-top")
                            .addClass("ui-state-default ui-corner-all")
                            .find(".ui-icon")
                            .removeClass(o.icons.headerSelected)
                            .addClass(o.icons.header);
                this.headers.next().addClass('ui-accordion-content-active');
                var toHide = this.headers.next(),
                            data = {
                                options: o,
                                newHeader: $([]),
                                oldHeader: o.headers,
                                newContent: $([]),
                                oldContent: toHide
                            },
                            toShow = (this.active = $([]));
                this._toggle(toShow, toHide, data);
                return false;
            }
            // get the click target
            var clicked = $(event.currentTarget || target);
            var clickedIsActive = clicked.next().css("display") != "none";
            // if animations are still active, or the active header is the target, ignore click
            if (this.running || (!o.collapsible && clickedIsActive)) {
                return false;
            }

            // switch classes
            clicked.toggleClass("ui-state-active")
                        .toggleClass("ui-corner-top")
                        .toggleClass("ui-state-default")
                        .toggleClass("ui-corner-all")
                        .find(".ui-icon")
                        .toggleClass(o.icons.headerSelected)
                        .toggleClass(o.icons.header);
            clicked.next().addClass('ui-accordion-content-active');

            // find elements to show and hide
            var toShow = clicked.next(),
                        toHide = clickedIsActive ? clicked.next() : $([]),
                        data = {
                            options: o,
                            newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
                            oldHeader: $([]),
                            newContent: clickedIsActive && o.collapsible ? $([]) : toShow.find('> *'),
                            oldContent: $([])
                        },
                        down = true;

            this._toggle(toShow, toHide, data, clickedIsActive, down);

            return false;
        };

        $.extend($.ui.accordion.defaults, {
            collapsible: true,
            multipleMode: false
        });

        $.extend($.ui.accordion.prototype, {
            _clickHandler: function(event, target) {
                if (this.options.multipleMode === true) {
                    new_clickHandler.apply(this, arguments);
                }
                else {
                    old_clickHandler.apply(this, arguments);
                }
            }
        });
    };
})(jQuery);

将上面的代码保存成.js文件并引入到页面,调用的时候只要设置multipleMode为true就可以了。

以下是代码片段:

$("#accordion").accordion({multipleMode: true});

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,166)
  2. 分享一个JQUERY颜色选择插件 (累计阅读 14,064)
  3. jQuery插件---轻量级的弹出窗口wBox. (累计阅读 10,627)
  4. 10个强大的Ajax jQuery文件上传程序 (累计阅读 8,726)
  5. jQuery性能优化指南 (累计阅读 8,647)
  6. jQuery的data()方法 (累计阅读 8,504)
  7. jQuery Color Animations颜色动画插件 (累计阅读 8,347)
  8. 精于图片处理的10款jQuery插件 (累计阅读 7,264)
  9. 配合jquery实现异步加载页面元素 (累计阅读 6,286)
  10. jQuery中getJSON跨域原理详解 (累计阅读 6,267)