简单使用tree
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<title>简单使用tree</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/button/assets/dpl.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/tree/assets/dpl.css">
<script type="text/javascript" src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js"></script>
</head>
<body>
<div style="width:90%;margin:0 auto;">
<h1>简单使用tree</h1>
<a href="javascript:void(0)" id="expandAll" class="ks-button">展开全部</a>
<a href="javascript:void(0)" id="collapseAll" class="ks-button">关闭全部</a>
<a href="javascript:void(0)" id='remove' class="ks-button">remove first child</a>
<div id="treeContainer" style="width: 200px;margin: 20px 0;">
</div>
</div>
<script type="text/javascript">
require(['tree', 'node'], function(Tree, $){
var tree = new Tree({
content: "淘宝网",
expanded: true,
// showRootNode:false, //是否显示根节点
render: "#treeContainer"
});
var favorates = new Tree.Node({
content: "收藏夹",
tree: tree
});
favorates.addChild(new Tree.Node({
content: "收藏的宝贝"
}));
favorates.addChild(new Tree.Node({
// 即使没有儿子也强制指定为 folder 样式
isLeaf: false,
content: "收藏的店铺"
}));
tree.addChild(favorates);
tree.addChild(new Tree.Node({
content: "我要买"
}));
var one = new Tree.Node({
content: "我的淘宝",
tree: tree
});
one.addChild(new Tree.Node({
content: "已买到的宝贝"
}));
one.addChild(new Tree.Node({
content: "已卖出的宝贝"
}));
tree.addChild(one);
tree.render();
tree.on("expand", function (e) {
if (0) {
S.log("expand : " + e.target.get("content"));
S.log("expandIconEl");
S.log(e.target.get("expandIconEl"));
S.log("iconEl");
S.log(e.target.get("iconEl"));
}
});
tree.on("collapse", function (e) {
S.log("collapse : " + e.target.get("content"));
});
tree.on("click", function (e) {
S.log("action : " + e.target.get("content"));
});
$("#expandAll").on("click", function () {
tree.expandAll();
});
$("#collapseAll").on("click", function () {
tree.collapseAll();
});
$("#remove").on("click", function () {
tree.removeChild(tree.getChildAt(0))
});
});
</script>
</body>
</html>