XTUxiaoxin 2014-02-28
在网上看到一个流行的dtree代码,看了一下,数据都是直接封装在js中,新增列表数据放在哪一层里都是手动添加的,感觉要是维护的话,还是有一点点麻烦,所以就自己写了一个。样式截图如下:
以下是html的代码段,大家可以很清楚的看清它的层级关系,这里我就不多说了,关于每个li的class是可以省略不写的。
<div class="faa_tree"> <ul> <li class="layer01"><span>我是第一层1</span> <ul> <li class="layer02"><span>我是第二层</span> <ul> <li class="layer03"><span>我是第三层08</span> </li> <li class="layer03"><span>我是第三层09</span> </li> <li class="layer03"><span>我是第三层000</span> </li> </ul> </li> <li class="layer02"><span>我是第二层02</span> <ul> <li class="layer03"><span>我是第三层sdfs08</span> <ul> <li class="layer04"><span><a target="_blank" href="www.baidu.com">我是第四层01</a></span> <ul> <li class="layer05"><span>我是第五层01</span> </li> </ul> </li> </ul> </li> <li class="layer03"><span>我是第三层dfsd09</span> </li> <li class="layer03"><span>我是第三层sfdsf000</span> </li> </ul> </li> </ul> </li> <li class="layer01"><span>我是第一层2</span> </li> <li class="layer01"><span>我是第一层3</span> <ul> <li><span><a href="www.baidu.com" target="_blank">我是第二层</a></span> </li> </ul> </li> </ul> </div>
以下是css代码段
@charset "utf-8"; /* CSS Document edit by faa*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form, table { margin:0; padding:0; border:0; list-style:none;} div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form { overflow:hidden;} input { margin:0; padding:0; } h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;} a,area{blr:expression(this.onFocus=this.blur())} a { text-decoration:none;} a:hover { text-decoration:underline;} .boxcenter { margin:0 auto;} body{ font-size:12px;} .faa_tree li{margin-left:0px;line-height:12px;} .faa_tree>ul>li ul{display:none;} .faa_tree span{} .faa_tree img{position:relative;} .faa_tree img,.faa_tree span{vertical-align:text-bottom;}/* 这个属性是控制img和span水平对齐的*/
以下是js代码段
// JavaScript Document edit by faa function icons (){//定义的图标 this.folder="<img src='images/folder.gif' />"; this.empty="<img src='images/empty.gif' />"; this.folderopen="<img src='images/folderopen.gif' />"; this.join="<img src='images/join.gif' />"; this.joinbottom="<img src='images/joinbottom.gif' />"; this.line="<img src='images/line.gif' />"; this.minus="<img src='images/minus.gif' />"; this.minusbottom="<img src='images/minusbottom.gif' />"; this.page="<img src='images/page.gif' />"; this.plus="<img src='images/plus.gif' class='fold' />"; this.plusbottom="<img src='images/plusbottom.gif' class='fold' />"; } var icons=new icons(); function initTree(){ $(".faa_tree li span").parent().has("ul").each(function(){//添加文件夹的图标 if($(this).index()==($(this).parent().children().length)-1){//当这个文件夹是底部节点的时候 $(this).prepend(icons.plusbottom+icons.folder); for(var i=0;i<$(this).parents("li").length;i++){//parents()获取的是所有父栏目,从最近的父栏目开始,而prepend每次就都往前插,所以也是从最近的地方像远处插入竖线或空白,所以要从小到大的按照顺序的放,这个是添加竖线的代码 if($(($(this).parents("li"))[i]).next().html()==null){ $(this).prepend(icons.empty); } else{ $(this).prepend(icons.line);} } } else{//当这个文件夹不是底部节点的时候 $(this).prepend(icons.plus+icons.folder); for(var i=0;i<$(this).parents("li").length;i++){ if($(($(this).parents("li"))[i]).next().html()==null){ $(this).prepend(icons.empty); } else{ $(this).prepend(icons.line);} } } }); $(".faa_tree li span").parent().not($(".faa_tree li span").parent().has("ul")).each(function(){//添加单页的图标 if($(this).index()==$(this).parent().children().length-1){//当这个单页图标是底部节点的时候 $(this).prepend(icons.joinbottom+icons.page); for(var i=0;i<$(this).parents("li").length;i++){ if($(($(this).parents("li"))[i]).next().html()==null){ $(this).prepend(icons.empty); } else{ $(this).prepend(icons.line);} } } else{//当这个单页不是底部节点的时候 $(this).prepend(icons.join+icons.page); for(var i=0;i<$(this).parents("li").length;i++){ if($(($(this).parents("li"))[i]).next().html()==null){ $(this).prepend(icons.empty); } else{ $(this).prepend(icons.line);} } } }); } $(document).ready(function(){ initTree(); $(".faa_tree li .fold").click(function(e){//给folder图标加点击事件 if($(this).parent().children("ul").css("display")=="none"){ $(this).parent().children("ul").css("display","block"); $(this).next().attr("src","images/folderopen.gif"); if($(this).attr("src")=="images/plus.gif"){ $(this).attr("src","images/minus.gif");} else{ $(this).attr("src","images/minusbottom.gif"); } } else{$(this).parent().children("ul").css("display","none"); $(this).next().attr("src","images/folder.gif"); if($(this).attr("src")=="images/minus.gif"){ $(this).attr("src","images/plus.gif");} else{ $(this).attr("src","images/plusbottom.gif");} } }); });
大家自行下载附件吧