Layui tree 下拉菜单树的实例代码


Posted in Javascript onSeptember 21, 2019

1.效果:

Layui tree 下拉菜单树的实例代码

2.html 代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" media="all">
 <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
 <style type="text/css">
 .downpanel .layui-select-title span {
  line-height: 38px;
 }

 /*继承父类颜色*/
 .downpanel dl dd:hover {
  background-color: inherit;
 }
 </style>
 <style type="text/css">
 body {
  height: 100%;
  width: 100%;
  background-size: cover;
  margin: 0 auto;
 }
 td {
  font-size: 12px !important;
 }

 .layui-form-checkbox span {
  height: 30px;
 }
 .layui-field-title {
  border-top: 1px solid white;
 }
 table {
  width: 100% !important;
 }

 </style>

</head>
<body>
<form class="layui-form">
 <div class="layui-form-item">
 <label class="layui-form-label">文章栏目</label>
 <div class="layui-input-inline">
  <div class="layui-unselect layui-form-select downpanel">
  <div class="layui-select-title">
   <span class="layui-input layui-unselect" id="treeclass">选择栏目</span>
   <input type="hidden" name="selectID" value="0">
   <i class="layui-edge"></i>
  </div>
  <dl class="layui-anim layui-anim-upbit">
   <dd>
   <ul id="classtree"></ul>
   </dd>
  </dl>
  </div>
 </div>
 </div>
</form>


<script src="static/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script type="text/javascript">
 layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {
 var $ = layui.jquery, tree = layui.tree;
 tree({
  elem: "#classtree"
  ,
  nodes: [{
  name: '常用文件夹',
  id: 1,
  alias: 'changyong',
  children: [{name: '所有未读', id: 11, href: 'http://www.layui.com/', alias: 'weidu'}, {
   name: '置顶邮件',
   id: 12
  }, {name: '标签邮件', id: 13}]
  }, {
  name: '我的邮箱',
  id: 2,
  spread: true,
  children: [{
   name: 'QQ邮箱',
   id: 21,
   spread: true,
   children: [{
   name: '收件箱',
   id: 211,
   children: [{name: '所有未读', id: 2111}, {name: '置顶邮件', id: 2112}, {name: '标签邮件', id: 2113}]
   }, {name: '已发出的邮件', id: 212}, {name: '垃圾邮件', id: 213}]
  }, {
   name: '阿里云邮',
   id: 22,
   children: [{name: '收件箱', id: 221}, {name: '已发出的邮件', id: 222}, {name: '垃圾邮件', id: 223}]
  }]
  }]
  ,
  click: function (node) {
  var $select = $($(this)[0].elem).parents(".layui-form-select");
  $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);
  }
 });
 $(".downpanel").on("click", ".layui-select-title", function (e) {
  $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
  $(this).parents(".downpanel").toggleClass("layui-form-selected");
  layui.stope(e);
 }).on("click", "dl i", function (e) {
  layui.stope(e);
 });
 $(document).on("click", function (e) {
  $(".layui-form-select").removeClass("layui-form-selected");
 });

 });
</script>
</body>
</html>
</body>
</html>

以上这篇Layui tree 下拉菜单树的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 #Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 #Javascript
layui table 表格模板按钮的实例代码
Sep 21 #Javascript
js实现图片3D轮播效果
Sep 21 #Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 #Javascript
原生js实现3D轮播图
Mar 21 #Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 #Javascript
You might like
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python实现获取网站PR及百度权重
2015/01/21 Python
Python检测网站链接是否已存在
2016/04/07 Python
python3中zip()函数使用详解
2018/06/29 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
python实现简易动态时钟
2018/11/19 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
会计毕业生自荐信
2013/11/21 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
公司前台辞职报告
2014/01/19 职场文书
森林防火宣传标语
2014/06/27 职场文书
语文教师求职信范文
2015/03/20 职场文书
暖春观后感
2015/06/08 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
python实现简单的聊天小程序
2021/07/07 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python