我的JS TreeView树(二)
来源:互联网 发布:淘宝4.2接口不存在 编辑:程序博客网 时间:2024/05/16 03:33
/**
* 普通树 drawNode.js
*/
function drawFolder(folder){
var fold_code = folder.code;
var fathers = getGrandFather(folder);
var content = '<div id="fld'+fold_code+'" style="display:none;font-size:9pt;" noWrap>';
for (var i=fathers.length;i>0;i--){
if (hasBrothers(fathers[i-1])){
content += '<img src="'+barImg+'" '+imgAlign+'>';
}else{
content += '<img src="'+spacerImg+'" '+imgAlign+'>';
}
}
content += '<img id="fldImg'+fold_code+'" '+imgAlign+' onclick="clickNode(/''+fold_code+'/')" src="';
if (isLeafNode(fold_code)){ //叶
if (hasBrothers(folder)){ //最后一个
content += teeImg;
}else{
content += cornerImg;
}
content += '"><img id="1_fldImg'+fold_code+'" '+imgAlign+' onclick="clickNode(/''+fold_code+'/')" src="'+leafImg;
}else{
if (hasBrothers(folder)){
content += teePlusImg;
}else{
content += cornerPlusImg;
}
content += '"><img id="1_fldImg'+fold_code+'" '+imgAlign+' onclick="clickNode(/''+fold_code+'/')" src="'+folderImg;
}
content += '" onclick="clickNode(/''+fold_code+'/')">';
content += '<span id="text'+fold_code+'" style="cursor:hand" onMouseOver=/'return winStatus("'+folder.desc+'")/' onMouseOut="return winStatus(/'/')" onclick="clickNode(/''+fold_code+'/')">'+folder.desc+'</span>';
content += '</div>';
document.writeln(content);
}
//-----------------------------------------------------------------------------------------
CSS文件:menu.css
<!--
.menuTree{
position:abstract;
color:#221133;
filter:DropShadow(Color=#ffffea, OffX=3, OffY=3, Positive=4) Blur(add=true,direction=135,strengh=20);
font-family: 仿宋_gb2312;
font-size: 18px;
font-weight:bold;
text-decoration: blink;
text-align:center;
cursor:hand;
}
.menuImage{
cursor:hand;
border:none;
}
.menuTree1{
position:abstract;
color:#000000;
filter:DropShadow(Color=#ffffea, OffX=3, OffY=3, Positive=4) Blur(add=true,direction=135,strengh=20);
font-family: GlitzyCurl;
font-size: 14px;
font-weight:bold;
text-decoration: blink;
text-align:center;
}
.overItem{
font-size:11pt;
border:#30AEF2 solid 0px;
color:#66CCFF;
background-color:#FFFFCC;
}
.outItem{
font-size:11pt;
color:#000000;
background-color:transparent;
border:transparent solid 1px;
}
#ctxmenu{
position:absolute; border: 1px outset #205AA7;
background-color:#BFCAE6;
padding:2px; width:40px;
visibility:hidden;
z-index:10;
font-size:12px;
cursor:default;
text-align:center;
}
.ctxmenu-item { padding:2px;width:100%;cursor:default; border:1px solid #7388C1;}
.ctxmenu-line { border-top:1px solid #848284; border-bottom:1px solid white; margin:2px;}
.ctxmenu-over { padding:2px;background-color:#9496AD; border:1px solid #08246B;}
//------------------------------------------------------------------------
测试文件 test.htm
<link rel="stylesheet" type="text/css" href="menu.css">
<script language="JScript.Encode" src="treeView.js"></script>
<script language="JScript.Encode" src="drawNode.js"></script>
<body>
<script language="JScript.Encode" id="scriptText">
//Folder(nodecode,description,layer,parentId,hreference)
addFolder(new Folder("0001","第一代1",1,0,null));
addFolder(new Folder("00010001","第二代1",2,"0001",null));
addFolder(new Folder("00010002","第二代2",2,"0001",null));
addFolder(new Folder("000100010001","第三代1",3,"00010001",null));
addFolder(new Folder("000100010002","第三代2",3,"00010001",null));
addFolder(new Folder("000100010003","第三代3",3,"00010001",null));
addFolder(new Folder("000100020001","第三代4",3,"00010002",null));
addFolder(new Folder("0001000200010001","第四代1",4,"000100010001",null));
addFolder(new Folder("0001000200010002","第四代2",4,"000100010001",null));
setImagePath();
drawRootNode("根");
drawTree();
document.body.appendChild(tree_cxtmenu);
</script>
</body>
- 我的JS TreeView树(二)
- 我的JS TreeView树(一)
- 我的JS TreeView树(三)----ctxmenu on treeNode
- TV20.js(TreeView)的使用
- TreeView应用(二)
- treeview绑定(二)
- 我的three.js学习记录(二)
- js操作TreeView的checkbox
- JS写的一个功能齐备的树控件treeview
- treeView.js
- 一段生成treeview的js代码
- JS获取TreeView的Text和Value
- JS实现对TreeView的全选
- bootstrap-treeview.js的高级使用
- bootstrap treeview 下拉树 (二) checkBox多选
- 动态加载dtree.js树treeview
- TreeView(扩充XMLSelTree)(二)
- TreeView(扩充XMLSelTree)(二)
- JAVA环境变量配置介绍
- RMS的遍历
- 关于整数部分为0的小数在web上的显示问题
- 关于手机
- .NET 精髓Python系列文章
- 我的JS TreeView树(二)
- .NET 精髓精华文章列表
- 控制程序唯一运行
- 配置最新版本的PHP服务器
- 研究生
- 解决SQL语句过度消耗CPU问题
- RequestDispatcher接口的include()方法与forward()方法的区别
- x86汇编指令详解
- 海量数据库的查询优化及分页算法方案