layui页面元素使用入门

最新推荐文章于 2023-07-12 21:47:10 发布

@Malachi

最新推荐文章于 2023-07-12 21:47:10 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/taiyangwojiu/article/details/103569262

版权

<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">主页</a></li>
    <li class="layui-nav-item layui-this"><a href="">购物车</a></li>
    <li class="layui-nav-item"><a href="">喜欢的宝贝<span class="layui-badge">13</span></a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">个人信息</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="">账号信息</a></dd>
            <dd><a href="">支付信息</a></dd>
            <dd><a href="">收货地址</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="index.html">社区<span class="layui-badge-dot"></span></a></li>
</ul>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

通过对导航追加CSS背景类，让导航呈现不同的主题色,如下所示

背景样式	效果图
`<ul class="layui-nav layui-bg-cyan" lay-filter="">`
`<ul class="layui-nav layui-bg-blue" lay-filter="">`
`<ul class="layui-nav layui-bg-green" lay-filter="">`

垂直/侧边导航栏

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

导航可选属性

属性名	可选值	说明
lay-shrink	- 空值 (默认):不收缩兄弟菜单子菜单　　　　　　　 - all:收缩全部兄弟菜单子菜单	展开子菜单时，是否收缩兄弟节点已展开的子菜单 (注：layui 2.2.6 开始新增）体现效果在侧边/垂直导航栏中可显示
lay-unselect	- 无需填值	鼠标点击无选中效果（注：layui 2.2.0 开始新增）无效控件

面包屑

效果图:
在这里插入图片描述

<span class="layui-breadcrumb">
<!--注:可以设置属性 lay-separator="-" 来自定义分隔符样式-->
  <a href="">首页</a>
  <a href="">我的空间</a>
  <a href="">好友动态</a>
  <a><cite>正文</cite></a>
</span>

常用元素操作 - layui.element

使用

element介绍:
元素功能的开启只需要加载element模块即会自动完成。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。

layui.use('element', function(){
  var element = layui.element;
  //事件监听
  element.on('tab(过滤器属性值)', function(data){
  	//相应的操作
    console.log(data);
  });
});

预设元素属性

属性名	可选值	说明
lay-filter	- 任意值	事件过滤器（公用属性），主要用于事件的精确匹配，跟选择器是比较类似。
lay-allowClose	- true	针对于Tab容器，是否允许选项卡关闭。默认不允许，即不用设置该属性
lay-separator	- 任意分隔符	针对于面包屑容器

基础方法

方法名	描述
var element = layui.element;	element模块的实例,返回的element变量为该实例的对象，携带一些用于元素操作的基础方法
element.on(filter, callback);	用于元素的一些事件监听
element.tabAdd(filter, options);	用于新增一个Tab选项 -参数filter：tab元素的 lay-filter=“value” 过滤器的值（value） - 参数options：设定可选值的对象，目前支持的选项如下述示例：
element.tabDelete(filter, layid);	用于删除指定的Tab选项 -参数filter：tab元素的 lay-filter=“value” 过滤器的值（value） -参数layid：选项卡标题列表的属性 lay-id 的值`element.tabDelete('过滤器属性值', 'xxx'); //删除 lay-id="xxx" 的这一项`
element.tabChange(filter, layid);	用于外部切换到指定的Tab项上如:`element.tabChange('demo', 'layid'); //切换到 lay-id="layid" 的这一项`
element.progress(filter, percent);	用于动态改变进度条百分比： `element.progress('demo', '30%');`
element.tab(options);	用于绑定自定义 Tab 元素（即非 layui 自带的 tab 结构）。该方法为 layui 2.1.6 新增参数options：设定可选值的对象，目前支持的选项如下述示例：

初始化动态元素

更新渲染

跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。注意：2.1.6 开始，可以用 element.render(type, filter);方法替代
使用说明:
第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：
第二个参数：filter，为元素的 lay-filter="" 的值。可以借助该参数，完成指定元素的局部更新。

参数（type）值	描述
tab	重新对tab选项卡进行初始化渲染
nav	重新对面包屑进行渲染
breadcrumb	重新对面包屑进行渲染
progress	重新对进度条进行渲染
collapse	重新对折叠面板进行渲染

element.init(); //更新全部  2.1.6 可用 element.render() 方法替代
element.render('nav'); //重新对导航进行渲染。注：layui 2.1.6 版本新增
//比如当你对导航动态插入了二级菜单，这时你需要重新去对它进行渲染
element.render('nav', 'test'); //对 lay-filter="test" 所在导航重新渲染。注：layui 2.1.6 版本新增

事件监听

语法：element.on(‘event(过滤器值)’, callback);

element 模块在 layui 事件机制中注册了element 模块事件，所以当你使用 layui.onevent() 自定义模块事件时，请勿占用 element 名。目前 element 模块所支持的事件如下表：

event	描述
tab	监听Tab选项卡切换事件
tabDelete	监听Tab选项卡删除事件
nav	监听导航菜单的点击事件
collapse	监听折叠面板展开或收缩事件

默认情况下，事件所监听的是全部的元素，但如果你只想监听某一个元素，使用事件过滤器即可。
如：

<div class="layui-tab" lay-filter="test"></div>
<javascript>
	element.on('tab(test)', function(data){
  		console.log(data);
	});
</javascript>

监听Tab切换(选项卡)

Tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员：index(下标)、elem(容器)

element.on('tab(filter属性值)', function(data){
  console.log(this); //当前Tab标题所在的原始DOM元素
  console.log(data.index); //得到当前Tab的所在下标
  console.log(data.elem); //得到当前的Tab大容器
});

监听Tab删除(选项卡)

注：该事件为 layui 2.1.6 新增
Tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员：

element.on('tabDelete(filter属性值)', function(data){
  console.log(this); //当前Tab标题所在的原始DOM元素
  console.log(data.index); //得到当前Tab的所在下标
  console.log(data.elem); //得到当前的Tab大容器
});

监听导航点击

当点击导航父级菜单和二级菜单时触发，回调函数返回所点击的菜单DOM对象：

element.on('nav(filter属性值)', function(elem){
  console.log(elem); //得到当前点击的DOM对象
});

监听折叠面板

当折叠面板点击展开或收缩时触发，回调函数返回一个object参数，携带三个成员：
show（获取当前面板的展开状态：true、false）、
title（标题区域DOM对象）、
content（内容区域DOM对象）

element.on('collapse(filter属性值)', function(data){
  console.log(data.show); //得到当前面板的展开状态，true或者false
  console.log(data.title); //得到当前点击面板的标题区域DOM对象
  console.log(data.content); //得到当前点击面板的内容区域DOM对象
});

操作进度条

element模块提供动态操作进度条的方法：element.progress(filter, percent);。

<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
  <div class="layui-progress-bar" lay-percent="0%"></div>
</div>