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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
原生JavaScript实现留言板
Jan 10 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
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
python实现图片插入文字
2019/11/26 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python爬取天气数据的实例详解
2020/11/20 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
专业销售业务员求职信
2013/11/18 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
大学新闻系求职信
2014/06/03 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书