layui-开源模块化前端UI框架常用集合

html+div+css 6027 7 2022-03-01

layui常用集合

模块加载

方法一：//引用指定模块

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

var layer = layui.layer, laydate = layui.laydate;

//do something

});

方法二：//引用所有模块（layui 2.6 开始支持）

layui.use(function(){

var layer = layui.layer, laydate = layui.laydate, table = layui.table;

//do something

});

方法三：//通过回调的参数得到模块对象

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

layer.msg('test'); //使用 layer

laydate.render({}); //使用 laydate

table.render({}) //使用 table

});

常用模块：

字体大小

layui-font-12 （12px 的字体）

layui-font-14 （14px 的字体）

layui-font-16 （16px 的字体）

layui-font-18 （18px 的字体）

layui-font-20 （20px 的字体）

字体颜色

layui-font-red （红色字体）

layui-font-orange （橙色字体）

layui-font-green （绿色字体）

layui-font-cyan （青色字体）

layui-font-blue （蓝色字体）

layui-font-black （黑色字体）

layui-font-gray （灰色字体）

背景颜色

layui-bg-red （赤色）

layui-bg-orange （橙色）

layui-bg-green （墨绿色）

layui-bg-cyan （藏青色）

layui-bg-blue （蓝色）

layui-bg-black （经典黑色）

layui-bg-gray （经典灰色）

表单

表单元素：

单行样式：

</div>

带有辅助文字样式：

</div>

</div>

组装行样式：

</div>

</div>

</div>

文本框：

密码框：

选择框：

</select>

单选框：

复选框：

开关：

文本域：

提交和重置按钮

lay-verify内置的校验规则：

required（必填项）、phone（手机号）、email（邮箱）、url（网址）、number（数字）、date（日期）、identity（身份证）

lay-verType异常提示层模式：

tips（吸附层）、alert（对话框）、msg（默认）

lay-reqText：用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本内容。

lay-ignore：不会对该元素进行初始化渲染，即保留系统风格

事件触发：

<script>
//Demo
layui.use(['form','laydate'], function(){
  var form = layui.form, laydate = layui.laydate;
  //初始化表单
  laydate.render({ elem: '#date' }); //初始日历框
  $('#sort').find("option[value='值']").attr("selected",true);  //初始默认选择框项1，推荐
  $('#sort option').each(function(){ if($(this).val()=='值'){ $(this).attr("selected",true); return false; } }); //初始默认选择框项2
  //初始复选框，比如：value='阅读,写作';
  var arr=value.split(',');
  $("input[name='like[]']").each(function(){
  var s=arr.indexOf($(this).val());
  if(s>-1){ $(this).prop("checked","true"); }
  });

  $('#status').removeAttr("checked"); //删除选中状态
  $('#status').prop("checked","true"); //设置选中状态
  
  //刷新表单
  form.render('checkbox'); //刷新checkbox复选框（含开关）渲染
  form.render('radio'); //刷新radio单选框框渲染
  form.render('select'); //刷新select选择框渲染
  form.render(); //更新全部
  form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态

  //触发select选择，如：<select lay-filter="test"></select>
  form.on('select(test)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
  });
  //注意：如果你想触发所有的select，去掉过滤器(filter)即可。
  //触发checkbox复选
  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(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对象
  });  
  //触发radio单选
  form.on('radio(filter)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
  }); 
  
  //监听提交，比如：<button lay-submit lay-filter="formSubmit">提交</button>
  form.on('submit(formSubmit)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  layer.msg(JSON.stringify(data.field)); //显示所有字段名称和值
  delete data.field.file;  //删除某字段
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  "username": "贤心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我爱layui"
});
 
//获取表单区域所有值
var data1 = form.val("formTest");

//自定义验证规则，如：
//<input type="text" lay-verify="username" placeholder="请输入用户名">
//<input type="password" lay-verify="pass" placeholder="请输入密码">
form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
    if(value === 'xxx'){
      alert('用户名不能为敏感词');
      return true;
    }
  }
  
  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] 
}); 

});
</script>

数据表格

2个汉字单元格宽度 width:60

3个汉字单元格宽度 width:75

4个汉字单元格宽度 width:90

手机号码单元格宽度 width:120

IP地址单元格宽度 width:90-140

日期2022-01-24单元格宽度 width:110

日期时间2022-01-24 09:18:32单元格宽度 width:160

其它

//动态加载 CSS，href 即为 css 路径。

layui.link(href)

//本地存储，是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。

layui.data(table, settings) //数据会永久存在，除非物理删除。

layui.sessionData(table, settings) //页面关闭后即失效。

//获取浏览器信息

var device = layui.device();

//静态属性。获得一些配置及临时的缓存信息

layui.cache

//拓展一个模块别名，如：

layui.extend({test: '/res/js/test'})

//对象（Array、Object、DOM 对象等）遍历，可用于取代 for 语句

layui.each(obj, fn)

//获取详细数据类型（基本数据类型和各类常见引用类型）

layui._typeof(operand)

//对象是否为泛数组结构。如 Array、NodeList、jQuery 对象等等。

layui._isArray(obj)

//获得一个原始 DOM 节点的 style 属性值，如：

layui.getStyle(document.body, 'font-size')

//图片预加载

layui.img(url, callback, error)

//将数组中的对象按某个成员重新对该数组排序

layui.sort(obj, key, desc)

//获得 location.hash 路由结构，一般在单页面应用中发挥作用。

layui.router()

//读取当前页面的 url

var url = layui.url()

//向控制台打印一些异常信息，目前只返回了 error 方法：

layui.hint().error('出错啦');

//阻止事件冒泡

layui.stope(e)

//增加自定义模块事件。

layui.onevent(modName, events, callback)

//执行自定义模块事件，搭配 onevent 使用

layui.event(modName, events, params)

//移除模块相关事件的监听

layui.off(events, modName)

//用于获取模块对应的 define 回调函数

layui.factory(modName)

上一篇：iframe 高度100%时，超出DIV并出现垂直滚动条

下一篇：html中的特殊符号所对应代码，收藏使用

讨论数量：0

请先登录再发表讨论。 2024-11-24

登录注册

天涯网魂
3 杠 5 星

TA 的文章

TA 的随言

TA 的资源链

哈喽吧勤记录 • 懂分享

layui-开源模块化前端UI框架常用集合

请先登录再发表讨论。 2024-11-24