新建多选树¶
新建多选树¶
载入1.2的 kissy
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>HTML关键代码
<div id="treeContainer" style="width: 200px;"> <!-- 此次只提供一个树的容器,通过KISSY代码向容器中增加构成树的DOM元素 --> <!-- 在树生成之后,此处会有DOM元素添加进来 --> </div>初始化树
KISSY.use("tree", function(S, Tree) { var $ = S.all; //通过DOM元素生成一棵可选择树 var tree = new Tree.CheckTree({ content : "淘宝网", prefixCls : "goog-", expanded : true, render : "#treeContainer" }); //新建一个树结点favorates var favorates = new Tree.CheckNode({ prefixCls : "goog-", content : "收藏夹", tree : tree }); //在favorates结点下添加新的子结点 favorates.addChild(new Tree.CheckNode({ prefixCls : "goog-", content : "收藏的宝贝" })); //在favorates结点下再添加新的子结点 favorates.addChild(new Tree.CheckNode({ prefixCls : "goog-", content : "收藏的店铺" })); //将结点favorates加入到树中 tree.addChild(favorates); /* * 以下同理都是增加树了了结点以及子子结点 */ tree.addChild(new Tree.CheckNode({ prefixCls : "goog-", content : "我要买" })); var one = new Tree.CheckNode({ prefixCls : "goog-", content : "我的淘宝", tree : tree }); one.addChild(new Tree.CheckNode({ prefixCls : "goog-", content : "已买到的宝贝" })); one.addChild(new Tree.CheckNode({ prefixCls : "goog-", content : "已卖出的宝贝" })); tree.addChild(one); //在所有结点关系确定后,将树的特性绑定到DOM元素 tree.render(); //添加事件 tree.on("click", function(e) { alert("action : " + e.target.get("content")); }); //增加两个Button来调用树的接口 $('<input type="button" value="全部收缩" style="margin:5px;"/>') .on('click',function(){ //通过外部调用树的接口操作树 tree.collapseAll(); }).prependTo($('#treeContainer')); $('<input type="button" value="全部展开" style="margin:5px;"/>') .on('click',function(){tree.expandAll();}) .prependTo($('#treeContainer')); });Note
使用树还需要自己定义皮肤样式, 以上参考的是 google 的样式