javascript树形菜单和tab样式

最近看到两个javascript的免费控件：dhtmlxtree和tabAccordion,其中dhtmltree是一个树形控件，支持动态添加item、从xml文件中生成树形结构等。tabAccordion，顾名思义，是一个tab样式的控件，使用起来个人觉得很好。

其中dhtmlxtree的帮助文档网站为：http://dhtmlx.com/docs/products/docsExplorer/index.shtml?node=dhtmlxtree

下面是翻译过后的帮助文档：

页面上初始化树
<div id="treeBox" style="width:200;height:200"></div>
<script>
tree=new dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);
tree.setImagePath("gfx/");
tree.enableCheckBoxes(false);
tree.enableDragAndDrop(true);
</script>
构造器的参数如下:
1.应该将树放置的位置,在调用构造器之前应当为初始化
2.树的宽度
3.树的高度
4.标明父节点到树根节点的深度
特殊参数:
1.setImagePath(url):指明了树图标的路径
2.enableCheckBoxes(mode):多选框是否有效,默认显示多选框
3.enableDragAndDrop(mode):是否允许拖放动作




设置Event Handlers
<div id="treeBox" style="width:200;height:200"></div>
<script>
tree=new dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);
...
tree.setOnClickHandler(onNodeSelect);//set function object to call on node select
//see other available event handlers in API documentation
function onNodeSelect(nodeId){
...
}
</script>
大多数情况下制定event handlers的参数会得到一些值.关于被传递的变量细节部分请参考API documentation.




用Script加入节点:
<script>
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
...
tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");
tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");
</script>
1.参数0将会被传递给函数的参数4-7(调用select,image功能)的作用是 使用他们的默认值.
2.第8个参数 使用','分割
3.SELECT:在插入后移动光标到该节点
4.TOP:在TOP位置加入节点
5:CHIld:节点为儿子
6.CHECKED:多选框被选中(如果存在的话)




从XML中引导数据:
<script>
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
tree.loadXML("http://127.0.0.1/xml/tree.xml");//load root level from xml
</script>
1.被打开节点的ID将会被加入到initXMLAutoLoading(url)中去
2.当被调用的时候没有额外的ID加入到loadXML(url)中
3.当调用没有参数loadXML()时,你将会 使用initXMLAutoLoading(url)中的url
XML Syntax:
<?xml version='1.0' encoding='iso-8859-1'?>
<tree id="0">
<item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes">
<userdata name="system">true</userdata>
<item text="Floppy (A:)" id="11" child="0" im0="flop.gif" im1="flop.gif" im2="flop.gif"/>
<item text="Local Disk (C:)" id="12" child="0" im0="drv.gif" im1="drv.gif" im2="drv.gif"/>
</item>
<item text="Recycle Bin" id="4" child="0" im0="recyc.gif" im1="recyc.gif" im2="recyc.gif"/>
</tree>
在PHP的语法中:
<?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml"); } else {
header("Content-type: text/xml");
}
echo("<?xml version=/"1.0/" encoding=/"iso-8859-1/"?>/n");
?>
<tree>节点是强制的,他表明引导数据块的父亲.按照ID参数指定他的父亲.引导root的时候你需要指定tree对象:new myObjTree(boxObject,width,height,0)
<item>可以包含子元素(为了一次load更多),该标签的强制参数如下:
1.text:节点的名称
2.id:节点的id
可选参数如下:
3tooltip:节点的提示
4im0:没有儿子的节点图片(节点依靠setImagePath(url)中指定的路径来得到图片)
5.im1:打开有儿子节点时的图片
6.im2:关闭有儿子节点的图片
7:acolor:没有选择元素的颜色
8:scolor:选择元素后的颜色
9:select:在导入节点的时候选择
10:open:将节点展开
11:call:调用函数在选择节点的时候
12:checked:如果多选框存在的时候选择
13:child:如果节点有儿子的时候为1否则为0
14:imheight:图标的高度
15:imwidth:图标的宽度
在xml中直接设定userdata<userdata>
他有一个参数:name,value来指定他的值





