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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
vue分页器组件编写方法详解
Jun 28 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP云打印类完整示例
2016/10/15 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
Display SQL Server Version Information
2007/06/21 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python字符串替换实例分析
2015/05/11 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python入门教程之运算符与控制流
2016/08/17 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
flask实现验证码并验证功能
2019/12/05 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
用python读取xlsx文件
2020/12/17 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
Java基础面试题
2012/11/02 面试题
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
实习单位意见
2015/06/04 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Oracle笔记
2021/04/05 Oracle