javascript jquery ajax 国产前端框架LayUI使用教程

第十三章 LayUI

官方文档https://www.layui.com/doc

1.杂七杂八知识点

使用LayUI需要引LayUI的源码，之后在引入layui.css以及layui.js

属性参数含义name=“viewport”屏幕可视区域contentwidth可视区域的宽度，值可为数字或关键词device-width 表示设备的理想宽度height同widthintial-scale页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放maximum-scale=1.0, minimum-scale=1.0可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。user-scalable是否可对页面进行缩放，no 禁止缩放 或者填写 0 同样表示禁止缩放

移除链接多余动作

想要在子页面让父页面关闭子页面需要使提交事件return false

1.加载layui组件

注意：如果中括号内的组件书写错误，或报错404，点击之后就能看到哪个组件写错了

/*

* layui.use(['被调用的组件1','被调用的组件2','被调用的组件N'],function(){

*

* });

*

* layui.use([]);

*

* layui.use(['XXX'],function(){

* XXX

* });

* */

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

let layer = layui.layer;

let form = layui.form;

//layer.msg("你好世界~");

//layer.alert('HelloWorld~');

layer.confirm('你要给世界打个招呼吗？');

});

/*layui.use(['layer', 'form'], function(){

let layer = layui.layer

,form = layui.form;

var $ = layui.$ //表示启用内置的jQuery

layer.msg('Hello World');

});*/

注意：模板字符串与jsp中的EL表达式冲突，需要在模板字符串的 $ 前边加一个 \

`name=\${name}`

2.同步查重

友情提示巨坑

必须使用同步请求 async:false传值用value data: tel=\${value}在外部书写错误提示信息表单提交需要 return false;

异步不出success函数，所以才需要在外边调用

表单被禁止提交之后可以使用 $(location).attr(‘href’,url)的方式进行跳转

2. 布局

采用 layui-row 来定义行，如：

采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记（可选值见下文）变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

1.常规桌面

以PC中型桌面

将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。为例还可以不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应

注意：layui-container的默认宽度是1140px

2.设置列间距

layui-col-space1列间距为1px

此外还有 3 5 8 10 12 15 18 20 22 28 30

3.栅格嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。

4. 兼容性

以下代码黏贴到ie8 9 的body标签内可以兼容layui的栅格

3.图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。

其他图标详见https://www.layui.com/doc/element/icon.html

4.动画和按钮

1. 动画

参数样式layui-anim-up从最底部往上滑入layui-anim-upbit微微往上滑入layui-anim-scale平滑放大layui-anim-scaleSpring弹簧式放大layui-anim-fadein渐现layui-anim-fadeout渐隐layui-anim-rotate360度旋转layui-anim-loop循环动画

2. 按钮

样式含义layui-btn声明为layui的按钮，默认绿色layui-btn-primary默认样式layui-btn-lg大按钮layui-btn-radius圆角按钮layui-btn-group按钮组

我是一个按钮呀

添加

5.表单

表单的样式为layui-form表单中的子元素为layui-form-item需要在script中启用组件layui.use(‘form’,function(){})在表单中书写的标签的事件需要书写在form.on(事件(监听器),function)中表单中的验证规则书写在form.verify({})中

1.label

标签

2.input

其中lay-filter为监听器，lay-verify是验证规则，layui自带的验证规则有required(必填)、email(邮箱)、phone(三大运营商的手机号)、url(网址)、number(数字)、date(日期)、identity(身份证),多个验证规则用 | 隔开,也可以书写自己的验证规则

输入框

自定义验证规则书写注意规范

范围

下拉列表框

多选框

title 任意字符 设定元素名称，一般用于checkbox、radio框，lay-skin switch（开关风格） primary（原始风格） 定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式，lay-ignore 任意字符或不设值 是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格

lay-filter 任意字符 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。

特殊复选框

开开或者关上的值是自己设置的而不是 true false

单选框

获取单选按钮的值

文本域

提交

监听提交

form.on('submit(formDemo)', function(data){

layer.msg(JSON.stringify(data.field));

return false;

});

3.监听事件

监听提交 layui.use(['form','layer'], function(){

let form = layui.form

,layer = layui.layer;

//监听提交

form.on('submit(formDemo)', function(data){

layer.msg(JSON.stringify(data.field));

return false;

});

})

