web 前端常用组件之Layer弹出层组件
2016-09-22 17:10
836 查看
经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到。
感谢 Layer 作者贤心,Layer 官网地址:http://layer.layui.com/
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 都能提供很好的支持,这里只做抛砖引玉,需要更多信息请访问官网。
您可能感兴趣的文章:
相关文章推荐
- web 前端常用组件【07】弹出层 Layer
- 前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)
- Layer 一款web弹层组件(弹出层、日期选择、分页、LayIM接口文档)
- layer之web弹出组件
- 二十三、【开源】EFW框架Web前端开发之常用组件(FusionCharts图表、ReportAll报表等)
- Web开发之自定义前端组件经验介绍
- 【web前端】js刷新父页面:JS用什么方法可以在弹出的子页面刷新父页面?
- 前端常用兼容组件
- WEB前端常用CDN
- WEB前端开发中一些常用技巧总结
- 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用
- 分享下载 23 款简单常用的web前端jquery网页特效
- web前端开发比较有用的框架和组件
- 关于AJAX应用于web网页,如何弹出对话框的几种常用方法【用的时候直接调用即可】
- web前端关于html转义符的常用js函数
- web前端常用操作集(涵盖JS、HTML、CSS)
- web前端开发常用的软件都有哪些
- Web前端设计模式 制作漂亮的弹出层
- Web前端常用网址
- Web前端应用十种常用技术