给节点设定自定义图标:
这里有两种方法来给节点设定自定义图标.它依赖欲你加元素的方式
注:依靠setImagepath(url)方法来得到图片
javascript方法: 使用insertNewChild(...)或者insertNewNext(...)方法
<script>
var im0 = "doc.gif";//icon to show if node contains no children
var im1 = "opened.gif";//if node contains children and opened
var im2 = "closed.gif";//if node contains children and closed
tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");
</script>
XML 方法: 使用<item>标签
<?xml version='1.0' encoding='iso-8859-1'?>
<tree id="0">
<item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif">
</tree>
im0:没有儿子的节点图片
im1:打开节点的图片
im2:关闭节点的图片





构建动态的树:
如果你的树中包含大量的节点(或者你并不想花费时间来导入隐藏的节点).那么会有更好一点的方法来导入节点.针对这个效果我们 使用xml创建动态导入节点的深度.
察看章节:" 使用XML导入数据"
或者更多的细节:在我的知识库中的文章"在dhtmltree V.1.x动态导入数据"
操作节点:
在树对象的方法中很少的操作树节点的例子
<script>
tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);
...
var sID = tree.getSelectedItemId();//get id of selected node
tree.setLabel(sID,"New Label");//change label of selecte node
tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state)
tree.openItem(sID);//expand selected node
tree.closeItem(sID);//close selected node
tree.changeItemId(sID,100);//change id of selected node to 100
alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children
</script>




序列树
序列化方法允许在XML表达式中得到树.依靠反射直接序列化生成树
<script>
tree.setSerializationLevel(userDataFl,itemDetailsFl);
var myXmlStr = tree.serializeTree();

</script>
1.没有参数:id,open,select,text,child
2.userDataFI true-userdata
3.itemDetailsFI true -im0,im1,im2,acolor,scolor,checked,open




Tooltips:
这里有三种方法来给节点设置tooltips:
1. 使用node label(text属性)作为tooltip-enableAutoTooltips(mode) -默认为false
2. 使用tooltip属性
3.setItemText(itemId,newLabel,newTooltip)




移动节点:
依靠程序来移动节点可以采用下列方法:
移动upp/down/left
tree.moveItem(nodeId,mode)
1."down":向下移动节点(不需要注意层次)
2."up":向上移动节点
3:"left":向上一层移动




直接移动到某个位置:(在树内)
tree.moveItem(nodeId,mode,targetId)
1."item_child":将节点置为第三个参数的子节点
2:"item_sibling":将节点置为第三个参数的兄弟姐妹
3.targetId:目标节点的id




移动节点到某个位置(另外一个树)
tree.moveItem(nodeId,mode,targetId,targetTree)
targetId:目标节点的id
targetTree:目标树



剪切/粘贴
使用doCut(),doPaste(id):但是只可以 使用到选择的item中
开发者可以在某个位置删除节点然后在另外一个位置创建他
而用户尽可能的 使用拖放功能来移动元素




节点计数器:
也有可能在节点的标签上显示儿子的个数,可以 使用以下方法激活它:
<script>
tree.setChildCalcMode(mode);
</script>
可能的mode为:
1."child":在该深度所有的儿子
2."leafs":在该深度所有的叶子
3:"childrec":所有的儿子
4:"leafsrec":所有的叶子
5:"disabled":什么也没有
其他相关的方法:
_getChildCounterValue(itemId) - 得到当前计数器的值
setChildCalcHTML(before,after) - 改变计数器的值
当你在动态导入数据时如果你要 使用计数,请在xml中 使用child属性




smart xml解析:
smart xml解析很简单:在客户端完整的树结构被导入,但是仅仅显示被指定应该显示的.
这个将会减少导入时间和大树的性能.与动态导入相反,完整的树结构在大多数的script方法中是可行的.
例如对所有节点的搜索.激活smart xml parsing 使用以下方法:
<script>
tree.enableSmartXMLParsing(true);//false to disable
</script>
smart xml parsing如果在数被完全展开的时候不会执行.





