diff options
| -rw-r--r-- | framework/Web/Javascripts/packages.php | 2 | ||||
| -rw-r--r-- | framework/Web/Javascripts/source/prado/controls/accordion.js | 127 |
2 files changed, 34 insertions, 95 deletions
diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index a86ac3c0..dd55729e 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -126,12 +126,12 @@ $dependencies = array( 'keyboard' => array('jquery', 'prado', 'keyboard'), 'slider' => array('jquery', 'prado', 'slider'), 'inlineeditor' => array('jquery', 'prado', 'ajax', 'inlineeditor'), + 'accordion' => array('jquery', 'prado', 'accordion'), 'jqueryui' => array('jquery', 'jqueryui'), 'prototype' => array('prototype'), 'dragdrop' => array('prototype', 'jquery', 'prado', 'ajax', 'dragdrop'), 'dragdropextra' => array('prototype', 'jquery', 'prado', 'ajax', 'dragdrop','dragdropextra'), - 'accordion' => array('prototype', 'jquery', 'prado', 'accordion'), 'ratings' => array('prototype', 'jquery', 'prado', 'ajax', 'ratings'), 'autocomplete' => array('prototype', 'jquery', 'prado', 'ajax', 'autocomplete'), ); diff --git a/framework/Web/Javascripts/source/prado/controls/accordion.js b/framework/Web/Javascripts/source/prado/controls/accordion.js index 28075cd6..084aef7f 100644 --- a/framework/Web/Javascripts/source/prado/controls/accordion.js +++ b/framework/Web/Javascripts/source/prado/controls/accordion.js @@ -1,8 +1,9 @@ -/* Simple Accordion Script +/* Simple Accordion Script * Requires Prototype and Script.aculo.us Libraries * By: Brian Crescimanno <brian.crescimanno@gmail.com> * http://briancrescimanno.com * Adapted to Prado & minor improvements: Gabor Berczi <gabor.berczi@devworx.hu> + * jQuery port by Bas Fabio <ctrlaltca@gmail.com> * This work is licensed under the Creative Commons Attribution-Share Alike 3.0 * http://creativecommons.org/licenses/by-sa/3.0/us/ */ @@ -11,9 +12,9 @@ Prado.WebUI.TAccordion = jQuery.klass(Prado.WebUI.Control, { onInit : function(options) { - this.accordion = $(options.ID); + this.accordion = jQuery('#'+options.ID).get(0); this.options = options; - this.hiddenField = $(options.ID+'_1'); + this.hiddenField = jQuery('#'+options.ID+'_1').get(0); if (this.options.maxHeight) { @@ -29,15 +30,15 @@ Prado.WebUI.TAccordion = jQuery.klass(Prado.WebUI.Control, var i = 0; for(var view in this.options.Views) { - var header = $(view+'_0'); + var header = jQuery('#'+view+'_0').get(0); if(header) { this.observe(header, "click", jQuery.proxy(this.elementClicked,this,view)); if(this.hiddenField.value == i) { this.currentView = view; - if($(this.currentView).getHeight() != this.maxHeight) - $(this.currentView).setStyle({height: this.maxHeight+"px"}); + if(jQuery('#'+this.currentView).height() != this.maxHeight) + jQuery('#'+this.currentView).css({height: this.maxHeight+"px"}); } } i++; @@ -48,38 +49,20 @@ Prado.WebUI.TAccordion = jQuery.klass(Prado.WebUI.Control, { for(var viewID in this.options.Views) { - var view = $(viewID); - if(view.getHeight() > this.maxHeight) - this.maxHeight = view.getHeight(); + var view = jQuery('#'+viewID); + if(view.height() > this.maxHeight) + this.maxHeight = view.height(); } }, - elementClicked : function(event,viewID) - { - // dummy effect to force processing of click into the event queue - // is not actually supposed to change the appearance of the accordion - var obj = this; - new Effect.Opacity( - this.element, - { - from: 1.0, to: 1.0, duration: 0.0, - queue: { - position: 'end', - scope: 'accordion' - }, - afterFinish: function() { obj.processElementClick(event, viewID); } - } - ); - }, - - processElementClick : function(event,viewID) + elementClicked : function(viewID, event) { var i = 0; for(var index in this.options.Views) { - if ($(index)) + if (jQuery('#'+index).get(0)) { - var header = $(index+'_0'); + var header = jQuery('#'+index+'_0').get(0); if(index == viewID) { this.oldView = this.currentView; @@ -96,75 +79,31 @@ Prado.WebUI.TAccordion = jQuery.klass(Prado.WebUI.Control, { this.animate(); } else { - $(this.currentView).setStyle({ height: this.maxHeight+"px" }); - $(this.currentView).show(); - $(this.oldView).hide(); - - var oldHeader = $(this.oldView+'_0'); - var currentHeader = $(this.currentView+'_0'); - oldHeader.className=this.options.HeaderCssClass; - currentHeader.className=this.options.ActiveHeaderCssClass; + jQuery('#'+this.currentView).css({ height: this.maxHeight+"px" }); + jQuery('#'+this.currentView).show(); + jQuery('#'+this.oldView).hide(); + + jQuery('#'+this.oldView+'_0').removeClass().addClass(this.options.HeaderCssClass); + jQuery('#'+this.currentView+'_0').removeClass().addClass(this.options.ActiveHeaderCssClass); } } }, animate: function() { - var effects = new Array(); - var options = { - sync: true, - queue: { - position: 'end', - scope: 'accordion' - }, - scaleFrom: 0, - scaleContent: false, - transition: Effect.Transitions.sinoidal, - scaleMode: { - originalHeight: this.maxHeight, - originalWidth: this.accordion.getWidth() - }, - scaleX: false, - scaleY: true - }; - - effects.push(new Effect.Scale(this.currentView, 100, options)); - - options = { - sync: true, - queue: { - position: 'end', - scope: 'accordion' - }, - scaleContent: false, - transition: Effect.Transitions.sinoidal, - scaleX: false, - scaleY: true - }; - - effects.push(new Effect.Scale(this.oldView, 0, options)); - - var oldHeader = $(this.oldView+'_0'); - var currentHeader = $(this.currentView+'_0'); - - new Effect.Parallel(effects, { - duration: this.options.Duration, - fps: 35, - queue: { - position: 'end', - scope: 'accordion' - }, - beforeStart: function() { - $(this.currentView).setStyle({ height: "0px" }); - $(this.currentView).show(); - - oldHeader.className=this.options.HeaderCssClass; - currentHeader.className=this.options.ActiveHeaderCssClass; - }.bind(this), - afterFinish: function() { - $(this.oldView).hide(); - $(this.currentView).setStyle({ height: this.maxHeight+"px" }); - }.bind(this) - }); + jQuery('#'+this.oldView+'_0').removeClass().addClass(this.options.HeaderCssClass); + jQuery('#'+this.currentView+'_0').removeClass().addClass(this.options.ActiveHeaderCssClass); + + jQuery('#'+this.oldView).animate( + {height: 0}, + this.options.Duration, + function() { + jQuery(this).hide() + } + ); + jQuery('#'+this.currentView).css({height: 0}).show().animate( + {height: this.maxHeight+'px'}, + this.options.Duration + ); } }); |