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

siberiawolf 发布于2019-08-19 18:44 / 1629人阅读

摘要：由于工作需要，这里只是把组合功能中样式的左侧菜单参考源码实现了，分享给大家我的学习所得。代码的配置注意在的配置利用回调将展开按钮转移到标签内，否则展开按钮即小箭头图片无法显示。

简介

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

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

Html和CSS

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

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




    
    zTreeStyleDemo-outlookStyle

注：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 = "";
                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为

，这样，小箭头按钮就一直显示啦。
引入demo文件时，样式如下：

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

私有云专线服务左侧菜单 asp左侧菜单 asp 左侧菜单 dede后台左侧菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79927.html

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

摘要：由于工作需要，这里只是把组合功能中样式的左侧菜单参考源码实现了，分享给大家我的学习所得。代码的配置注意在的配置利用回调将展开按钮转移到标签内，否则展开按钮即小箭头图片无法显示。简介为了让朋友们更容易的学习 zTree，官网给出了大量的 Demo，不同的图标，不同的风格，好学易懂，这是官网链接：zTree v3.5 Demo 演示。由于工作需要，这里只是把组合功能中OutLook ...

dingda 2019-08-05 17:50 评论0 收藏0
fsLayuiPlugin树+数据表格使用

摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。特殊说明和需要在数据表格基础上多引入的文件。 fsLayuiPlugin 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载码云下载测试环境地址：http://...

sixgo 2019-08-01 18:15 评论0 收藏0
fsLayuiPlugin树+数据表格使用

摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。特殊说明和需要在数据表格基础上多引入的文件。 fsLayuiPlugin 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载码云下载测试环境地址：http://...

gnehc 2019-08-21 18:19 评论0 收藏0
iOS开发UI篇--一个侧滑菜单SlidingMenu

摘要：侧滑菜单因和为开发者熟知，国内目前也有很多流行用到了侧滑菜单，比如网易邮箱知乎等等。四下载地址下载地址这是一个我的交流群，群文件自行下载，不管你是小白还是大牛热烈欢迎进群，分享面试经验，讨论技术，大家一起交流学习成长希望帮助开发者少走弯路。一、简介侧滑菜单已经成为app一个极常用的设计，不管是事务类，效率类还是生活类app。侧滑菜单因Path 2.0和Facebook为开发者熟知，...

myeveryheart 2019-06-25 17:02 评论0 收藏0
zTree -- jQuery 树插件使用方法与例子

摘要：简介是一个依靠实现的多功能树插件。使用说明下载文件将需要使用的相关的文件分别放置到相应目录，并且保证相对路径正确。页面分别在和中引入文件，如代码所示。设置是否显示节点的图标。简介 zTree 是一个依靠 jQuery 实现的多功能树插件。网址：http://www.ztree.me/v3/main.p... 上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指...

hightopo 2019-08-19 17:44 评论0 收藏0