多选框:
dhtmlxTree支持三种状态的多选框.
三种状态为:选择/不选择/一些子被选择(不是全部),激活多选框 使用以下方法:
<script>
tree.enableThreeStateCheckboxes(true)//false为失效
</script>
多选框失效:disableCheckbox(id,state)
一些节点可以隐藏checkboxes:showItemCheckbox(id,state)(nocheckbox xml属性)




拖放技巧:
有三种拖放模式setDragBehavior(mode)
1.拖为儿子:"child"
2.拖为姐妹:"sibling"
3.混合模式(previous要激活):"complex"
加两个模式:
1.公用的拖放多个
2.拷贝多个:tree.enableMercyDrag(1/0)
事件处理:Event handlers
在进行拖放多个前 使用onDrug事件:setDragHandler(func)
如果func不能返回true,那么放将会被取消
当放发生的时候会触发另外一个事件onDrop: 使用setDropHandler(func)
在所有的event handlers中会有5个参数传给func对象
1.被拖的节点id
2.目标节点的id
3.如果放为姐妹时,前一个节点的id
4.被拖节点所属树
5.目标节点所属树
在iframes中的拖放:
在iframes中的拖放多个默认是可以的.
所有你需要额外做的就是在没有树存在的地方插入下列代码
<script src="js/dhtmlXCommon.js"></script>
<script>
new dhtmlDragAndDropObject();
</script>




考虑到dhtml的性能低下问题,我们介绍两种方式来提高性能
1.动态导入
2.smart XML 解析
确认你的树有良好的组织.在同一个深度插入大量的元素会导致可见性的提升和性能的降低
菜单上下文:
这里是在dhtmltree中创建上下文菜单
菜单的内容可以在XML/script中设定.
因为改变上下文的菜单内容依靠树元素
所以开发者可以实现相同菜单或者不同元素 使用不同菜单的隐藏/显示
菜单上下文的开启如下:
<script>
//init menu
aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
aMenu.menu.setGfxPath("../imgs/");
aMenu.menu.loadXML("menu/_context.xml");
aMenu.setContextMenuHandler(onMenuClick);

//init tree
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
...
tree.enableContextMenu(aMenu); //link context menu to tree
function onMenuClick(id){
alert("Menu item "+id+" was clicked");
}
</script>





刷新节点
1.refreems(itemIdList,source)仅仅刷新节点列表(不包括他们的儿子)
2.refreem(itemId) ,刷新元素的儿子.在这里自动导入将会被激活
节点排序:
你可以排序在dhtmlTree pro(必须 使用 dhtmlXTree_sb.js), 使用以下方法:
tree.sortTree(nodeId,order,all_levels);
1.nodeId:开始排序的父节点(可以对整棵树排序)
2.order:ASC/DES
3.all_levles:如果为true,则所有子都会执行
自定义排序:
//define your comparator (in our case it compares second words in label)
function mySortFunc(idA,idB){
a=(tree.getItemText(idA)).split(" ")[1]||"";
b=(tree.getItemText(idB)).split(" ")[1]||"";
return ((a>b)?1:-1);
}
tree = new ...
//attach your comparator to the tree
tree.setCustomSortFunction(mySortFunc);
比较两个节点IDs,如果自定义比较被指定,则sortTree(...)方法将会 使用它






搜索功能:
dhtmlTree允许 使用节点的lable来做查询任务
也对Smart XML解析支持
tree.findItem(searchString); //find item next to current selection
tree.findItem(searchString,1,1)//find item previous to current selection
tree.findItem(searchString,0,1)//search from top





Multiline 树元素
允许显示在multiline模式.推荐 使用关闭lines
tree.enableTreeLines(false);
tree.enableMultiLineItems(true);



树的Icon:
使用setItemImage,setItemImage2或者xml(im0,im1,im2 )
设定ICON的大小:
<item ... imheight="Xpx" imwidth="Xpx"></item>
tree.setIconSize(w,h);//set global icon size
tree.setIconSize(w,h,itemId)//set icon size for particular item





