Revision as of 22:43, 18 May 2010

The Dry Accordion is not based on any previous component, but is completely new. It Though uses the Themes from Guarana & Theme-roller.

Following code snipped shows on how the According control can be used

dojo.require("dry.Accordion");
 
 
var domIdsData = [{
	"id": "first one", 
	"toggle": "firstTogle",
	"content": "firstContent",
	"expanded":true,
	"animated": true,
	},{
	"id": "second one", 
	"toggle": "secondTogle",
	"content": "secondContent",
	"expanded":false,
	"animated": true,
	"animDelay": 1500
	}];
 
function expanded(id){			
	console.log(id + " expanded");
}
 
function collapsed(id){			
	console.log(id + " collapsed");
}
 
var acc = new dry.Accordion({domIds: domIdsData2,styleTweaker: styleTweaker,expanded: expanded,collapsed: collapsed,});

The construction for the According takes domIds struct as a first argument, with this struct following variables can be defined:

• "id": internal Id fort he According, used also as Title fort he Accordion,
• "toggle": Dom-ID name fort he div where the Accordion is to be placed in,
• "content": Dom-ID name fort he div where the Accordion collapsing is to be placed in,
• "expanded": true/false, defined initial collapsing state,
• "animated": true/false, identifies whether collapsing/expanding is done with animation,
• "animDelay": delay fort he collapsing/expanding animation.

The second argument is styleTweaker that would be used fort he themes, and expanded/ collapsed are callback functions to identify when the expanding/collapsing has finished.

Examples

Component browser at de.DrJukka.com/DrY/

WRT example at Wiki: DrY_Accordion.zip

Go to DrY Index