layer-想到即做到酷炫web弹框/层

- 日理万妓 2022-08-18 02:41 166阅读 0赞

双节临近，最近加足马力做一个砸金蛋活动，我负责后台，我们通常用到的UI框架有easyUI、bootStrap，而我今天将的这个layer工具更加有针对性，它针对弹框/层等，非常人性化，而且0基础就可上手，只要引入文件，在线调试成功就可以放到我们的代码中，这是它的官网，据了解开发这个工具的是个女生，她自己一个人写出来的，非常牛！给大家推荐一下她的官网：[layer官方演示与讲解][layer]，还有她的博客：[贤心][Link 1]，非常棒，而且群众呼声很高！

下面用一个简单的“加载中”效果来做个演示：

首先，部署：

![Image 1][]

第二步：引入

你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：

![Image 1][]

第三步：使用

是时候目睹layer的挫样了，由于她是基于jQuery，你可以选择用jQuery的api方式去抒写。当你想弹出一个layer实例的时候，你首先应该绑定事件：

<span style="font-size:14px;">//弹出一个loading层
    $('#test4').on('click', function(){
        var ii = layer.load();
        //此处用setTimeout演示ajax的回调
        setTimeout(function(){
            layer.close(ii);
        }, 1000);
    });</span>

![Center][]

就这样一个加载层的效果就出来了，这里不太方便展示效果，但是layer文档很详细，感兴趣就赶紧看看吧！

[layer]: http://layer.layui.com/
[Link 1]: http://sentsin.com/
[Image 1]: 
[Center]: /images/20220731/ad91562e470d40369c9a2f55a05494db.png

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端-layui-layer】layui弹出层闪退，layer弹出层闪退，layer弹出层坑

今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事件还未绑定到任何按钮，可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮，打开弹窗闪退

我不是女神ヾ/ 2023年07月05日 11:53/ 0 赞/ 33 阅读

相关 web 炫酷特效集

1、阴影文字效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

刺骨的言语ヽ痛彻心扉/ 2022年11月29日 05:50/ 0 赞/ 258 阅读

相关 layer-想到即做到酷炫web弹框/层

双节临近，最近加足马力做一个砸金蛋活动，我负责后台，我们通常用到的UI框架有easyUI、bootStrap，而我今天将的这个layer工具更加有针对

- 日理万妓/ 2022年08月18日 02:41/ 0 赞/ 167 阅读

相关 layer 弹出层

使用方法：一、引入 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></scrip

约定不等于承诺〃/ 2022年07月24日 07:03/ 0 赞/ 354 阅读

相关 Layer 一个让你想到即可做到的web弹窗/层

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。在与同类组件的比较中，laye

今天药忘吃喽~/ 2022年07月17日 01:28/ 0 赞/ 142 阅读

相关 web弹层组件-layer封装的工具类

var colseTime = 2000;//2s / layer 是提示消息封装工具类 / var Layer = {

不念不忘少年蓝@/ 2022年07月13日 05:10/ 0 赞/ 227 阅读

相关 layer弹出层扩展主题

弹出层插件layer确实很强大，官方提供主题太少，但是提供扩展的方式，由于项目使用统一颜色风格，就想扩展一下。官方默认的三种: 1.白蓝(默认) ![这里写图片描述][

桃扇骨/ 2022年05月31日 05:43/ 0 赞/ 373 阅读

相关 layui弹出层闪退，layer弹出层闪退，layer弹出层坑

转载: http://www.mamicode.com/info-detail-1654730.html 今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事

桃扇骨/ 2022年05月22日 04:30/ 1 赞/ 479 阅读

相关最新Layer弹出层实例【开箱即用】

最新Layer弹出层实例代码如下，会有意外收获 <!DOCTYPE html> <html lang="en"> <head>

Bertha 。/ 2022年04月16日 01:48/ 0 赞/ 435 阅读

相关 layer弹出层

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layu

清疚/ 2021年09月15日 07:26/ 0 赞/ 601 阅读