jQuery UI改写Accordion,实现同时展开多个Panel

前端之家收集整理的这篇文章主要介绍了jQuery UI改写Accordion,实现同时展开多个Panel前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最近在做一个项目,其中有个UI要做成类似jQuery UI中Accordion的样子。但是Accordion在某一时刻只可以展开一个Panel,所以就改写了一下Accordion,让它可以同时展开多个Panel。

代码

/**
 * 同时展开多个Panel
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
(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,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就可以了。

/**
 * 同时展开多个Panel
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
$("#accordion").accordion({multipleMode: true});
原文链接:https://www.f2er.com/jquery/527458.html

猜你在找的jQuery相关文章