web 前端常用组件【07】弹出层 Layer

简介:

1. Layer 使用特点

  Layer 具备全方位的解决方案,致力于服务各水平段的开发人员,让页面轻松地拥有丰富友好的操作体验。

  Layer 尽可能地在以更少的代码展现更强健的功能,注重性能的提升、易用和实用性.。

  Layer 兼容了包括IE6在内的所有主流浏览器。 数量可观的接口,可以自定义需要的风格,每一种弹层模式各具特色。  

  Layer 遵循LGPL协议,将永久性提供无偿服务。

2. Web 项目引入 Layer

   Layer 依赖 Jquery 强大的 DOM 操纵能力,所以引入 Layer 前记得引入 Jquery。

<script type="application/javascript" src="../smeui/plugins/jquery/jquery-3.1.0.min.js"></script>
<script type="application/javascript" src="../smeui/plugins/layer-2.4/layer.js"></script>

  Layer 效果展示

复制代码
<div>
    <p>layer demo</p>
    <button id="msg">layer msg</button>
    <button id="content">layer content</button>
    <button id="iframe">layer iframe</button>
    <button id="loading">layer loading</button>
    <button id="tips">layer tips</button>
</div>
复制代码

  a.Layer msg

 //layer msg
    $('#msg').on('click', function(){
        layer.msg('Hello layer');
    });

   b.layer content

复制代码
  //layer content
    $('#content').on('click', function(){
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true,
            content: '\<\div style="padding:20px;">自定义内容\<\/div>'
        });
    });
复制代码

    c.layer iframe

复制代码
    //layer iframe
    $('#iframe').on('click', function(){
        layer.open({
            type: 2,
            title: 'iframe父子操作',
            maxmin: false,
            shadeClose: true,
            area : ['600px' , '360px'],
            content: 'http://www.baidu.com'
        });
    });
复制代码

    d.layer loading

复制代码
    //layer lading
    $('#loading').on('click', function(){
        var ii = layer.load();
        //此处用setTimeout演示ajax的回调
        setTimeout(function(){
            layer.close(ii);
        }, 10000);
    });
复制代码

   e.layer tips

    //layer tips
    $('#tips').on('click', function(){
        layer.tips('Hello tips!', '#tips');
    });

   在 web 项目无论是基本的弹窗还是需要个性化定制的弹出,Layer 都能提供很好的支持,这里只做抛砖引玉,需要更多信息请访问官网。


本文转自Orson博客园博客,原文链接:http://www.cnblogs.com/java-class/p/5896242.html,如需转载请自行联系原作者

相关文章
|
2天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
2天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
2天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
2天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
2天前
|
前端开发 JavaScript
【Web 前端】$(document).ready() 是个什么函数?为什么要用它?
【5月更文挑战第2天】【Web 前端】$(document).ready() 是个什么函数?为什么要用它?
|
2天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
3天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
3天前
|
JavaScript 前端开发
【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
【5月更文挑战第1天】【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
|
3天前
|
JavaScript 前端开发
【Web 前端】jQuery 库中的 $() 是什么?
【5月更文挑战第1天】【Web 前端】jQuery 库中的 $() 是什么?
|
3天前
|
前端开发 JavaScript UED
【Web 前端】异步函数
【5月更文挑战第1天】【Web 前端】异步函数