小web节点树[第一画]

最新推荐文章于 2024-07-24 11:09:48 发布

aefer62244

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量101

点赞数

文章标签： xhtml javascript ui ViewUI

原文链接：http://www.cnblogs.com/littleweb/archive/2009/01/15/1376366.html

版权

结构清晰，简洁，调用方便、快捷，呼呼!

因为是第一画，木有做任何数据源接口!

先看下效果图：

小web节点树

代码如下：xhtml+css+jq+一个JS

附小web节点树[第一画]下载

附JQ1.3下载链接：http://files.cnblogs.com/littleweb/jquery-1.3.js

xhtml:

XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小web目录树</title>
<style type="text/css">
@import url('UI/basic.css');
@import url('UI/tree.css');
</style>
<script type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="UI/script/tree.js"></script>
</head>
<body>
<div class="treeroom">
    <ul class="root">
        <li class="folder">
            <h4>目录结点</h4>
            <ul>
                <li>文件节点</li>
                <li>文件节点</li>
                <li>文件节点</li>
            </ul>
        </li>
        <li>文件节点</li>
        <li class="folder">
            <h4>目录结点</h4>
            <ul>
                <li>文件节点</li>
                <li class="folder">
                    <h4>目录结点</h4>
                    <ul>
                        <li>文件节点</li>
                        <li>文件节点</li>
                        <li class="folder">
                            <h4>目录结点</h4>
                            <ul>
                                <li>文件节点</li>
                                <li>文件节点</li>
                                <li class="folder">
                                    <h4 class="close">目录结点</h4>
                                    <ul>
                                        <li>文件节点</li>
                                        <li>文件节点</li>
                                        <li>文件节点</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>文件节点</li>
                    </ul>
                </li>
                <li>文件节点</li>
            </ul>
        </li>
        <li class="folder">
            <h4 class="close">目录结点</h4>
            <ul>
                <li>文件节点</li>
                <li>文件节点</li>
                <li>文件节点</li>
            </ul>
        </li>
    <li>文件节点</li>
    <li>文件节点</li>
    <li>文件节点</li>
    </ul>
</div>
</body>
</html>

css(basic.css):

basic.css
*{
    margin:0px;padding:0px;

}
html,body{
    width:100%;height:100%;
    overflow:hidden;
}
.blank{
    clear:both;
    visibility:hidden;
}

img{
    border:0 none;
    vertical-align:bottom;    /*消除图片间白色间隙bug*/
}

ul, li{
    list-style-type: none;
}

a:link,a:visited{
    color:#1F3A87;text-decoration:none;
}
a:hover,a:active{
    color:#0065FF;text-decoration:underline;
}
.b{
    font-weight:bold ;
}

css(tree.css):

tree.css
.treeroom{
    width:250px;height:500px;
    margin:30px 50px;
    overflow:hidden;
    background:#99CCFF;border:1px solid #2E91D0;
}
.treeroom .root{
    width:228px;height:478px;
    margin:5px;padding:10px 0 0 10px;
    overflow:auto;
    font-size:13px;
    background:#FFF;border:1px solid #2E91D0;
}
ul li{margin-left:17px;}
.folder h4,* li{
    width:120px;min-width;120px;
    overflow:visible;
    font-size:13px;
    background:url(imgsrc/icon.gif) no-repeat
}
.folder h4{
    margin-left:-14px;padding-left:34px;
    background-position:0px -26px;
    cursor:pointer;
}
* li{
    padding-left:21px;
    line-height:22px;
    background-position:0px -53px;
}
li.folder{
    margin-left:-4px;
    background:url('');
}
h4.close{background-position:0px -1px;}

tree.js:

tree.js
$(function(){
$("h4.close").next().toggle();//初始化闭合树
$(".folder h4").click(function(){
$(this).toggleClass("close").next().toggle();

});
})

转载于:https://www.cnblogs.com/littleweb/archive/2009/01/15/1376366.html

aefer62244

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小web节点树[第一画]

结构清晰，简洁，调用方便、快捷，呼呼!因为是第一画，木有做任何数据源接口!先看下效果图：代码如下：xhtml+css+jq+一个JS附小web节点树[第一画]下载附JQ1.3下载链接：http://files.cnblogs.com/littleweb/jquery-1.3.jsxhtml:XHTML<!DOCTYPEhtmlPUBLIC"...
复制链接

扫一扫