天天看点

ztree 自定义节点样式图标

我的小图标全部在放在同一个.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中,定位值一定要加 -  符号