layui入门笔记

<>介绍

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

<>相关链接

* layui官网 <http://www.layui.com/>
* layui文档 <http://www.layui.com/doc/>
<>样例
// 防止用户一下点击多次发放按钮 var isPost = false; // 发放 $("#send").click(function () { var
checkboxs= $('#table').bootstrapTable('getSelections'); if (checkboxs.length ==
0) { layer.msg("请选择发放的数据!"); return; } var list = []; for (var i = 0; i <
checkboxs.length; i++) { if(checkboxs[i].sendState == '2'){ layer.msg(
"含有已发放数据，请重新选择!"); return; } if(checkboxs[i].sendState == '3'){ layer.msg(
"含有不予发放数据，请重新选择!"); return; } list.push(checkboxs[i].id); } layer.open({ title:
"确认发放？", type: 1, offset: "auto", //
具体配置参考：http://www.layui.com/doc/modules/layer.html#offset id: 'LAY_demo', //
防止重复弹出 content: '<div style="padding: 20px 100px;">发放后，不可撤销，是否继续</div>', btn: [
'确认', '取消'], btnAlign: 'c', // 按钮居中 yes: function () { if(!isPost){ //弹窗提示 layer
.load(0.3, {shade: [0.3,'#fff']}); $.ajax({ url:"senddetail/sendByIds", type:
"POST", data:{ ids: JSON.stringify(list) }, dataType:"json", // 发送请求前调用的函数
beforeSend:function(){ isPost = true; }, // 请求完成后回调函数 (请求成功或失败之后均调用) complete:
function(XMLHttpRequest, textStatus){ isPost = false; }, success:function(data){
layer.closeAll(); layer.alert(data.msg); $('#table').bootstrapTable('refresh',
{url:'senddetail/querySendData'}); }, //调用出错执行的函数 error: function(){ layer.
closeAll(); //请求出错处理 layer.alert("发放失败"); } }); } }, }); });
<>入门学习

<>项目实例

* Spring整合Quartz // 设置并发为false bean.setConcurrent(false);
* button页面刷新
必须要加上：type=“button”，否则会导致页面刷新，执行click方法异常
<button type="button" id="search" class="layui-btn layui-btn-primary
layui-btn-small"><i class="iconfont icon-search"></i>查询</button>
* 遮罩
具体配置 <http://www.layui.com/doc/modules/layer.html#shade>
layer.load(0.3, {shade: [0.3, '#fff']});
* 清除文本框内容 <input type="text" name="destination" id="destination" autocomplete=
"off" class="layui-input" data-provide="typeahead"> <i class="icon_ca_layui" ></
i> //必须加上 --js文件中必须要有 var form = layui.form(), layer = layui.layer, layedit =
layui.layedit, laydate = layui.laydate, test = layui.test, autocomplete =
layui.autocomplete, clipboard = layui.clipboard, element = layui .element();
test.restVal(); //必须加上 test.selectMove(); test.multiSelect();
<>下载源码

最新版源码为layui-v2.3.0-rc1.zip，其目录结构如下：


子目录layui目录结构如下：


说明如下【摘自官网 <http://www.layui.com/doc/>】：
├─css //css目录 │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate
│ │ ├─layer │ │ └─layim │ └─layui.css //核心样式文件 ├─font //字体图标目录 ├─images
//图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay //模块核心目录 │ └─modules //各模块组件 │─layui.js
//基础核心库 └─layui.all.js //包含layui.js和所有模块的合并文件
<>快速上手

<>项目所需引入layui的文件

* 获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件： ./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js
* Web 弹层组件layer
JS文件中DEMO示例，点击查看layer.open的基础参数 <http://www.layui.com/doc/modules/layer.html>
layer.open({ type: 1, title: '预警设置', area: ['690px', '230px'], content: $(
'#editForm'), btn: ['确定', '取消'], success: function (layero, index) { $(
"#isWarning").val(grid.isWarning); $("#warningPhone").val(grid.warningPhone); $(
"#warningNum").val(grid.warningNum); var form = layui.form(); form.render(); },
end: function () { $("#warningDiv form input").each(function () { $(this).val(''
); }); }, yes: function (index, layero) { if ($.trim($("#warningPhone").val())
== "") { layer.msg("填写预警手机号"); return; } if ($.trim($("#warningNum").val()) ==
"" || $.trim($("#warningNum").val()) == "0") { layer.msg("填写正确的不为0的预警数量");
return; } $.ajax({ url: "StockManger/inform", type: "POST", data: $('#formEdit')
.serialize(), dataType: "json", success: function (data) { if (data.success ==
"true") { layer.closeAll(); layer.msg(data.msg); $("#search").click(); } else {
layer.msg(data.msg); } } }); } });
<>layui模块规范

layui 的模块是基于 layui.js
内部实现的异步模块加载方式，它并不遵循于AMD（没有为什么，毕竟任性呀！），而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为
layui 最核心的模块加载引擎。

* 预先加载。即一个JS文件中，写一个use即可。 layui.use(['layer','form', 'layedit', 'laydate',
'test', 'autocomplete'], function(){ var form = layui.form() //获取form模块 ,layer =
layui.layer //获得layer模块 ,layedit = layui.layedit ,laydate = layui.laydate
//获得laydate模块 ,test= layui.test ,autocomplete = layui.autocomplete ,jstree =
layui.jstree; test.restVal(); test.selectMove(); test.formToggle({ ifTableResize
: true }); $("#clear").click(function() { $('#orderNo').val('') $('#queryName').
val('') $('#queryPhone').val('') $('#orderStatus').val('') }) });
<>layui.laydate
<input type="text" value="${start }" id="start" name="orderDate" autocomplete="
off" class="layui-input" onclick="layui.laydate({elem: this,format: 'YYYY-MM-DD
hh:mm:ss'})">
<>layui结合下拉框
<div class="layui-inline"> <label class="layui-form-label width_90 f-12">订单状态</
label> <div class="layui-input-inline pos-r"> <div class="layui-input-inline
pos-r" style="width: 192px;"> <select id="orderStatus" name="orderStatus" style
="width: 192px;"> <option value=" ">全部</option> <option value="待接单">待接单</option>
<option value="待收件">待收件</option> <option value="已收件">已收件</option> </select> </
div> </div> </div>

• « 上一篇：世界上最难的5种编程语言
• » 下一篇：一个简单的爬虫实例