验证规则

form.verify({

etoak:function(value,item){

console.log(item)

if(value.length<4||value.length>8){

return "用户密码必须在4到8位之间";

}

}

});

//可以使用正则表达式

type:[/[A-Za-z0-9_]/,'用户名只能使用大小写字母以及下划线_']

下拉列表框

form.on("select(et)",function(data){

console.log(data.value);

/*form.on('select(filter)', function(data){

console.log(data.elem); //得到select原始DOM对象

console.log(data.value); //得到被选中的值

console.log(data.othis); //得到美化后的DOM对象

});*/

});

多选框

form.on('checkbox(filter)', function(data){

console.log(data.elem); //得到checkbox原始DOM对象

console.log(data.elem.checked); //是否被选中，true或者false

console.log(data.value); //复选框value值，也可以通过data.elem.value得到

console.log(data.othis); //得到美化后的DOM对象

});

switch特殊复选框

form.on("switch(myswitch)",function(data){

/*console.log(data.elem); //得到checkbox原始DOM对象

console.log(data.elem.checked); //开关是否开启，true或者false

console.log(data.value); //开关value值，也可以通过data.elem.value得到

console.log(data.othis); //得到美化后的DOM对象*/

/*

* layer.tips('显示的信息',在哪个对象处显示);

* */

layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF',data.othis);

if(data.elem.checked==true){

console.log("开开啦！！");

//通过设置value值从而在表单提交时提交value数据

data.elem.value="我是switch呀！！！";

}else{

console.log("关闭啦！！");

console.log(data.elem.value);

}

});

单选框

form.on('radio(filter)', function(data){

console.log(data.elem); //得到radio原始DOM对象

console.log(data.value); //被点击的radio的value值

});

提交

form.on('submit(myFormSub)',function(data){

console.log(data.field);

/*console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象

console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回

console.log(data.field) //当前容器的全部表单字段，键值对形式：{name: value}

return false; //阻止表单提交，action目的地失效。如果需要表单提交，去掉这段即可。*/

/*

String~~~~>js对象

* JSON.parse()

*

* js对象~~~~~>String

* JSON.stringify()

*

*

* */

layer.alert(JSON.stringify(data.field), {

title: '最终的提交信息'

});

return false;

});

表单初始赋值

//表单初始赋值

//myFormSub 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值

/*form.val('myForm', {

"name":"易途科技" // "name": "value"

,"password":"123456"

,"price_min":100

,"price_max":200

,"city":"1"

,"quiz":"你工作的第一个城市"

,"like[write]":true //复选框选中状态

,"weibo":"测试"

});*/

6.导航栏

layui-bg-cyan（藏青）

layui-bg-molv（墨绿）

layui-bg-green （墨绿）

layui-bg-blue（艳蓝）

layui-bg-orange （橙色）

导航栏需要启用element组件

1.水平导航

• 最新活动
• 产品
• 大数据

• 解决方案

  移动模块

  后台模版

  电商平台

• 社区

带有其他元素的导航栏

• 控制台9

• 个人中心

• Joshua

  修改信息

  安全管理

  退了

2.垂直导航

• 默认展开

  选项1

  选项2

  跳转

• 解决方案

  移动模块

  后台模版

  电商平台

• 产品
• 大数据

3.侧边导航

4.面包屑

首页

国际新闻

亚太地区

正文

首页

国际新闻

亚太地区

正文

娱乐

八卦

体育

搞笑

视频

游戏

综艺

7.选项卡

8.表格

9.轮播图

10拓展，原生js版折扣系统

用户名

筹办日期

预算金额

2w

5w

10w

选择优惠

不使用优惠

优惠后金额

11.给表格添加工具栏

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--

步骤1:拿取查询的动态表格，存在分页 排序 导出等功能，没有

查看 编辑 删除功能

步骤2:组装最右侧的工具栏模块，实现 查看 编辑 删除功能

步骤3:添加操作

步骤4:模糊查询

--%>

<%--

注意不要使用jQuery3.4.1版本的类库文件

--%>

侧边工具栏获取数据与事件获取的数据不同

相关阅读

 您阅读本篇文章共花了：