简介

为了让朋友们更容易的学习 zTree，官网给出了大量的 Demo，不同的图标，不同的风格，好学易懂，这是官网链接：zTree v3.5 Demo 演示。

由于工作需要，这里只是把组合功能中OutLook 样式的左侧菜单参考Demo源码实现了，分享给大家我的学习所得。

Html和CSS

下载zTree v3.5 Demo 演示的源码，将下图所示的文件整合出来，并创建一个outlookStyle.css文件，便于使用，如图：

再创建任意一个html文件，引入以上的所需文件，html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zTreeStyleDemo-outlookStyle</title>
    <!--<link rel="stylesheet" href="zTreeStyle/demo.css" type="text/css">-->
    <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="zTreeStyle/outlookStyle.css" type="text/css">
</head>
<body>
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
  <script type="text/javascript" src='js/jquery-2.0.2.min.js'></script>
  <script src="zTreeStyle/jquery.ztree.core.js"></script>
</html>

注：demo.css可有可无，之后会结合图片说明。

js代码

ztree的setting 配置

注意：在ztree的setting 配置利用 addDiyDom 回调将展开按钮转移到a标签内，否则展开按钮（即小箭头图片）无法显示。

       var setting = {
            view: {
                showLine: false,
                showIcon: false,
                selectedMulti: false,
                dblClickExpand: false,
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"Folders", open:true},
            { id:11, pId:1, name:"Inbox"},
            { id:111, pId:11, name:"Inbox1"},
            { id:112, pId:111, name:"Inbox2"},
            { id:113, pId:112, name:"Inbox3"},
            { id:114, pId:113, name:"Inbox4"},
            { id:12, pId:1, name:"Junk"},
            { id:13, pId:1, name:"Drafts"},
            { id:14, pId:1, name:"Sent"},
            { id:15, pId:1, name:"Deleted"},
            { id:3, pId:0, name:"Quick views"},
            { id:31, pId:3, name:"Documents"},
            { id:32, pId:3, name:"Photos"}
        ];

        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            icoObj.before(switchObj);

            if (treeNode.level > 1) {
                var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
                switchObj.before(spaceStr);
            }
        }

        function beforeClick(treeId, treeNode) {
            if (treeNode.level == 0 ) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.expandNode(treeNode);
                return false;
            }
            return true;
        }

鼠标滑过时展开按钮的隐藏、显示

js代码如下：

$(document).ready(function(){
            var treeObj = $("#treeDemo");
            $.fn.zTree.init(treeObj, setting, zNodes);

            //这三句根据需要写，我工作中不需要，所以删掉了
            // zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
            // curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
            // zTree_Menu.selectNode(curMenu);

            treeObj.hover(function () {
            if (!treeObj.hasClass("showIcon")) {
                    treeObj.addClass("showIcon");
                }
             }, function() {
                treeObj.removeClass("showIcon");
             });
        });

OutLook 样式的左侧菜单效果图

最后实现的效果就是页面打开时如下图所示：

当鼠标滑过时展开按钮显示出来，点击展开按钮，层层展开，如图：

如果，不喜欢鼠标滑过显示，不滑过的时候不显示，可以去掉$(document).ready(function(){});中的treeObj.hover这段，修改html的ul为<ul id="treeDemo" class="ztree showIcon"></ul>，这样，小箭头按钮就一直显示啦。
引入demo文件时，样式如下：

不过，demo.css里有太多用不到的css,你可以把其中给这个ztree加边框的css类拿出来用即可。

zTree

zTree v3.5 Demo 演示 OutLook 样式的左侧菜单

简介

Html和CSS

js代码

ztree的setting 配置

鼠标滑过时展开按钮的隐藏、显示

OutLook 样式的左侧菜单效果图

ztree相关系列文章

zTree

zTree v3.5 Demo 演示 OutLook 样式的左侧菜单

简介

Html和CSS

js代码

ztree的setting 配置

鼠标滑过时展开按钮的隐藏、显示

OutLook 样式的左侧菜单 效果图

ztree相关系列文章

OutLook 样式的左侧菜单效果图