介绍
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
相关链接
样例
// 防止用户一下点击多次发放按钮
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("发放失败");
}
});
}
},
});
});
入门学习
展示图片
// 图片展示
function showImg(recordImg) {
var html = '<div>暂无图片</div>';
if (recordImg != '') {
html = '';
var imgArr = recordImg.split(',');
for (var i = 0; i < imgArr.length; i++) {
html = html + '<div><img src=\'' + imgArr[i] + '\'/> </div>';
}
}
layer.open({
type: 1,
title: '图片展示',
area: ['90%', '90%'],
maxmin: true,//允许全屏最小化
anim: 1,//0-6的动画形式，-1不开启
content: html
});
}
项目实例
- 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>
- 遮罩
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目录结构如下：
说明如下【摘自官网】：
├─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的基础参数
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>
联想查询,自动补全
//联想查询-选中后会改变当前框value
$('#text1').typeahead({
source: function (query, process) {
$.post('cainiaoSite/queryAllCusite', {chars: query}, function (data) {
for(i in data) {
data[i].name = data[i].id + " - " + data[i].name
}
process(data);
});
},
afterSelect:function(item) {
var w=item.name.indexOf("-");
$("#text1").val($.trim(item.name.substring(w+1)));
$("#cusite").val($.trim(item.name.substring(w+1)));
$("#cuscode").val($.trim(item.id));
}
});
3852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
