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中，定位值一定要加 -  符号