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可以不显示。

下面给出源代码

$(function () {
	$("#toggle_dots, #toggle_icons").click(function () { 
		$("#demo1").jstree(this.value);
	});
	$("#set_theme1").click(function () { 
		$("#demo1").jstree("set_theme","apple");
	});
	$("#set_theme2").click(function () { 
		$("#demo1").jstree("set_theme","default");
	});
	$("#demo1").jstree({ 
		"themes" : {
			"theme" : "default",
			"dots" : false,
			"icons" : false
		},
		"plugins" : [ "themes", "html_data" ]
	});
});

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/yizhizouxiaqu/4226049


之theme_data.html

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