利用JQUERY的TREEVIEW插件生成无限极树

这里对JQUERY就不做详细介绍了,给我的感觉它是一个封装了JAVASCRIPT的函数库。里面有很多有用的东东,如果对JQUERY还不熟悉读者,请看以下两篇文章篇文章:

         1 jQuery中文入门指南,翻译加实例,jQuery的起点教程

            http://hi.baidu.com/wolftotem1984/blog/item/4335a618aa097ab44aedbcc5.html

         2 JQUERY学习,教程资源汇总

            http://hi.baidu.com/wolftotem1984/blog/item/40de9211768c1f7eca80c4a9.html

         第一篇文章是我转过来的,第二篇是对JQUERY学习资源的总结,希望对大家入门有所帮助。

         

         好了,言归正传。TREEVIEW是JQUERY的一个插件。用起来非常简单。以下是这个插件的官方网站

         http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

         这里是DEMO

         http://jquery.bassistance.de/treeview/treeviewDemo.html

         

         看到效果了吧,有点像WINDOWS的资源管理器。要实现这个效果利用JQUERY的TREEVIEW插件非常的方便,以下几步便可实现了。

 

         第一步:下载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>

        

OK,这样就搞定了。

你可能感兴趣的:(treeview)