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);
}
});RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3