文章目录
一、layui的使用
你只需要引入下述两个文件:
./layui/css/layui.css
./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js
没错,不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
如果你想采用非模块化方式(即所有模块一次性加载,尽管layui官方并不推荐你这么做),你也可以按照下面的方式使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>非模块化方式使用layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
;!function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
}();
</script>
</body>
</html>
二、插件区别
(1)layui.js
你引入这个之后,你js所有的layui模块的引用都要用layui.use()来使用,不然将无法使用。
//layui模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
//……
});
(2)layui.all.js
它包含了 layui 所有的内置模块,且无需再通过 layui.use() 方法加载模块,直接调用即可。你引入这个之后,你的layui.use()将不生效,好处是你引用里面有的模块将不再用模块化的写法引入,在js文件中可以直接用layui.table这样用。
<script src="../layui/layui.all.js"></script>
<script>
;!function(){
//无需再执行layui.use()方法加载模块,直接使用即可
var form = layui.form
,layer = layui.layer;
//…
}();
</script>
三、插件依赖
(1)layui.js的使用
在使用 layui 2.2.5 之前,可以引入最新版的 jquery ,使用更好的性能。也可以使用layui 的jquery内部版本。如果引入要在引入layui.js 之前引入。
(2)layui.all.js的使用
可以放在jquery.js下面,也可以放jquery.js上面,一般建议放jquery.js下面。
重要发现:
如果layui.all.js放在jquery.js下面的话,细心的你会发现,layui的模态框在拉伸的时候,当窗体变小时,模态框里面的内容,比如文本框等这些,就会撑出模态框外面,显得样式很乱,这个时候,你是不是会去找模态框是不是少了哪层<div>,或者少了那个类,其实都不是,你只要把layui.all.js放在jquery.js上面,就可以解决这个模态框拉伸内容变乱的问题。
其实这都不是最好的解决方案,这样只是解决了模态框里面的内容不撑出模态框外面,但本质上它只是在模态框里面显示罢了。如果你不需要模态框可以进行拉伸的话,可以给它加上一个resize属性(如下示例:弹窗属性),这样就禁用了模态框的拉伸了。
1、move - 触发拖动的元素
类型:String/DOM/Boolean,默认:’.layui-layer-title’
默认是触发标题区域拖拽。如果你想单独定义,指向元素的选择器或者DOM即可。如move: ‘.mine-move’。你还配置设定move: false来禁止拖拽;
2、字体颜色的话,可以直接加个class,覆盖上去;
3、area - 宽高
类型:String/Array,默认:‘auto’
在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: ‘500px’,高度仍然是自适应的。当你宽高都要定义时,你可以area: [‘500px’, ‘300px’]。
4、resize - 是否允许拉伸
类型:Boolean,默认:true
默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 resize:false即可。该参数对loading、tips层无效
四、其他操作
(1)时间控件绑定问题:(layui 日期插件laydate 闪没问题)
问题描述:当页面高度不够时(高度不够,指的是 input输入框下面的页面高度小于时间控件的高度),点击文件框触发时间控件以后会闪没,当退出页面 ,再返回以后,时间控件正常出现。
解决方案:将触发方法改为 click 。示例如下:
laydate.render({
elem: '#birthLeader'
,trigger: 'click'
});
效果:无论高度是否足够,均可以出现控件,当高度不够时,会遮挡 input输入框。
(2)下拉框绑定问题
需要在绑定后使用 form.render() 重新渲染。修改表单回显问题同上。
更过详情请自行参考文档:layui官方文档