JQUERY 实现无限极TREEVIEW

最新推荐文章于 2025-08-07 22:25:00 发布

转载最新推荐文章于 2025-08-07 22:25:00 发布 · 5.1k 阅读

文章标签：

#jquery #url #html #xhtml #class #function

JQuery框架专栏收录该内容

4 篇文章

订阅专栏

第一步：下载JQUERY和TREEVIEW插件。
         JQUERY:http://jquery.bassistance.de/dist/jquery.js
         TREEVIEW:http://jquery.bassistance.de/treeview/jquery.treeview.zip(注意：解压后里面的DEMO是不能正常显示的，因为缺少jquery.js。大家下载下来放到相应目录即可)

         第二步：创建一个HTML文件
         因为我们要利用一些图片资源，所以就在jquery.treeview.zip解压以后的目录里面创建。
         例如我们创建一个treeview.html文件。用你喜欢的编辑器写以下的代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>TREEVIEW</title>
        这里是引入jquery.js文件，我上面已经提过原来的压缩包是没有的，下载以后复制进去即可。
        <script type="text/javascript" src="jquery.js"></script>
        这里是引入treeview插件
        <script type="text/javascript" src="jquery.treeview.js"></script>
        下面这个是jquery的语法格式，不懂的可以到上面看我给的那些入门资料。
        <script type="text/javascript">
        $(function(){
        $("ul").Treeview();

        });
        </script>
        以下是一些CSS样式，这里是必须的。大家可以根据自己的喜好来改它的外观，这也是我特别欣赏       的地方
        <style type="text/css">

    .treeview, .treeview ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.treeview li {
    margin: 0;
    padding: 4px 0 3px 20px;
}

.treeview li { background: url(images/tv-item.gif) 0 0 no-repeat; }
.treeview .collapsable { background-image: url(images/tv-collapsable.gif); }
.treeview .expandable { background-image: url(images/tv-expandable.gif); }
.treeview .last { background-image: url(images/tv-item-last.gif); }
.treeview .lastCollapsable { background-image: url(images/tv-collapsable-last.gif); }
.treeview .lastExpandable { background-image: url(images/tv-expandable-last.gif); }

    </style>


    </head>
    <body>

     大家可以根据自己的要求改下面的这些代码，只要结构按照html语言里的列表结构即可。

<ul>
  <li>Item 1
    <ul>
      <li>Item 1.1</li>
    </ul>
  </li>
  <li class="closed">Item 2 (如果CLASS指定了closed,那么他默认是关闭的)
    <ul>
      <li>Item 2.1
        <ul>
          <li>Item 2.1.1</li>
          <li>Item 2.1.2</li>
        </ul>
      </li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

</body>
</html>