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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
javascript 数组操作详解
Jan 29 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vue2.x数组劫持原理的实现
Apr 19 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 图像尺寸调整代码
2010/05/26 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
nodejs更改项目端口号的方法
2018/05/13 NodeJs
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python实现电子产品商店
2019/02/26 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python换行与不换行的输出实例
2020/02/19 Python
Python调用Redis的示例代码
2020/11/24 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
Shell如何接收变量输入
2012/09/24 面试题
Python面试题集
2012/03/08 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
优秀公益广告词大全
2014/03/19 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
初中生毕业评语
2014/12/29 职场文书
食品质检员岗位职责
2015/04/08 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
python绘制云雨图raincloud plot
2022/08/05 Python