JSTREE插件简介（二）

1、themes plugin （jsTree的主题插件）

这个插件控制这jsTree的展示，如果没有这个插件，一个jsTree树结构就是一个有序的<ul>列表

属性：

theme：给树结构应用的样式，默认为default，可以更改这个设置，需要在themes文件夹下建立需要使用的主题，我在themes文件中增加了apple样式，可以完成演示。

url：定义主题的css文件位置。可以设置为String为具体的地址，或者为false，为false时在< theme folder >/themes/< theme name >/style.css这个位置查找。

dots：定义是否显示树结构周围的线，如下图所示




如上图红框圈中的点，默认为true，即显示这些点，可以设置为false不显示这些点。

icons：定义是否显示树结构前面的图标，默认为true，即显示图标，改为false可以不显示。

下面给出源代码

[javascript]  view plain copy

1. $(function () {  
2.     $("#toggle_dots, #toggle_icons").click(function () {   
3.         $("#demo1").jstree(this.value);  
4.     });  
5.     $("#set_theme1").click(function () {   
6.         $("#demo1").jstree("set_theme","apple");  
7.     });  
8.     $("#set_theme2").click(function () {   
9.         $("#demo1").jstree("set_theme","default");  
10.     });  
11.     $("#demo1").jstree({   
12.         "themes" : {  
13.             "theme" : "default",  
14.             "dots" : false,  
15.             "icons" : false  
16.         },  
17.         "plugins" : [ "themes", "html_data" ]  
18.     });  
19. });  

jsTree还提供几个api来设置主题的行为

.set_theme(name, url)：设置主题

.get_theme()：取得当前激活即使用的主题

.show_dots(),.hide_dots(),.toggle_dots()：显示、隐藏、激活树边框的点

.show_icons(),.hide_icons(),.toggle_icons()：显示、隐藏、激活树的图标




本文详细代码见:

http://download.csdn.net/detail/xiaolinye3319/6241431


之theme_data.html

原英文地址为：http://www.jstree.com/documentation/themes