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,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
58 3
|
25天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
94 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
37 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
48 2
|
1月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
37 1
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
239 1
|
2月前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
64 2