Fx.Elements and Accordion.
Moo.js, Function.js, Array.js, String.js, Element.js, Fx.js
Valerio Proietti, http://mad4milk.net
MIT-style license.
Accordion.js | Fx.Elements and Accordion. |
Fx. Elements | Fx.Elements allows you to apply any number of styles trantisions to a selection of elements. |
Properties | |
custom | Applies the passed in style transitions to each object named (see example). |
Fx. Accordion | The Fx.Accordion function creates a group of elements that are toggled when their handles are clicked. |
Properties | |
showThisHideOpen | Shows a specific item and hides all others. |
Fx.Elements allows you to apply any number of styles trantisions to a selection of elements. Wonky syntax but very powerful. Used internally by the accordion.
elements | a collection of elements the effects will be applied to. |
options | same as Fx.Base options. |
Properties | |
custom | Applies the passed in style transitions to each object named (see example). |
Applies the passed in style transitions to each object named (see example). Each item in the collection is refered to as a numerical string (“1” for instance). The first item is “0”, the second “1”, etc.
var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.custom({
'0': { //let's change the first element's opacity and width
'opacity': [0,1],
'width': [100,200]
},
'1': { //and the second one's opacity
'opacity': [0.2, 0.5]
}
});
The Fx.Accordion function creates a group of elements that are toggled when their handles are clicked. When one elements toggles in, the others toggles back.
elements | required, a collection of elements the transitions will be applied to. |
togglers | required, a collection of elements, the elements handlers. |
options | optional, see options below, and Fx.Base options. |
start | either ‘open-first’ or ‘first-open’. ‘open-first’ will slide that element open, while ‘first-open’ will just show that element as open immediately with no transition. |
fixedHeight | integer, if you want your accordion to have a fixed height. defaults to false. |
fixedWidth | integer, if you want your accordion to have a fixed width. defaults to false. |
alwaysHide | boolean, if you want the ability to close your only-open item. defaults to false. |
wait | boolean. means that open and close transitions can cancel current ones (so if you click on items before the previous finishes transitioning, the clicked transition will fire canceling the previous). true means that if one element is sliding open or closed, clicking on another will have no effect. for Accordion defaults to false. |
onActive | function to execute when an element starts to show |
onBackground | function to execute when an element starts to hide |
height | boolean, will add a height transition to the accordion if true. defaults to true. |
opacity | boolean, will add an opacity transition to the accordion if true. defaults to true. |
width | boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work! |
Properties | |
showThisHideOpen | Shows a specific item and hides all others. |
function $A( array )
returns the element passed in with all the Element prototypes applied.
function $( el )