jquery.ui.accordion的修改（支持展开多个）
原文:
jquery.ui.accordion的修改（支持展开多个）
背景：原jquery.ui.accordion插件，最多只能展开一个，不能展开多个，后来在网上找到了一个基于它的一个修改版（https://code.google.com/p/jquery-multi-open-accordion/），但使用后发现它给Array加了一个方法（Array.prototype.hasObject），这样就导致了一个问题：在其它页面使用js遍历一个数组的时候，发现此数组多了一个hasObject值。故做了下修改，希望写JS的prototype不要乱用！！！！！！！！！！！！！
修改版如下：
注：$('#multiOpenAccordion').multiAccordion("option", "active", "all");用set的方式写，all和none才会和效！此插件怎么用，请参考jquery UI文档。
(function ($) {
$.widget('ui.multiAccordion', {
options: {
active: 0,
showAll: null,
hideAll: null,
_classes: {
accordion: 'ui-accordion ui-widget ui-helper-reset ui-accordion-icons',
h3: 'ui-accordion-header ui-helper-reset ui-state-default ui-corner-all',
div: 'ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom',
divActive: 'ui-accordion-content-active',
span: 'ui-icon ui-icon-triangle-1-e',
stateDefault: 'ui-state-default',
stateHover: 'ui-state-hover'
}
},
_create: function () {
var self = this,
options = self.options,
$this = self.element,
$h3 = $this.children('h3'),
$div = $this.children('div');
$this.addClass(options._classes.accordion);
$h3.each(function (index) {
var $this = $(this);
$this.addClass(options._classes.h3).prepend('<span class="{class}"></span>'.replace(/{class}/, options._classes.span));
if (self._isActive(index)) {
self._showTab($this)
}
}); // end h3 each
$this.children('div').each(function (index) {
var $this = $(this);
$this.addClass(options._classes.div);
}); // end each
$h3.bind('click', function (e) {
// preventing on click to navigate to the top of document
e.preventDefault();
var $this = $(this);
var ui = {
tab: $this,
content: $this.next('div')
};
self._trigger('click', null, ui);
if ($this.hasClass(options._classes.stateDefault)) {
self._showTab($this);
} else {
self._hideTab($this);
}
});
$h3.bind('mouseover', function () {
$(this).addClass(options._classes.stateHover);
});
$h3.bind('mouseout', function () {
$(this).removeClass(options._classes.stateHover);
});
// triggering initialized
self._trigger('init', null, $this);
},
// destroying the whole multi open widget
destroy: function () {
var self = this;
var $this = self.element;
var $h3 = $this.children('h3');
var $div = $this.children('div');
var options = self.options;
$this.children('h3').unbind('click mouseover mouseout');
$this.removeClass(options._classes.accordion);
$h3.removeClass(options._classes.h3).removeClass('ui-state-default ui-corner-all ui-state-active ui-corner-top').children('span').remove();
$div.removeClass(options._classes.div + ' ' + options._classes.divActive).show();
},
// 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');
$div.slideDown('fast', function () {
$div.addClass(options._classes.divActive);
});
var ui = {
tab: $this,
content: $this.next('div')
}
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');
$div.slideUp('fast', function () {
$div.removeClass(options._classes.divActive);
});
var ui = {
tab: $this,
content: $this.next('div')
}
this._trigger('tabHidden', null, ui);
},
// helper method to determine wether passed parameter is an index of an active tab or not
_isActive: function (num) {
var options = this.options;
// if array
if (typeof options.active == "boolean" && !options.active) {
return false;
} else {
if (options.active.length != undefined) {
for (var i = 0; i < options.active.length; i++) {
if (options.active[i] == num)
return true;
}
} else {
return options.active == num;
}
}
return false;
},
// return object contain currently opened tabs
_getActiveTabs: function () {
var $this = this.element;
var ui = [];
$this.children('div').each(function (index) {
var $content = $(this);
if ($content.is(':visible')) {
//ui = ui ? ui : [];
ui.push({
index: index,
tab: $content.prev('h3'),
content: $content
});
}
});
return (ui.length == 0 ? undefined : ui);
},
getActiveTabs: function () {
var el = this.element;
var tabs = [];
el.children('div').each(function (index) {
if ($(this).is(':visible')) {
tabs.push(index);
}
});
return (tabs.length == 0 ? [-1] : tabs);
},
// setting array of active tabs
_setActiveTabs: function (tabs) {
var self = this;
var $this = this.element;
if (typeof tabs != 'undefined') {
$this.children('div').each(function (index) {
var $tab = $(this).prev('h3');
if (jQuery.inArray(index, tabs) != -1) {
self._showTab($tab);
} else {
self._hideTab($tab);
}
});
}
},
// active option passed by plugin, this method will read it and convert it into array of tab indexes
_generateTabsArrayFromOptions: function (tabOption) {
var tabs = [];
var self = this;
var $this = self.element;
var size = $this.children('h3').size();
if ($.type(tabOption) === 'array') {
return tabOption;
} else if ($.type(tabOption) === 'number') {
return [tabOption];
} else if ($.type(tabOption) === 'string') {
switch (tabOption.toLowerCase()) {
case 'all':
var size = $this.children('h3').size();
for (var n = 0; n < size; n++) {
tabs.push(n);
}
return tabs;
break;
case 'none':
tabs = [-1];
return tabs;
break;
default:
return undefined;
break;
}
}
},
// required method by jquery ui widget framework, used to provide the ability to pass options
// currently only active option is used here, may grow in the future
_setOption: function (option, value) {
$.Widget.prototype._setOption.apply(this, arguments);
var el = this.element;
switch (option) {
case 'active':
this._setActiveTabs(this._generateTabsArrayFromOptions(value));
break;
case 'getActiveTabs':
var el = this.element;
var tabs;
el.children('div').each(function (index) {
if ($(this).is(':visible')) {
tabs = tabs ? tabs : [];
tabs.push(index);
}
});
return (tabs.length == 0 ? [-1] : tabs);
break;
}
}
});
})(jQuery);
