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

- 日理万妓 2022-08-18 02:41 119阅读 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 条评论，119人围观）

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

相关阅读

相关 web 炫酷特效集

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

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

相关 layer 弹出层读取html,Layer弹出层动态获取数据的方法

前一阵子做了一个简单的小项目，用到了Layer弹出层(弹出层的用法就不多加赘述了，官网上都有详细的介绍，这里附上网址http://layer.layui.com/)，当时前后台

拼搏现实的明天。/ 2022年10月06日 11:00/ 0 赞/ 334 阅读

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

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

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

相关 layer 弹出层

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

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

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

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

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

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

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

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

相关 layer弹出层扩展主题

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

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

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

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

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

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

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

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

相关 layer弹出层

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

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