我的小图标全部在放在同一个.png中,这样请求只需要请求一次就好(图片精灵)
引入jquery的JS与css
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" target="_blank" rel="external nofollow" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js">
html代码:
<div>
<ul id="ztreeid" class="ztree"></ul>
</div>
js代码
$(document).ready(function(){
$.fn.zTree.init($("#ztreeid"), setting, nodes);
});
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var nodes =[
//使用iconSkin定义icon1为自定义节点 样式
//pid表示它的父节点的id为多少,也可以在父节点中使用children属性对象来包含子节点
{ id:2, pId:0, name:"展开、折叠 自定义图标相同", open:true, iconSkin:"icon1"},
{ id:21, pId:2, name:"叶子节点1"},
{ id:22, pId:2, name:"叶子节点2"},
{ id:23, pId:2, name:"叶子节点3", iconSkin:"ly"},
{ id:3, pId:0, name:"不使用自定义图标", open:true },
{ id:31, pId:3, name:"叶子节点1"},
{ id:32, pId:3, name:"叶子节点2"},
{ id:33, pId:3, name:"叶子节点3"}
];
css样式:ly的iconSkin一样的设定
//因为我的图标全部放在一张图片中,所以需要background-position进行定位
//根节点打开的样式图标 open
.ztree li span.button.icon1_ico_open{margin-right:2px; background:url(../css/img/diy/8.png) no-repeat;background-position:-458px -145px}
//根节点关闭的样式图标 close
.ztree li span.button.icon1_ico_close{margin-right:2px; background: url(../css/img/diy/8.png) no-repeat;background-position:-300px -145px}
//子节点开的样式图标 docu
.ztree li span.button.icon1_ico_docu{margin-right:2px; background:url(../css/img/diy/8.png) no-repeat;background-position:-214px -100px}
如果你不清楚小图标如何定位,可以通过使用画图工具打开需要截图的图片,自己看需要定位的图标的左上角的坐标显示在画图工具的左下角的xy中,定位值一定要加 - 符号