web 前端常用组件之Layer弹出层组件


Posted in Javascript onSeptember 22, 2016

经手几个项目,还是感觉 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

web 前端常用组件之Layer弹出层组件

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

b.layer content

web 前端常用组件之Layer弹出层组件

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

c.layer iframe

web 前端常用组件之Layer弹出层组件

//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

web 前端常用组件之Layer弹出层组件

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

e.layer tips

web 前端常用组件之Layer弹出层组件

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

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

Javascript 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
值得分享的bootstrap table实例
Sep 22 #Javascript
第一次动手实现bootstrap table分页效果
Sep 22 #Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 #Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 #Javascript
JavaScript面试题大全(推荐)
Sep 22 #Javascript
JavaScript 是什么意思
Sep 22 #Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 #Javascript
You might like
全文搜索和替换
2006/10/09 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
python简单实现插入排序实例代码
2020/12/16 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
网络方面基础面试题
2012/11/16 面试题
大课间活动实施方案
2014/03/06 职场文书
留学顾问岗位职责
2014/04/14 职场文书
5s标语大全
2014/06/23 职场文书
IT工程师岗位职责
2014/07/04 职场文书
2015年妇女工作总结
2015/05/14 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python