jquery treeview 的用法

利用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的一个插件。用起来非常简单。以下是这个插件的官方网站 http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 这里是DEMO http://jquery.bassistance.de/treeview/demo/ 看到效果了吧，有点像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文件。用你喜欢的编辑器写以下的代码

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->

这里是引入jquery.js文件，我上面已经提过原来的压缩包是没有的，下载以后复制进去即可。 以下是一些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); } -->大家可以根据自己的要求改下面的这些代码，只要结构按照html语言里的列表结构即可。

• Item 1
  • Item 1.1
• Item 2 (如果CLASS指定了closed,那么他默认是关闭的)
  • Item 2.1
    • Item 2.1.1
    • Item 2.1.2
  • Item 2.2
• Item 3