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

简介

为了让朋友们更容易的学习 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类拿出来用即可。