教你如何使用layer快速写出好看的弹出框

前几天写东西的时候,有个写弹出框的需求,本来是想用jqueryUI的,但是看了一下,好像比较麻烦,通过朋友接触到了layUI,虽然我是写后端的,但是寒假自学了jquery和bootstrap两个比较简单的框架,听说layUI里的layer弹窗很好用,于是今天尝试一下,写下自己的入门心得。

第一步:下载layer框架包

点击绿色下载就可以,下载完是一个压缩包,我们需要把它解压,然后把整个文件夹放进网站目录即可。

第二步:引入相关文件

学过一些前端框架的同学都知道,我们下好了相关的前端框架,肯定是要把它相关的js文件或者css文件引入进来,实际上它就是封装好的一些方法或者样式。我们直接使用就可以了。

例如:(在标签引入即可,因为layer是基于jquery开发的,所以必须引入jquery文件,版本好像是1.8以上)

有些同学可能没有jquery文件,不过想要一个很简单,进百度或者其他有用到它的网站把它用的直接拉下来了就好了,例如我把百度的jquery直接拉下来。

得到了jquery文件和layer文件了,那么就把它放在网站目录,然后引入就好了。

如何使用layer

当你点击某个按钮时,它给你显示它的效果,并且在下面的iframe中把实现它的代码定位到最前面。

例如我们拿个询问层的来玩玩,代码可以这么写:

界面只有一个button按钮:

因为默认的button太丑了,所以我引入了bootstrap.css文件,使用了里面的btn btn-danger这个按钮样式,这个不用管的。

点击后的结果是:

这是用chrome浏览器进行调试的,可以看到这个比我们默认的alert()函数弹出的好看多了,

点击太麻烦了或者我觉得可以,都会会显示一个tip信息如图:

这时候我们把询问层的代码拿出来简单分析一下:

首先我们在body后面书写了js代码,这里我是使用jquery来找到那个按钮的,简单解释一下吧。

$("#btn").click(function(){ /这里点击后会发生的事件 });

其实就是$("")这个函数传入一个参数,因为我前面设置了按钮的id为btn,所以参数就是#btn,写法跟css很像的。找到它后让它调用click()函数,也就是点击后发生的事情。然后就把layer调用的代码放进去就好了。

什么?你还是不会jquery?没关系的,那我们就使用原生js来找到元素并且绑定事件啦,我这里随便提供一种写法:

或者你在button那里先绑定事件,然后在后面书写函数具体实现也是可以的。

搞定了这个后,我们看看这个询问层代码是怎么写的,把它单独抽出来。看下图

首先是layer这个对象调用了一个confirm函数。我还没深入了解,估计跟jquery的$()差不多,只是不用给参数,(当然我是猜的hh),然后confirm有着几个参数,第一个参数是弹出框显示的文字,第二个参数写了下方的按钮,第三个和第四个函数都是回调函数,分别对应两个按钮点击后的事件,这里写的是layer.msg也就是又用这个layer对象调用了.msg()函数,这是个提示函数,第一个参数写的是弹出的内容,第二个参数应该是样式,我这里后面把icon 的值改为3就变成问号的图形了,像上面的那个图。就这样简单的一个询问层的弹出框就搞定了,

是不是很简单呢?剩下的其他的那些各式各样的弹出组件都可以自己主动试试,我这里就只是带下入门啦。其实layUI里面还有使用原生js写的layDate框架,用来当日期选择插件也很不错,还有layIM即时通信组件,这些我就不说了,有兴趣的同学可以自己去研究研究。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180323G12HZW00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券