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

html+div+css 4887 6 2022-03-01

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

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 (经典灰色)


表单


表单元素:

<form class="layui-form" action=""></form>

单行样式:

<div class="layui-form-item">

   <label class="layui-form-label">输入框</label>

   <div class="layui-input-block">

     <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">

   </div>

</div>

带有辅助文字样式:

<div class="layui-form-item">

   <label class="layui-form-label">密码框</label>

   <div class="layui-input-inline">

     <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

   </div>

   <div class="layui-form-mid layui-word-aux">辅助文字</div>

</div>

组装行样式:

<div class="layui-form-item">


 <div class="layui-inline">

   <label class="layui-form-label">范围</label>

   <div class="layui-input-inline" style="width: 100px;">

     <input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">

   </div>

   <div class="layui-form-mid">-</div>

   <div class="layui-input-inline" style="width: 100px;">

     <input type="text" name="price_max" placeholder="¥" autocomplete="off" class="layui-input">

   </div>

 </div>

 

 <div class="layui-inline">

   <label class="layui-form-label">密码</label>

   <div class="layui-input-inline" style="width: 100px;">

     <input type="password" name="" autocomplete="off" class="layui-input">

   </div>

 </div>

 

</div>

文本框:

<input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

密码框:

<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

选择框:

<select name="city" lay-verify="required">

<option value=""></option>

<option value="0">北京</option>

<option value="1">上海</option>

<option value="2">广州</option>

</select>

单选框:

<input type="radio" name="sex" value="nan" title="男">

<input type="radio" name="sex" value="nv" title="女" checked>

复选框:

<input type="checkbox" name="like[]" title="写作">

<input type="checkbox" name="like[]" title="阅读" checked>

开关:

<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>

文本域:

<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>

提交和重置按钮

<button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>

<button type="reset" class="layui-btn layui-btn-primary">重置</button>

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

请先登录再发表讨论。 2023-02-03

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链