DrY Accordion component

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:DrY Accordion.zip

---

Article

Created: symbianyucca (16 May 2010)

Last edited: hamishwillee (05 Jul 2012)

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