zTree v3.5 Demo 演示 OutLook 樣式的左側菜單

時間 2019-11-09

標籤 ztree v3.5 demo 演示 outlook 樣式左側菜單欄目 Microsoft 简体版

原文原文鏈接

簡介

爲了讓朋友們更容易的學習 zTree，官網給出了大量的 Demo，不一樣的圖標，不一樣的風格，好學易懂，這是官網連接：zTree v3.5 Demo 演示。javascript

因爲工做須要，這裏只是把組合功能中OutLook 樣式的左側菜單參考Demo源碼實現了，分享給你們個人學習所得。php

Html和CSS

下載zTree v3.5 Demo 演示的源碼，將下圖所示的文件整合出來，並建立一個outlookStyle.css文件，便於使用，如圖：

再建立任意一個html文件，引入以上的所需文件，html代碼以下：css

<!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無關緊要，以後會結合圖片說明。html

js代碼

ztree的setting 配置

注意：在ztree的setting 配置利用 addDiyDom 回調將展開按鈕轉移到a標籤內，不然展開按鈕（即小箭頭圖片）沒法顯示。java

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代碼以下：jquery

$(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類拿出來用便可。學習