×
Namespaces

Variants
Actions
(Difference between revisions)

DrY Accordion component

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Code syntax markup for javascript)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
 
Line 1: Line 1:
[[Category:Symbian Web Runtime]]
+
[[Category:Symbian Web Runtime]][[Category:UI]]
 
{{ArticleMetaData
 
{{ArticleMetaData
 
|sourcecode=[[Media:DrY Accordion.zip]]  
 
|sourcecode=[[Media:DrY Accordion.zip]]  

Latest revision as of 06:47, 5 July 2012

Article Metadata
Code ExampleArticle
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.


[edit] Examples

Go to DrY Index

This page was last modified on 5 July 2012, at 06:47.
74 page views in the last 30 days.
×