1.获得 layui 后,将其完整地部署到你的项目目录,你只需要引入下述两个文件:
- ./layui/css/layui.css
- ./layui/layui.js //提示:如果是采用非模块化方式(建议使用),此处可换成:./layui/layui.all.js
基础用法(直接看代码):
//加载form,layer,jq ,编辑器模块 layui.use(['layer', 'form', 'jquery', 'layedit'], function() { //初始化模块 var layer = layui.layer, form = layui.form, $ = layui.$, layedit = layui.layedit; //使用模块 //自定义皮肤弹窗 $('#btn0').click(function() { layer.alert('我和别人不一样', { skin: 'demo-class', title: '皮肤', btn: ['明白了', '知道了','呵呵'], }); }) //普通消息框 $('#btn1').click(function() { layer.msg('提示消息', { icon: 1, btn: ['明白了', '知道了'], time: 1500 //设置消息提示显示时间(毫秒) }); //layer.load(2); //风格1的加载 }) //基础提示框 $('#btn2').click(function() { layer.open({ type: 1, title: ['我是提示标题', 'color:red;font-size:14px'], //这里content可以传入String/DOM/Array content: '我是提示的内容', area: ['250px', '200px'], //设置提示框的大小 maxmin: true //该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置即可 }); }) //基础confirm $('#btn3').click(function() { layer.confirm('好牛逼的弹窗啊', { btn: ['按钮1', '按钮2', '按钮3', ] //可以设置无限个按钮 , yes: function() { layer.msg('我是按钮1的回调', { icon: 1 }); }, btn2: function() { layer.msg('我是按钮1的回调', { icon: 2 }); }, btn3: function() { layer.msg('我是按钮3的回调', { icon: 4 }); }, cancel: function() { alert('关闭按钮的回调') //return false //开启该代码可禁止点击该按钮关闭 }, btnAlign: 'l', //设置按钮的排列方式 closeBtn: 2, //设置关闭按钮的样式 只能是1 2 0 shade: [1, 'red'], //设置遮罩层的样式 设置为0则关闭遮罩 anim: 4 //设置弹出动画 }); }) //iframe 弹窗 $('#btn4').click(function() { layer.open({ title: 'ifram弹窗', maxmin: true, //开启最大化最小化按钮 shade: [0.3, '#393D49'], type: 2, content: ['page2.html'] //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no'] }); }) //带有吸附效果的弹窗 $('#btn5').click(function() { layer.tips('这里是提示内容', '#btn5', //提示内容支持html 可以改字体颜色 { tips: [1, '#76d4f5'], //设置提示的位置 颜色 time: 1500 }) }) //位置弹窗 $('#btn6').click(function() { layer.alert('可以设置位置', { icon: 1, title: '右下角', offset: 'rb' }) }) //加载弹窗 $('#btn7').click(function() { layer.load(2, { time: 3000 }); }) //富文本编辑器 $('#btn8').click(function() { //建立编辑器 bianji = layedit.build('demo', { tool: [ 'strong' //加粗 , 'italic' //斜体 , 'underline' //下划线 , 'del' //删除线 , '|' //分割线 , 'left' //左对齐 , 'center' //居中对齐 , 'right' //右对齐 , 'link' //超链接 , 'unlink' //清除链接 , 'face' //表情 , 'image' //插入图片 , 'help' //帮助 ] }); }) $('#btn9').click(function() { alert(layedit.getContent(bianji)); }) });
注意:想自定义皮肤的时候在配置选项中添加skin:'css中的自定义皮肤名'选项,找到dom对象中对应的css名称自己编写即可