在dhtmlTree中的错误处理
function myErrorHandler(type, desc, erData){
alert(erData[0].status)
}
dhtmlxError.catchError("ALL",myErrorHandler);
支持错误类型:
1."ALL"
2."LoadXML"
处理下列参数
type:string
desc:错误描述
erData:错误的相关数组对象

--------------------------------------------------------------------------------------------------------------------------------------------------

 tabAccordion的使用方法下面也提供一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabbed Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
color: #333;
font-size: 11px;
font-family: verdana;
}
a{
color: #fff;
text-decoration: none;
}
a:hover{
color: #DFE44F;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
text-align: justify;
border: 1px solid #73A405;
}
#wrapper{
width: 500px;
margin: 0 auto;
}
.box{
background: #fff;
}
.boxholder{
clear: both;
padding: 5px;
background: #8DC70A;
}
.tab{
float: left;
height: 32px;
width: 102px;
margin: 0 1px 0 0;
text-align: center;
background: #8DC70A url(images/greentab.jpg) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}
</style>
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
 var stretchers = document.getElementsByClassName('box');
 var toggles = document.getElementsByClassName('tab');
 var myAccordion = new fx.Accordion(
  toggles, stretchers, {opacity: false, height: true, duration: 600}
 );
 //hash functions
 var found = false;
 toggles.each(function(h3, i){
  var div = Element.find(h3, 'nextSibling');
   if (window.location.href.indexOf(h3.title) > 0) {
    myAccordion.showThisHideOpen(div);
    found = true;
   }
  });
  if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
</head>
<body>
<div id="wrapper">
 <div id="content">
 <h3 class="tab" title="first"><div class="tabtxt"><a href="#">first</a></div></h3>
 <div class="tab"><h3 class="tabtxt" title="second"><a href="#">second</a></h3></div>
 <div class="tab"><h3 class="tabtxt" title="third"><a href="#">third</a></h3></div>
 <div class="tab"><h3 class="tabtxt" title="fourth"><a href="#">fourth</a></h3></div>
 <div class="boxholder">
  <div class="box">
   <p><strong>The First Box</strong><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. In augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.</p>
  </div>
  <div class="box">
   <p><strong>The Second Box</strong><br />Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu. Praesent vel augue vel dolor ultricies convallis. Nam consectetuer risus eu urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam suscipit. Duis quis lacus sed tellus auctor blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget massa in ante vehicula pharetra. Ut massa pede, ornare id, ultrices eget, porta et, metus.</p>
  </div>
  <div class="box">
   <p><strong>The Third Box</strong><br />Suspendisse accumsan velit at dui tristique consectetuer. Quisque vitae felis ac arcu dignissim facilisis. Quisque ullamcorper. Cras molestie, elit vel blandit mattis, eros metus tempus tortor, id lobortis sem nunc eget dolor. Nullam dui. Aenean justo. Curabitur ullamcorper, libero eu faucibus ultricies, ipsum arcu interdum tellus, eget tempus augue mauris nec purus. Donec a pede nec tortor venenatis bibendum. Nunc quis erat ac augue rhoncus dictum. Nullam id augue at augue iaculis posuere. Nulla volutpat facilisis quam.</p>
  </div>
  <div class="box">
   <p><strong>The Fourth Box</strong><br />Morbi feugiat mauris at velit. Proin rutrum lectus. Proin pulvinar turpis tempor nibh. Cras sit amet magna sed risus tempor vestibulum. Nunc vitae nulla. Vivamus fermentum. Praesent a sem. Cras eu neque ultricies tellus tristique vehicula. Praesent dignissim consequat metus. Integer dolor. Donec pellentesque, libero eu ullamcorper suscipit, lorem augue molestie arcu, vitae sodales quam nulla vel urna. Suspendisse accumsan sem nec leo. Proin dui ante, placerat id, consectetuer et, gravida in, velit. Duis non massa. Etiam mollis. Vestibulum id est. Sed sit amet tellus. Vestibulum varius dolor vitae velit.</p>
  </div>
 </div>
</div>
</div>
<script type="text/javascript">
 Element.cleanWhitespace('content');
 init();
</script>
</body>
</html>