Enyo JavaScript Framework - Example
Enyo is yet another Javascript framework that is great with controls, in this example you can see how to create a tree of object
full code can be found here
enyo.kind({
name: "enyo.sample.TreeSample",
classes: "enyo-unselectable enyo-fit",
kind: "FittableRows",
fit: true,
components: [
{kind: "Selection", onSelect: "select", onDeselect: "deselect"},
{kind: "Scroller", fit: true, components: [
{kind: "Node", icon: "assets/folder-open.png", content: "Tree", expandable: true, expanded: true, onExpand: "nodeExpand", onNodeTap: "nodeTap", components: [
{icon: "assets/file.png", content: "Alpha"},
{icon: "assets/folder-open.png", content: "Bravo", expandable: true, expanded: true, components: [
{icon: "assets/file.png", content: "Bravo-Alpha"},
{icon: "assets/file.png", content: "Bravo-Bravo"},
{icon: "assets/file.png", content: "Bravo-Charlie"}
]},
{icon: "assets/folder.png", content: "Charlie", expandable: true, components: [
{icon: "assets/file.png", content: "Charlie-Alpha"},
{icon: "assets/file.png", content: "Charlie-Bravo"},
{icon: "assets/file.png", content: "Charlie-Charlie"}
]},
{icon: "assets/folder-open.png", content: "Delta", expandable: true, expanded: true, components: [
{icon: "assets/file.png", content: "Delta-Alpha"},
{icon: "assets/file.png", content: "Delta-Bravo"},
{icon: "assets/file.png", content: "Delta-Charlie"}
]},
{icon: "assets/file.png", content: "Epsilon"}
]}
]}
],
nodeExpand: function(inSender, inEvent) {
inSender.setIcon("assets/" + (inSender.expanded ? "folder-open.png" : "folder.png"));
},
nodeTap: function(inSender, inEvent) {
var node = inEvent.originator;
this.$.selection.select(node.id, node);
},
select: function(inSender, inEvent) {
inEvent.data.$.caption.applyStyle("background-color", "lightblue");
},
deselect: function(inSender, inEvent) {
inEvent.data.$.caption.applyStyle("background-color", null);
}
});
Recent Stories
Top DiscoverSDK Experts
Mendy Bennett
Experienced with Ad network & Ad servers.
Mobile | Ad Networks and 1 more
View Profile
Karen Fitzgerald
7 years in Cross-Platform development.
Mobile | Cross Platform Frameworks
View Profile
X
Compare Products
Select up to three two products to compare by clicking on the compare icon () of each product.
{{compareToolModel.Error}}Now comparing:
{{product.ProductName | createSubstring:25}} X
{{CommentsModel.TotalCount}} Comments
Your Comment