web 前端常用组件【07】弹出层 Layer
web 项目中总是需要弹出框,来让用户进行下一步的操作。
大到弹出另外一个页面,小到弹出提示、确认等。
经手几个项目,还是感觉 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
//layer msg
$('#msg').on('click', function(){
layer.msg('Hello layer');
});
b.layer content
//layer content
$('#content').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true,
content: '\<\div style="padding:20px;">自定义内容\<\/div>'
});
});
c.layer iframe
//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
//layer lading
$('#loading').on('click', function(){
var ii = layer.load();
//此处用setTimeout演示ajax的回调
setTimeout(function(){
layer.close(ii);
}, 10000);
});
e.layer tips
//layer tips
$('#tips').on('click', function(){
layer.tips('Hello tips!', '#tips');
});
在 web 项目无论是基本的弹窗还是需要个性化定制的弹出,Layer 都能提供很好的支持,这里只做抛砖引玉,需要更多信息请访问官网。
web 前端常用组件【07】弹出层 Layer的更多相关文章
- 弹出层layer的使用
弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...
- jQuery弹出层layer插件的使用
引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> ...
- 弹出层layer演示 以及在编写弹出层时遇到的错误
实现的功能: 首先第一步 在官方下载layer的文件.layUI官网:http://layer.layui.com/ http://layer.layui.com/ layer文件的下载步骤如 ...
- layui 弹出层layer中from初始化 ,并在btn中返回from.data
1.弹出对话框 layer.open() 来初始化弹层 // 监听添加操作 $(".data-add-btn").on("click", function () ...
- 非常好用的弹出层 layer,常用功能demo,快速上手!
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用.老文档地址:http://layer.layui.com/api.html 已经停止维护 新文档地址:htt ...
- web 前端常用组件【05】ZTree
web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...
- 常用的AJAX弹出层代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 牛逼的 弹出层 layer !!!
功能强大,实用,操作方便,文档齐全. http://layer.layui.com/api.html 常用功能代码: <!doctype html> <html> <he ...
- layer弹出层 layer源码
下载源码:点击下载 ;!function(window, undefined){ "use strict"; var pathType = true, //是否采用自动获取绝对路径 ...
随机推荐
- SpingMVC 核心技术帮助文档
声明:本篇文档主要是用于参考帮助文档,没有实例,但几乎包含了SpringMVC 4.2版本的所有核心技术,当前最新版本是4.3,4.2的版本已经经是很新的了,所以非常值得大家一读,对于读完这篇文档感觉 ...
- 利用Python进行数据分析(10) pandas基础: 处理缺失数据
数据不完整在数据分析的过程中很常见. pandas使用浮点值NaN表示浮点和非浮点数组里的缺失数据. pandas使用isnull()和notnull()函数来判断缺失情况. 对于缺失数据一般处理 ...
- RedisRepository封装—Redis发布订阅以及StackExchange.Redis中的使用
本文版权归博客园和作者本人吴双共同所有,转载请注明本Redis系列分享地址.http://www.cnblogs.com/tdws/tag/NoSql/ Redis Pub/Sub模式 基本介绍 Re ...
- thinkphp怎么修改配置进入默认首页
thinkphp文件夹下config 里面有个convention.php文件 里面有三个配置 'DEFAULT_MODULE' => 'Home', // 默认模块 'DEFAULT_CONT ...
- struts2学习之旅三 权限管理和导航设计
1,权限管理的db设计和dao实现,尽量简单快速有效: db的设计如下:权限按照角色来赋给用户: 权限对应每一个具体的功能,有菜单级别的,有导航级别的,还有页面级别的功能: 涉及到权限的敏感操作一般都 ...
- 数据结构:队列 链表,顺序表和循环顺序表实现(python版)
链表实现队列: 尾部 添加数据,效率为0(1) 头部 元素的删除和查看,效率也为0(1) 顺序表实现队列: 头部 添加数据,效率为0(n) 尾部 元素的删除和查看,效率也为0(1) 循环顺序表实现队列 ...
- linux(十一)__Apache服务器
查询是否安装了apache rpm -qa |grep httpd yum install httpd 安装 service httpd start 启动 测试Apache服务器 注意:防火墙 ...
- 9.2.4 .net core 通过ViewComponent封装控件
我们在.net core中还使用了ViewComponent方式生成控件.ViewComponent也是asp.net core的新特性,是对页面部分的渲染,以前PartialView的功能,可以使用 ...
- [转载]windows 7 IIS 7.5 ASP.Net 文件上传大小限制
原文出处: 原文作者:云中岳 原文链接:http://www.cnblogs.com/netlover/archive/2011/07/08/Win7_IIS_Upload.html IS 7 默认文 ...
- 设计模式之单例模式的简单demo
/* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...