loading ...
loading...

2008-04-24 | YUI-TreeView

标签: treeview  yahoo  tree  js  widget 
使用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基类。
创建一个树状菜单
 
var tree;
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();

评论 (1) |  阅读 (?)  |  固定链接 |  类别 (javascript) |  发表于 21:06
正在读取评论信息...
您还未登录,只能匿名发表评论。或者您可以 登录 后发表。
 
  *中国人爱国心,搜狗输入法爱国主题皮肤下载>>
表  情:
加载中...
回复通知: 同时用小纸条通知对方该回复