2019独角兽企业重金招聘Python工程师标准>>>

1、Layui导航树美化

1.1、引入美化的CSS(自定义)

/*左侧导航使用方法：skin: 'sidebar' */

.layui-tree-skin-sidebar li i{

color: rgba(255,255,255,.7);

display: none;

}

.layui-tree-skin-sidebar li a cite{

color: rgba(255,255,255,.7)

}

.layui-tree-skin-sidebar li .layui-tree-spread{

display: block;

position: absolute;

right: 30px;

}

.layui-tree-skin-sidebar li{

line-height: 45px;

position: relative;

}

.layui-tree-skin-sidebar li ul{

margin-left: 0;

background: rgba(0,0,0,.3);

}

.layui-tree-skin-sidebar li ul a{

padding-left: 20px;

}

.layui-tree-skin-sidebar li a{

height: 45px;

border-left: 5px solid transparent;

box-sizing: border-box;

width: 100%;

}

.layui-tree-skin-sidebar li a:hover{

background: #4E5465;

color: #fff;

border-left: 5px solid #009688;

}

.layui-tree-skin-sidebar li a.active{

background: #009688;

}

1.2、添加JS代码

(1) 添加自定义皮肤声明

图 1 添加自定义皮肤声明

(2) 添加选中颜色显示

图 2 添加选中颜色显示

layui.use(['element', 'tree', 'layer'], function() {

var layer = layui.layer,

$ = layui.jquery;

var element = layui.element;

var jsonStr;

var url = "r?wf_num=T_bhlayui_001";

//添加选中颜色显示

$("body").on("mousedown", ".layui-tree a", function() {

if(!$(this).siblings('ul').length) {

$(".layui-tree a").removeClass('active');

$(this).find('cite').parent().addClass('active');

}

});

$.post(url, "", function(data) {

jsonStr = eval('(' + data + ')');

console.log(data);

layui.tree({

elem: '#demo1', //指定元素

skin: 'sidebar', //自定义皮肤

target: '_blank', //是否新选项卡打开（比如节点返回href才有效）

click: function(node) { //点击节点回调

layer.msg('当前节名称：' + node.name + '<br>全部参数：' + JSON.stringify(node));

//console.log(node);

nodes: jsonStr

});

转载于:https://my.oschina.net/u/1791116/blog/1791336

Layui导航树美化相关推荐

【树链剖分】染色（luogu 2486/金牌导航树链剖分-3）
正题 luogu 2486 金牌导航树链剖分-3 题目大意给你一棵树,让你进行以下操作: 1.把一条路径染上一个颜色 2.查询一条路径上有多少个颜色段解题思路用树链剖分把问题转化为链上问题然 ...
【树链剖分】软件管理（luogu 2146/金牌导航树链剖分-2）
正题 luogu 2146 金牌导航树链剖分-2 题目大意有若干软件,除了软件0,所有软件都依赖且只依赖于另外一个软件当要删除一个软件时,所有依赖于该软件的软件都要删掉当安装一个软件时,该软件 ...
【树链剖分】【线段树】树的统计（金牌导航树链剖分-1）
树的统计金牌导航树链剖分-1 题目大意给出一棵树,让你做若干操作,操作如下: 1.修改一个节点的值 2.查询两个节点之间路径的最大值 3.查询两个节点之间路径的和输入样例 4 1 2 2 3 ...
网页导航树的简单快速美观之实现
导航树在Web应用中较为广泛.它能够向浏览者展示清晰.层次分明的信息组织结构形式,从而使浏览者较易从总体上把握信息架构.如图1所示: 图1 导航树目前讨论较多的导航树的实现,大多是编写JavaScr ...
泛微ecology 通过建模引擎导航树展示指定的知识目录展示文档应用场景
通过建模引擎导航树展示指定的知识目录展示文档应用场景实现的效果见下图: 第一部分:需求说明客户在系统使用过程中,针对公告信息想独立显示,公告目录下的文档信息,不需要从整个的知识库中区点击公告目录查 ...
layui文件树Dtree的使用
1.下载Dtree文件下载地址:https://fly.layui.com/extend/dtree/ 将文件解压后放到项目静态文件的位置 2.使用在页面分别引入dtree.css和dtreefo ...
layui导航栏鼠标经过青色条块怎么移到顶部？
layui导航栏鼠标经过青色条块怎么移到顶部? layui-nav-bar怎么移到导航栏的顶部? 青色条块其实就是在鼠标经过时会变成,所以,如果我们把top:111px变成top:0,青色条块就可以移 ...
在Emacs Prelude配置下安装neotree插件，实现文件导航树
适用人群: 我们这个插件的添加是Emacs Prelude配置环境下实现的,是针对已经在Emacs下安装了Prelude的用户. Prelude是一个针对emacs的一个配置: Prelude is ...
js html5 目录树,详解百度百科目录导航树小插件
说起来比较惭愧,在园子里混了4年,注册账号也有3年多了,一篇博客都没有写过,之前不写博客的原因是:1,觉得自己的水平弱爆了,不敢出来误人子弟,也怕大牛们笑话 2,太懒了,有时候自己搞一点小东西,搞的过 ...

Layui导航树美化

1、Layui导航树美化

1.1、引入美化的CSS(自定义)

1.2、添加JS代码

Layui导航树美化相关推荐

最新文章

热门文章