共计 4075 个字符，预计需要花费 11 分钟才能阅读完成。
组件示例
如果须要更多材料点击下方图片加好友支付⬇（注明来意）
弹出层
<font color=”red”> 模块加载名称：layer，独立版本：layer.layui. com</font>
应用场景
因为 layer 能够独立应用，也能够通过 Layui 模块化应用。所以请依照你的理论需要来抉择。
| 场景 | 用前筹备 | 调用形式 |
|---|---|---|
| 1. 作为独立组件应用 | 如果你只是独自想应用 layer，你能够去 layer 独立版本官网下载组件包。你须要在你的页面引入jQuery1.8 以上的任意版本，并引入layer.js。 | 通过 script 标签引入 layer.js 后，间接用即可。 |
| 2. layui 模块化应用 | 如果你应用的是 layui，那么你间接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但须要引入 layui.css 和layui.js | 通过 layui.use(‘layer’, callback) 加载模块 |
-
作为独立组件应用 layer
<!-- 引入好 layer.js 后，间接用即可 --> <script src="layer.js"></script> <script> layer.msg('hello'); </script> -
在 layui 中应用 layer
layui.use('layer', function(){ var layer = layui.layer; layer.msg('hello'); });
根底参数
-
type – 根本层类型
类型：Number，默认：0 可传入的值有：0（信息框，默认）1（页面层）2（iframe 层）3（加载层）4（tips 层） -
title – 题目
类型：String/Array/Boolean，默认：'信息' title 反对三种类型的值：若传入的是一般的字符串，如 title :'我是题目'，那么只会扭转题目文本；若须要自定义款式，能够 title: ['文本', 'font-size:18px;']，数组第二项能够写任意 css 款式；若你不想显示标题栏，能够 title: false； -
content – 内容
类型：String/DOM/Array，默认：'' content 可传入的值是灵便多变的，不仅能够传入一般的 html 内容，还能够指定 DOM。/* 信息框 */ layer.open({ type:0, title:"零碎音讯", // content 能够传入任意的文本或 html content:"Hello" }); /* 页面层 */ layer.open({ type:1, title:"零碎音讯", // content 能够传入任意的文本或 html content:"<div style='height:100px;width:200px'>Hello</div>" }); /* iframe */ layer.open({ type:2, title:"零碎音讯", // content 是一个 URL，如果你不想让 iframe 呈现滚动条，你还能够 content: ['url', 'no'] content:"http://www.baidu.com" // content:["http://www.baidu.com",'no'] }); /* tips 层 */ layer.open({ type: 4, content: ['内容', '#id'] // 数组第二项即吸附元素选择器或者 DOM }); -
area – 宽高
类型：String/Array，默认：'auto' 在默认状态下，layer 是宽高都自适应的。当定义宽度时，你能够 area: '500px'，高度依然是自适应的。当宽高都要定义时，你能够 area: ['500px', '300px']。 -
icon – 图标
注：信息框和加载层的公有参数。类型：Number，默认：-1（信息框）/0（加载层）信息框默认不显示图标。当你想显示图标时，默认层能够传入 0 -6。如果是加载层，能够传入 0 -2。// eg1 layer.alert('酷毙了', {icon: 1}); // eg2 layer.msg('不开心。。', {icon: 5}); // eg3 layer.load(1); // 格调 1 的加载 -
示例
// eg1 layer.alert('很快乐见到你????', {icon: 6}); // eg2 layer.msg('你违心和我做敌人么？', { time: 0, // 不主动敞开 btn: ['当然违心', '狠心回绝'], // 按钮 yes: function(index){layer.close(index); // 敞开以后弹出框 layer.msg('新敌人，你好！', { icon: 6, // 图标 btn: ['开心','高兴'] }); } }); // eg3 layer.msg('这是罕用的弹出层'); // eg4 layer.msg('So sad /(ㄒ o ㄒ)/~~', {icon: 5}); // eg5 layer.msg('玩命加载中...=~ω~=', function(){ // 敞开后的操作 layer.msg('(⊙o⊙)？'); });
日期与工夫抉择
<font color=”red”> 模块加载名称：laydate，独立版本：http://www.layui.com/laydate/…
layDate 蕴含了大量的更新，其中次要以：年选择器 、 年月选择器 、 日期选择器 、 工夫选择器 、 日期工夫选择器 五种类型的抉择形式。
疾速应用
和 layer 一样，能够在 layui 中应用 layDate，也可间接应用 layDate 独立版，请依照理论需要来抉择。
| 场景 | 用前筹备 | 调用形式 |
|---|---|---|
| 1. layui 模块化应用 | 下载 layui 后，引入 layui.css 和layui.js即可 | 通过 layui.use(‘laydate’, callback) 加载模块后，再调用办法 |
| 2. 作为独立组件应用 | 去 layDate 独立版本官网下载组件包，引入 laydate.js 即可 | 间接调用办法应用 |
在 layui 模块中应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 日期与工夫抉择 </title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-inline">
<input type="text" class="layui-input" id="date1" />
</div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use('laydate', function(){
var laydate = layui.laydate;
// 执行一个 laydate 实例
laydate.render({elem: '#date1' // 指定元素});
});
</script>
</html>根底参数
-
elem – 绑定元素
类型：String/DOM，默认值：无 必填项，用于绑定执行日期渲染的元素，值个别为选择器，或 DOM 对象laydate.render({elem: '#test' // 或 elem: document.getElementById('test')、elem: lay('#test') 等 }); -
type – 控件抉择类型
类型：String，默认值：date 用于独自提供不同的选择器类型，可选值如下表：type 可选值 名称 用处 year 年选择器 只提供年列表抉择 month 年月选择器 只提供年、月抉择 date 日期选择器 可抉择：年、月、日。type 默认值，个别可不填 time 工夫选择器 只提供时、分、秒抉择 datetime 日期工夫选择器 可抉择：年、月、日、时、分、秒 // 年选择器 laydate.render({ elem: '#test' ,type: 'year' }); // 年月选择器 laydate.render({ elem: '#test' ,type: 'month' }); // 日期选择器 laydate.render({ elem: '#test' //,type: 'date' // 默认，可不填 }); // 工夫选择器 laydate.render({ elem: '#test' ,type: 'time' }); // 日期工夫选择器 laydate.render({ elem: '#test' ,type: 'datetime' }); -
format – 自定义格局
类型：String，默认值：yyyy-MM-dd 通过日期工夫各自的格局符和长度，来设定一个你所须要的日期格局。layDate 反对的格局如下：格局符 阐明 yyyy 年份，至多四位数。如果有余四位，则后面补零 y 年份，不限度位数，即不论年份多少位，后面均不补零 MM 月份，至多两位数。如果有余两位，则后面补零。 M 月份，容许一位数。 dd 日期，至多两位数。如果有余两位，则后面补零。 d 日期，容许一位数。 HH 小时，至多两位数。如果有余两位，则后面补零。 H 小时，容许一位数。 mm 分钟，至多两位数。如果有余两位，则后面补零。 m 分钟，容许一位数。 ss 秒数，至多两位数。如果有余两位，则后面补零。 s 秒数，容许一位数。 通过上述不同的格局符组合成一段日期工夫字符串，可任意排版。
// 自定义日期格局 laydate.render({ elem: '#test' ,format: 'yyyy 年 MM 月 dd 日' // 可任意组合 }); -
value – 初始值
类型：String，默认值：new Date() 反对传入合乎 format 参数设定的日期格局字符，或者 new Date()// 传入合乎 format 格局的字符给初始值 laydate.render({ elem: '#test' ,value: '2018-08-18' // 必须遵循 format 参数设定的格局 }); // 传入 Date 对象给初始值 laydate.render({ elem: '#test' ,value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的工夫戳 });
正文完
