Laravel 框架中对Layer的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/78928912

♩ 背景

  • 其实很久前就接触到了 Layer 的使用,当时只是一位讲师的推荐,并且只应用了简单的弹出框模块功能
  • 近期发现开源作者一直在进行维护,并且注意到了拥有让人喜欢的LayUI设计风格,感觉之前真的是有点浪费了
  • 不管他人如何评价、质疑,自己作为后端开发人员更是layer的忠实拥护者,推荐学习一下

官网: LayUI模块 - layer.js组件 知乎推荐: 如何评价LayUI和他的作者闲心?

♪ 截图代表

♫ 使用步骤

①. 下载框架源码

  • 个人下载的是 layui.2.2.45 版本,解压后放置于自己的项目 Public 目录下.

②. 引入 js , css 文件

  • 依个人习惯,我新建了 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('怎么了?');
    });

♬ 附录

  1. 如开源代码的提供者所说,相比前端的那些走在前沿的开发者们多在追求更新的框架潮流,而作为后端开发人员本没有更多的学习精力却要处理好多前端问题,这是一个不错的选择
  2. 当然,如果小组开发,建议多多交流,如果对方强烈不接受,可考虑其他解决方案,毕竟还不是主流框架,在团队合作以及他人代码维护上可能会有很大的阻碍
  3. 但是,在自己看来,极为欣赏这一框架的方便和优雅性,在此,为作者“闲心”点赞.
  4. 其他参考学习

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏喵了个咪的博客空间

PhalGo-介绍

PhalGo-介绍 phalgo是一个Go语言的一体化开发框架,主要用于API开发应为使用ECHO框架作为http服务web程序一样可以使用,牛顿曾经说过"如果...

31760
来自专栏C++

python笔记:#006#程序执行原理

12920
来自专栏Python爬虫实战

Python爬虫:十几行代码下载王者荣耀所有皮肤

之前接触过爬虫还是几年前爬取豆瓣电台的歌曲,那时候用的C++,json解析还要用第三方库,总之很麻烦。最近接触到了python,深深的感觉这门语言真好。

12120
来自专栏程序猿DD

程序员你为什么这么累【续】:编码习惯之日志建议

——请先阅读这3篇文章: 程序员你为什么这么累? 我的编码习惯 - 接口定义 我的编码习惯 - Controller规范 开发中日志这个问题,每个公司都强调,...

39170
来自专栏程序员互动联盟

编程高手为啥都喜欢耍脚本?

脚本编程几乎在每一个平台上都存在,这是因为利用脚本常常会简化、加快很多批量处理的工作,它能实现很多传统编程语言的功能,但是对编写者却不需要关心什么编译器、解释器...

35450
来自专栏张旭舟的专栏

【腾讯云的1001种玩法】利用腾讯云搭建个人博客

利用腾讯云搭建个人博客背景闲扯作为一个程序员,都会想搭建一个自己的技术博客的,我也不例外。刚工作的时候,不会网站相关技术,只能利用wordpress部署一套现成...

4.6K00
来自专栏小白课代表

重大更新!全新的百度网盘下载器 PanDownload v2.0.1 来了!(附全新介绍)

时隔半年,最早的最稳定的知名度最高的流传范围最广的百度网盘下载器,PanDownload 终于迎来重大更新!

44640
来自专栏刘望舒

知乎 Android 客户端组件化实践

知乎 Android 客户端最早使用的是最常见的单工程 MVC 架构,所有业务逻辑都放在了主工程 Module 里,网络层和一些公共代码分别被抽成了一个 Mod...

49040
来自专栏云计算-私有云

Windows Server 2019前瞻

十一假期马上就过完了,不知道各位小伙伴玩的怎么样啊,是否有遇到“人在囧途”或者是否看到了处处大海。微软于2018年9月24日-28日在美国召开了Ignite 2...

1.5K00
来自专栏程序员的SOD蜜

唯一不变的就是一直在变”--“数据”的华丽“变身术”

 系列文章索引: [WCF邮件通信系统应用 之 数据同步程序 之 设计内幕 之 一] 同步一个数据库要发多少个数据包? [WCF邮件通信系统应用 之 数据同步...

22060

扫码关注云+社区

领取腾讯云代金券