×
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…')
 
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
The Dry Accordion is not based on any previous component, but is completely new. It Though uses the Themes from Guarana & Theme-roller.
+
[[Category:Symbian Web Runtime]][[Category:UI]]
 +
{{ArticleMetaData
 +
|sourcecode=[[Media:DrY Accordion.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|review-by=<!-- After re-review: [[User:username]] -->
 +
|review-timestamp=<!-- After re-review: YYYYMMDD -->
 +
|update-by=<!-- After significant update: [[User:username]]-->
 +
|update-timestamp=<!-- After significant update: YYYYMMDD -->
 +
|creationdate=20100516
 +
|author=[[User:Symbianyucca]]
 +
}}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
 
Following code snipped shows on how the According control can be used
<CODE>
+
<code javascript>
 
dojo.require("dry.Accordion");
 
dojo.require("dry.Accordion");
  
Line 30: Line 50:
  
 
var acc = new dry.Accordion({domIds: domIdsData2,styleTweaker: styleTweaker,expanded: expanded,collapsed: collapsed,});
 
var acc = new dry.Accordion({domIds: domIdsData2,styleTweaker: styleTweaker,expanded: expanded,collapsed: collapsed,});
</CODE>
+
</code>
  
 
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 45: Line 65:
 
== Examples ==
 
== Examples ==
  
 +
* Component browser at [http://dev.drjukka.com/DrY/ de.DrJukka.com/DrY/]
 +
* WRT example at Wiki: [[:File:DrY Accordion.zip|DrY Accordion.zip]]
  
Component browser at [http://dev.drjukka.com/DrY/ de.DrJukka.com/DrY/]
+
[[DrY Article Index|Go to DrY Index]]
 
+
WRT example at Wiki: [http://wiki.forum.nokia.com/index.php/File:DrY_Accordion.zip 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.
73 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.

×