|
Jstree 是一款jquery的插件，专门用来做树状结构的很好用的js。简单方便，有记忆功能 ，不会因为你的跳转到新的页面就丢失当前栏目的状态，还可以定义主题样式。
下面介绍的是我们用jstree来做网站的产品目录。
1、效果如图：
这是apple主题的jstree，采用了ajax动态加载数据。 网站地址： http://www.kn11.cn/ 2、实现方法： 下载jstree最新版本： jstree官网地址：http://www.jstree.com/ 然后引用脚本 <script type="text/javascript" src="jstree/_lib/jquery.js"></script> <script type="text/javascript" src="jstree/_lib/jquery.cookie.js"></script> <script type="text/javascript" src="jstree/_lib/jquery.cookie.js"></script> <script type="text/javascript" src="jstree/_lib/jquery.hotkeys.js"></script> <script type="text/javascript" src="jstree/jquery.jstree.js"></script>
脚本引用完毕，接着便是你要写的脚本了. <script type="text/javascript" > $(function () { $("#demo") .bind("before.jstree", function (e, data) { $("#alog").append(data.func + "<br />"); }) .jstree({ // List of active plugins "plugins": [ "themes", "json_data", "crrm", "cookies", "dnd", "search", "types" ], "themes" : { "theme": "apple", "icons":false }, // I usually configure the plugin that handles the data first // This example uses JSON as it is most common "json_data": { // This tree is ajax enabled - as this is most common, and maybe a bit more complex // All the options are almost the same as jQuery\'s AJAX (read the docs) "ajax": { // the URL to fetch the data "url": "json.aspx", // the `data` function is executed in the instance\'s scope // the parameter is the node being loaded // (may be -1, 0, or undefined when loading the root nodes) "data": function (n) { // the result is fed to the AJAX request `data` option return { "operation": "get_children", "id": n.attr ? n.attr("id").replace("node_", "") : 0 }; } } }, }) }); </script> 当然这边还要编写 json.aspx页面，根据传入的id值获取下级栏目的数据，我这里用了josn数据格式，当然你也可以用xml等其他的。 这样就完成了树状产品目录的菜单了，怎么样简单吧！
当然jstree的功能远远不只这些。要深入了解的朋友到官网看看他们的文档和demo，相信会有帮助的！
|
相关文章：