版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333835
官网: LayUI模块 - layer.js组件 知乎推荐: 如何评价LayUI和他的作者闲心?
layui.2.2.45
版本,解压后放置于自己的项目 Public
目录下.layui.blade.php
文件来存放相关的配置数据,如此一来,哪个页面需要,直接使用 @include()
命令引入此文件即可<link href="{{asset('layui/css/layui.css')}}" rel="stylesheet">
<!--采用模块化方式-->
<script type="text/javascript" src="{{asset('layui/layui.js')}}"></script>
<!-- jQuery (necessary JavaScript plugins) -->
<script type='text/javascript' src="{{asset('home/js/jquery-1.11.1.min.js')}}"></script>
<!-- 关于layUI的配置 可使用“dialog.fun()”调用 -->
<script>
/*自定义弹出框格式 (常用的弹出框形式)*/
var dialog = {
error: function(message,url) {
layer.open({
content:message,
title:false,
icon:3,
yes : function(){
location.href=url;
},
});
},
/*用于弹出框提示*/
tip:function (message,timer) {
if(!timer){timer = 2;}
layer.msg(message,{time:timer * 1000});
},
/*显示加载的效果 type:样式 [null,1,2] */
loading:function (type) {
layer.load(type);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
},
};
<!-- end 自定义弹出框格式 -->
<!-- 全局配置 -->
layui.config({
version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
,base: '' //设定扩展的 Layui 模块的所在目录,一般用于外部模块扩展
});
<!-- end 自定义弹出框格式 -->
<!-- 加载所需模块 -->
layui.use(['laypage', 'layedit','element'],
function(laypage, layedit){
//使用分页
laypage();
//建立编辑器
layedit.build();
});
<!-- end 加载所需模块 -->
</script>
说明: 根据文档的介绍,我自行设计了上述的代码,后面可根据自己的需求不断进行补充
$("#btn").click(function () {
dialog.tip('怎么了?');
});
- [bootstrap](http://v3.bootcss.com/)
- [Wijmo](http://wijmo.gcpowertools.com.cn/)
- 微简开发 - [vjong](http://vjong.com/)