2008-04-24 | YUI-TreeView
标签:
使用TreeView控件,需要在页面内包含以下代码:
<!-- Required CSS -->
2 link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/treeview/assets/skins/sam/treeview.css">
3
4 <!-- Dependency source files -->
5 <script src = "http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js" ></script>
6 <script src = "http://yui.yahooapis.com/2.5.1/build/event/event-min.js" ></script>
7
8 <!-- TreeView source file -->
9 <script src = "http://yui.yahooapis.com/2.5.1/build/treeview/treeview-min.js" ></script>
注意:这个包含列表里有一个关于TreeView的css 文件,这里有一个问题,既是加载这个CSS,文件 你也发面,TreeView不能正常显示,你还需要添加 一个样式应用 件:“yui-skin-sam”,到TreeView控件的父节点比如说<body class ="yui-skin-sam">
TreeView 控件代码在YHAOO.widget.Tree这个包里面,TreeView的树节点是继承自YAHOO.widget.Node基类。
<!-- Required CSS -->
2 link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/treeview/assets/skins/sam/treeview.css">
3
4 <!-- Dependency source files -->
5 <script src = "http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js" ></script>
6 <script src = "http://yui.yahooapis.com/2.5.1/build/event/event-min.js" ></script>
7
8 <!-- TreeView source file -->
9 <script src = "http://yui.yahooapis.com/2.5.1/build/treeview/treeview-min.js" ></script>
注意:这个包含列表里有一个关于TreeView的css 文件,这里有一个问题,既是加载这个CSS,文件 你也发面,TreeView不能正常显示,你还需要添加 一个样式应用 件:“yui-skin-sam”,到TreeView控件的父节点比如说<body class ="yui-skin-sam">
TreeView 控件代码在YHAOO.widget.Tree这个包里面,TreeView的树节点是继承自YAHOO.widget.Node基类。
创建一个树状菜单
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("treeDiv1");
}
function treeInit() {
tree = new YAHOO.widget.TreeView("treeDiv1");
}
new 一个 TreeView的实现先。传递给构造器的参数"treeDiv1"表示你想将这个棵树放在id为treeDiv1的这个元素里,也就是相当于这棵对的容器,除了ID,还可以直接传递一个元素的引用:
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView(document.getElementById("treeDiv1"));
}
创建好一个TreeView实例后,就可以开始给树添加结点,注意新添加的节点,在你调用draw()之前是不会被写入的根节点的,就也是说,只有你调用了draw()方法才会被显示出来。
当一个TreeView被创建后,root节点会自动产生,而子节点的构造函数,需要父节点的引用作为参数,所以你需要取得root节点的引用,来创建树的
第一层。这里我们使用getRoot()方法来取得root节点。
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("treeDiv1");
var root = tree.getRoot();
var tmpNode = new YAHOO.widget.TextNode("mylabel", root, false);
tree.draw();
}
下面的例子添加一个text 类型的节点到root上面最后那个参数指出显示的时候,节点是否折叠
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("treeDiv1");
var root = tree.getRoot();
var tmpNode = new YAHOO.widget.TextNode("mylabel1", root, false);
var tmpNode2 = new YAHOO.widget.TextNode("mylabel1-1", tmpNode, false);
tree.draw();
}
删除节点:
tree.removeNode(nodeToRemove);
// 将新节点弹出,效果根removeNode一样,不过返回被删除的节点
tree.popNode(nodeToPop);
//在nodeToPop之前插入一个新的节点
nodeToPop.insertBefore(anotherNode);
//刷新节点树新添加的节点将会被显示
anotherNode.parent.refresh();
//在nodeToPop这后添加一个新的节点
nodeToPop.appendTo(anotherNode);
anotherNode.refresh();


档案
日志
相册
视频


评论
想第一时间抢沙发么?