×
Namespaces

Variants
Actions
(Difference between revisions)

DrY Accordion component

From Nokia Developer Wiki
Jump to: navigation, search
symbianyucca (Talk | contribs)
(Created page with '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 A…')
 
symbianyucca (Talk | contribs)
Line 33: Line 33:
  
 
The construction for the According takes domIds struct as a first argument, with this struct following variables can be defined:
 
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,  
+
* "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,
+
* "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,
+
* "content": Dom-ID name fort he div where the Accordion collapsing is to be placed in,
- "expanded": true/false, defined initial collapsing state,
+
* "expanded": true/false, defined initial collapsing state,
- "animated": true/false, identifies whether collapsing/expanding is done with animation,
+
* "animated": true/false, identifies whether collapsing/expanding is done with animation,
- "animDelay": delay fort he collapsing/expanding 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.
 
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.
Line 49: Line 49:
  
 
WRT example at Wiki: [http://wiki.forum.nokia.com/index.php/File:DrY_Accordion.zip DrY_Accordion.zip]
 
WRT example at Wiki: [http://wiki.forum.nokia.com/index.php/File:DrY_Accordion.zip DrY_Accordion.zip]
 +
 +
[[Category:Web Runtime (WRT)]]

Revision as of 09:46, 16 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

70 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×