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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
jQuery 位置插件
Dec 25 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
node.js中watch机制详解
2014/11/17 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python self,cls,decorator的理解
2009/07/13 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
python实现flappy bird游戏
2018/12/24 Python
python turtle 绘制太极图的实例
2019/12/18 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
Linux内核产生并发的原因
2016/11/08 面试题
sort命令的作用和用法
2013/08/25 面试题
易程科技软件测试笔试
2013/03/24 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
工作决心书范文
2014/03/11 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
高一军训的心得体会
2014/09/01 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技