123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376 |
- /**
- * accordion - jQuery EasyUI
- *
- * Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved.
- *
- * Licensed under the GPL or commercial licenses
- * To use it on other terms please contact us: info@jeasyui.com
- * http://www.gnu.org/licenses/gpl.txt
- * http://www.jeasyui.com/license_commercial.php
- *
- * Dependencies:
- * panel
- *
- */
- (function($){
-
- function setSize(container){
- var state = $.data(container, 'accordion');
- var opts = state.options;
- var panels = state.panels;
-
- var cc = $(container);
- opts.fit ? $.extend(opts, cc._fit()) : cc._fit(false);
-
- if (opts.width > 0){
- cc._outerWidth(opts.width);
- }
- var panelHeight = 'auto';
- if (opts.height > 0){
- cc._outerHeight(opts.height);
- // get the first panel's header height as all the header height
- var headerHeight = panels.length ? panels[0].panel('header').css('height', '')._outerHeight() : 'auto';
- var panelHeight = cc.height() - (panels.length-1)*headerHeight;
- }
- for(var i=0; i<panels.length; i++){
- var panel = panels[i];
- panel.panel('header')._outerHeight(headerHeight);
- panel.panel('resize', {
- width: cc.width(),
- height: panelHeight
- });
- }
- }
-
- /**
- * get the current panel
- */
- function getCurrent(container){
- var panels = $.data(container, 'accordion').panels;
- for(var i=0; i<panels.length; i++){
- var panel = panels[i];
- if (panel.panel('options').collapsed == false){
- return panel;
- }
- }
- return null;
- }
-
- /**
- * get panel index, start with 0
- */
- function getPanelIndex(container, panel){
- var panels = $.data(container, 'accordion').panels;
- for(var i=0; i<panels.length; i++){
- if (panels[i][0] == $(panel)[0]){
- return i;
- }
- }
- return -1;
- }
-
- /**
- * get the specified panel, remove it from panel array if removeit setted to true.
- */
- function getPanel(container, which, removeit){
- var panels = $.data(container, 'accordion').panels;
- if (typeof which == 'number'){
- if (which < 0 || which >= panels.length){
- return null;
- } else {
- var panel = panels[which];
- if (removeit){
- panels.splice(which,1);
- }
- return panel;
- }
- }
- for(var i=0; i<panels.length; i++){
- var panel = panels[i];
- if (panel.panel('options').title == which){
- if (removeit){
- panels.splice(i, 1);
- }
- return panel;
- }
- }
- return null;
- }
-
- function setProperties(container){
- var opts = $.data(container, 'accordion').options;
- var cc = $(container);
- if (opts.border){
- cc.removeClass('accordion-noborder');
- } else {
- cc.addClass('accordion-noborder');
- }
- }
-
- function wrapAccordion(container){
- var cc = $(container);
- cc.addClass('accordion');
-
- var panels = [];
- cc.children('div').each(function(){
- var opts = $.extend({}, $.parser.parseOptions(this), {
- selected: ($(this).attr('selected') ? true : undefined)
- });
- var pp = $(this);
- panels.push(pp);
- createPanel(container, pp, opts);
- });
-
- cc.bind('_resize', function(e,force){
- var opts = $.data(container, 'accordion').options;
- if (opts.fit == true || force){
- setSize(container);
- }
- return false;
- });
-
- return {
- accordion: cc,
- panels: panels
- }
- }
-
- function createPanel(container, pp, options){
- pp.panel($.extend({}, options, {
- collapsible: false,
- minimizable: false,
- maximizable: false,
- closable: false,
- doSize: false,
- collapsed: true,
- headerCls: 'accordion-header',
- bodyCls: 'accordion-body',
- onBeforeExpand: function(){
- if (options.onBeforeExpand){
- if (options.onBeforeExpand.call(this) == false){return false}
- }
- var curr = getCurrent(container);
- if (curr){
- var header = $(curr).panel('header');
- header.removeClass('accordion-header-selected');
- header.find('.accordion-collapse').triggerHandler('click');
- }
- var header = pp.panel('header');
- header.addClass('accordion-header-selected');
- header.find('.accordion-collapse').removeClass('accordion-expand');
- },
- onExpand: function(){
- if (options.onExpand){options.onExpand.call(this)}
- var opts = $.data(container, 'accordion').options;
- opts.onSelect.call(container, pp.panel('options').title, getPanelIndex(container, this));
- },
- onBeforeCollapse: function(){
- if (options.onBeforeCollapse){
- if (options.onBeforeCollapse.call(this) == false){return false}
- }
- var header = pp.panel('header');
- header.removeClass('accordion-header-selected');
- header.find('.accordion-collapse').addClass('accordion-expand');
- }
- }));
-
- var header = pp.panel('header');
- var t = $('<a class="accordion-collapse accordion-expand" href="javascript:void(0)"></a>').appendTo(header.children('div.panel-tool'));
- t.bind('click', function(e){
- var animate = $.data(container, 'accordion').options.animate;
- stopAnimate(container);
- if (pp.panel('options').collapsed){
- pp.panel('expand', animate);
- } else {
- pp.panel('collapse', animate);
- }
- return false;
- });
-
- header.click(function(){
- $(this).find('.accordion-collapse').triggerHandler('click');
- return false;
- });
- }
-
- /**
- * select and set the specified panel active
- */
- function select(container, which){
- var panel = getPanel(container, which);
- if (!panel) return;
-
- var curr = getCurrent(container);
- if (curr && curr[0] == panel[0]){
- return;
- }
-
- panel.panel('header').triggerHandler('click');
- }
-
- function doFirstSelect(container){
- var panels = $.data(container, 'accordion').panels;
- for(var i=0; i<panels.length; i++){
- if (panels[i].panel('options').selected){
- _select(i);
- return;
- }
- }
- if (panels.length){
- _select(0);
- }
-
- function _select(index){
- var opts = $.data(container, 'accordion').options;
- var animate = opts.animate;
- opts.animate = false;
- select(container, index);
- opts.animate = animate;
- }
- }
-
- /**
- * stop the animation of all panels
- */
- function stopAnimate(container){
- var panels = $.data(container, 'accordion').panels;
- for(var i=0; i<panels.length; i++){
- panels[i].stop(true,true);
- }
- }
-
- function add(container, options){
- var state = $.data(container, 'accordion');
- var opts = state.options;
- var panels = state.panels;
- if (options.selected == undefined) options.selected = true;
- stopAnimate(container);
-
- var pp = $('<div></div>').appendTo(container);
- panels.push(pp);
- createPanel(container, pp, options);
- setSize(container);
-
- opts.onAdd.call(container, options.title, panels.length-1);
-
- if (options.selected){
- select(container, panels.length-1);
- }
- }
-
- function remove(container, which){
- var state = $.data(container, 'accordion');
- var opts = state.options;
- var panels = state.panels;
-
- stopAnimate(container);
-
- var panel = getPanel(container, which);
- var title = panel.panel('options').title;
- var index = getPanelIndex(container, panel);
-
- if (opts.onBeforeRemove.call(container, title, index) == false) return;
-
- var panel = getPanel(container, which, true);
- if (panel){
- panel.panel('destroy');
- if (panels.length){
- setSize(container);
- var curr = getCurrent(container);
- if (!curr){
- select(container, 0);
- }
- }
- }
-
- opts.onRemove.call(container, title, index);
- }
-
- $.fn.accordion = function(options, param){
- if (typeof options == 'string'){
- return $.fn.accordion.methods[options](this, param);
- }
-
- options = options || {};
-
- return this.each(function(){
- var state = $.data(this, 'accordion');
- var opts;
- if (state){
- opts = $.extend(state.options, options);
- state.opts = opts;
- } else {
- opts = $.extend({}, $.fn.accordion.defaults, $.fn.accordion.parseOptions(this), options);
- var r = wrapAccordion(this);
- $.data(this, 'accordion', {
- options: opts,
- accordion: r.accordion,
- panels: r.panels
- });
- }
-
- setProperties(this);
- setSize(this);
- doFirstSelect(this);
- });
- };
-
- $.fn.accordion.methods = {
- options: function(jq){
- return $.data(jq[0], 'accordion').options;
- },
- panels: function(jq){
- return $.data(jq[0], 'accordion').panels;
- },
- resize: function(jq){
- return jq.each(function(){
- setSize(this);
- });
- },
- getSelected: function(jq){
- return getCurrent(jq[0]);
- },
- getPanel: function(jq, which){
- return getPanel(jq[0], which);
- },
- getPanelIndex: function(jq, panel){
- return getPanelIndex(jq[0], panel);
- },
- select: function(jq, which){
- return jq.each(function(){
- select(this, which);
- });
- },
- add: function(jq, options){
- return jq.each(function(){
- add(this, options);
- });
- },
- remove: function(jq, which){
- return jq.each(function(){
- remove(this, which);
- });
- }
- };
-
- $.fn.accordion.parseOptions = function(target){
- var t = $(target);
- return $.extend({}, $.parser.parseOptions(target, [
- 'width','height',{fit:'boolean',border:'boolean',animate:'boolean'}
- ]));
- };
-
- $.fn.accordion.defaults = {
- width: 'auto',
- height: 'auto',
- fit: false,
- border: true,
- animate: true,
-
- onSelect: function(title, index){},
- onAdd: function(title, index){},
- onBeforeRemove: function(title, index){},
- onRemove: function(title, index){}
- };
- })(jQuery);
|