layui框架的简单使用
layui笔记，详细去官网看文档
layui框架
1.使用
去官网下载文件，利用layui自己生成的css和js来使用
-
引入layui.css
<link rel="stylesheet" href="./layui/css/layui.css">
-
引入layui.js
<script src="./layui/layui.js">
2.选项卡
导肮菜单可用于头部和侧边，tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。
选项卡依赖加载组件：element(注意：必须加载element模块，相关功能才能正常使用)
2.1 layui.use()当时加载模块入口
-
layui.use(参数1，参数2)，参数1模块名，如果引入多个模块需要用"[]"来套入，例如：["jquery","element"]；参数2回调函数,
layui.use(["element", "jquery"], function() {
// jquery也被内置到layui中当作一个模块，导入模块即可使用
var element = layui.element;
var $ = layui.jquery;
})
2.2 选项卡的删除
tab选项里卡简洁风格：
<div class="layui-tab layui-tab-brief " lay-allowClose="true" lay-filter="binge"> <ul class="layui-tab-title"> <li class="layui-this" lay-id="网站设置">网站设置</li> <li lay-id="用户管理">用户管理</li> <li lay-id="权限分配">权限分配</li> <li lay-id="商品管理">商品管理</li> <li lay-id="订单管理">订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div> </div>
-
通过追加class：layui-tab-brief 来设定简洁风格
-
lay-allowClose="true" 来允许Tab选项卡被删除 ，添加到tab选项卡的父元素中
-
lay-filter="任意字符"，事件过滤器(公用属性),跟选择器比较类似的。
2.3 id焦点定位
主要通过对选项卡设置属性 lay-id=”xxx"来作为唯一的匹配索引，以用于外部的定位切换。
-
element.on(filter,callback)：用于元素的一些事件触发，回调函数的参数data可以获取点击标签的标签内容
-
element.tabAdd(filter,options)：用于新增的一个Tab选项， 参数filter：tab元素的 lay-filter="value" 过滤器的值（value）
-
element.tabChange(filter, layid);： 用于外部切换到指定的Tab项上，参数同上，如： element.tabChange('demo', 'layid'); 切换选项卡，切换到 lay-id="yyy" 的这一项
<div class="layui-tab layui-tab-brief " lay-allowClose="true" lay-filter="binge">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="网站设置">网站设置</li>
<li lay-id="用户管理">用户管理</li>
<li lay-id="权限分配">权限分配</li>
<li lay-id="商品管理">商品管理</li>
<li lay-id="订单管理">订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<!-- 左侧导航 -->
<ul>
<li><button>网站设置</button></li>
<li><button>用户管理</button></li>
<li><button>权限分配</button></li>
<li><button>商品管理</button></li>
<li><button>订单管理</button></li>
</ul>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use(["element", "jquery"], function() {
// jquery也被内置到layui中当作一个模块，导入模块即可使用
var element = layui.element;
var $ = layui.jquery;
// 给binge这个选项卡绑定点击事件
element.on("tab(binge)", function(data) {
console.log(data.elem);
console.log("点击了binge选项卡", data.elem.context.innerText);
var title = data.elem.context.innerText;
// var btns = document.querySelectorAll("li button");
// btns[data.index].style.backgroundColor = 'red';
var btn = $("li button").toArray().find(function(item) {
return item.innerText == title
});
// 标记这个按钮
$(btn)
.css("color", "red")
.parent()
.siblings()
.children()
.css("color", "black")
})
// 点击按钮,切换选项卡
$("li button").each(function(index, btn) {
btn.onclick = function() {
// 判断选项卡有没有这一页，
var bool = $(".layui-tab-title li").toArray().some(function(tab) {
return tab.getAttribute("lay-id") == btn.innerText
});
// 如果有这一页，就切换选项卡
if (bool) {
// 切换选项卡
element.tabChange("binge", btn.innerText);
} else {
console.log("创建");
element.tabAdd("binge", {
title: btn.innerText,
content: btn.innerText + "内容",
id: btn.innerText
});
// 创建这一页之后，还要自动切过来
element.tabChange("binge", btn.innerText)
}
$(btn)
.css("color", "red")
.parent()
.siblings()
.children()
.css("color", "black")
}
})
})
3.表单
-
required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 ,也就是输入框为空，提示不能为空
-
autocomplete="off" ：是否自动补充，off为否
-
表单提交事件，依赖于form模块，所以提交之前必须加载form模块，并导入
-
form.on("submit(filter)",function(data){}) 表单数据被整理到data.field字段中，data.field是个对象，对象中存的是输入框所对应的name值作为对象的属性名，输入框输入的内容作为对象的属性值。
-
layui模块阻止表单的默认行为：return false，js原生阻止 ：e.preventDefault();
layui.use(["form", "jquery"], function() {
var form = layui.form;
var $ = layui.jquery;
form.on("submit(formDemo)", function(data) {
// 表单数据被整理到data.field字段中
//data.field是个对象，对象中存的是输入框所对应的name值当属性名，输入框的值为属性值
console.log("表单提交的数据是，", data.field);
// $.get("/login", function(data) {
// console.log(data);
// })
return false;
})
})
4.导航
-
导航需要依赖element模块，必须加载element模块
<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品<span class="layui-badge-dot"></span></a></li>
<li class="layui-nav-item"><a href="">大数据</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="">社区</a></li>
</ul>
<script>
layui.use("element", function() {
var element = layui.element;
})
</script>
-
垂直导航需要追加class：layui-nav-tree
-
侧边导航需要追加class：layui-nav-tree layui-nav-side
-
5.表格
-
lay-skin="属性值" ，默认为行和列都有线，line行有线，row列有线，nob没有线
5.1 使用table模块进行数据交互
-
需要先加载table模块，然后再进行数据交互。在页面放置一个元素 <table id="demo"></table> ，然后通过 table.render() 方法指定该容器
-
table.render({})中的属性：
-
elem:指定原始table容器的选择器或DOM，方法渲染方式必填
-
cols：设置表头。值是一个二维数组。
-
url：数据接口
-
page：true 开启分页
-
limit：每页显示的条数（默认10）.值需对应limits参数的选项
-
layui.use("table", function() {
var table = layui.table;
// 动态渲染表格的内容，然后通过table.render()方法指定该容器
table.render({
elem: "#demo",
height: 300,
url: "./table.json",
page: true,
cols: [
[{
field: "name",
title: "姓名"
}, {
field: "age",
title: "年龄"
}, {
field: "sex",
title: "性别"
}, {
field: "phone",
title: "电话"
}, ]
]
})
})
cols表头信息：
-
field(String)：设定字段名
-
title(String)：设定标题名称
-
sort：true：排序
cols: [
[{
field: "name",
title: "姓名"
}, {
field: "age",
title: "年龄"
}, {
field: "sex",
title: "性别"
}, {
field: "phone",
title: "电话"
}, ]
]
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)