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

2007-02-25 02:21

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

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

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

         2 JQUERY学习，教程资源汇总

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

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



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

         [url]http://bassistance.de/jquery-plugins/jquery-plugin-treeview/[/url]

         这里是DEMO

         [url]http://jquery.bassistance.de/treeview/treeviewDemo.html[/url]



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

         第一步：下载JQUERY和TREEVIEW插件。

         JQUERY: [url]http://jquery.bassistance.de/dist/jquery.js[/url]

         TREEVIEW: [url]http://jquery.bassistance.de/treeview/jquery.treeview.zip[/url](注意：解压后里面的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,这样就搞定了。

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

你可能感兴趣的:(JavaScript,html,jquery,XHTML,url,Class)