layer:web弹出层解决方案
layer:web弹出层解决方案
一、总结
一句话总结:http://layer.layui.com/
1、layer中弹出层tips的使用(代码)是怎样的?
使用还是比较简单方便的
//tips层-左
layer.tips('左边么么哒', '#id或者.class', {
tips: [4, '#78BA32']
});
二、layer简介
使用原因:
之前用的bootstrap里面的弹出层,但是如果在别的框架要引入bootstrap全套css,但是bootstrapcss会修改默认的p标签等,所以会导致页面混乱,所以需要找新的一款弹出层解决方案。
简介:
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被7283776人次关注)。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。
layer 采用 MIT 开源许可证,将会永久性提供无偿服务。因着数年的坚持维护,截至到2017年9月13日,已运用在超过 30万 家 Web 平台,其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案,并且她仍在与 Layui 一并高速发展。Fly
大小也只有45k
三、jquery 弹窗插件 layer
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="layer.min.js"></script> </head>
<body>
<input type="button" class="testBtn" value="click me">
<script type="text/javascript">
/*layer.alert('白菜级别前端攻城师贤心', 1);*/
/*layer.confirm('白菜级别前端攻城师贤心', 8);*/
/*layer.load('加载中……',4);*/
/*$.layer({
shade : [0], //不显示遮罩
area : ['auto','auto'],
dialog : {
msg:'您是如何看待前端开发?',
btns : 2,
type : 4,
btn : ['重要','奇葩'],
yes : function(){
//layer.msg('您选择了重要。',2,1);
layer.closeAll();
},
no : function(){
layer.msg('奇葩!!!',2,4);
}
}
});*/
$('.testBtn').on('click',function(){
layer.tips('tips的样式并非是固定的,您可自定义外观。', this, {
style: ['background-color:#E227C7; color:#fff', '#E227C7'],
maxWidth:185,
closeBtn:[0,true] //显示关闭按钮
});
}) </script>
</body>
</html>
常见接口如下:
方法名 | 描述 |
$.layer({}) | 核心接口,参数是一个对象,对象属性参见上述列表。诸如layer.alert()之类的为$.layer()的包装方法。 |
layer.v | 获取版本号。 |
layer.ready(callback) | layer中的样式文件装载完毕后执行的方法,一般用于页面加载时调用layer,这样可避免样式未加载即调用层导致的错乱。 示例:
layer.ready(function(){ |
layer.alert() | 对单按钮信息框的重新封装,layer.alert(alertMsg , alertType, alertTit , alertYes),四个参数,alertMsg:信息内容(文本),alertType:提示图标(整数,0-10的选择),alertTit:标题(文本),alertYes:按钮的回调函数。 如:layer.alert('前端攻城师贤心') |
layer.confirm() | 对询问框的重新封装,layer.confirm(conMsg , conYes , conTit , conNo),四个参数,conMsg:信息内容(文本),conYes:按钮一回调,conTit:标题(文本),conNo:按钮二的回调。
如: layer.confirm('确定删除?', function(){ |
layer.msg() | 对无标题栏信息框层的重新封装,layer.msg(msgText, msgTime, parme),三个参数,1.7.0开始对参数做了多重判断,msgText:信息内容(文本),msgTime:自动关闭所需等待秒数(默认2秒),如果parme是一个数字,则将作为msg的图标参数,如果parme是一个函数,则将作为层消失后的end的回调,如果parme是一个object,您可配置{type:图标类型,shade:false//是否遮罩,如果是,不用配置,rate:'top'//弹出的动画类型,具体值见layer.shift的参数说明} |
layer.tips() | 对tips层的重新封装,layer.tips(html, follow, parme),三个参数,html:信息内容(文本),follow:触发事件对应的选择器,parme是一个对象,其中包含了{time:自动关闭所需等待秒数, maxWidth:最大宽度, guide:指引方向, style: tips样式(参加api表格一中的style属性)}
如: $('.demo').click(function(){ |
layer.load(parme, loadIcon) | 对加载层的重新封装,如果你想在loading中附加一些文字的话,您可以这样:layer.load('加载中'); 如果parme是一个数字,意味着parme为自动关闭所需最长等待秒数(0时则不自动关闭),loadIcon:加载图标(整数,0-3的选择)如:layer.load(0, 1); |
layer.area(index, options) | 用于重定义指定层的宽高、坐标、z-index等。index为层的索引,options包含{width:'',height:'',top:'',left:'',zIndex:''}等css属性。该方法仅针对页面层(type:1)和iframe层(type:2)有效; 此方法为1.6.0开始新增 |
layer.index | 静态属性,用于获取最近一次触发的层索引值 |
layer.getChildFrame(selector, index) | 获取子iframe中的DOM。非常实用,父窗口操作iframe中内容时可以大显神威。index参数为1.6.0开始新增,由于允许弹出多个iframe层,所以需借助index索引来操作指定层 |
layer.getFrameIndex(window.name) | 获取当前所在iframe层的索引。 只允许在iframe页面内部调用。如在内部关闭自身:
var i = parent.layer.getFrameIndex(window.name); |
layer.close(index) | 用于手动关闭层。参数为layer的索引值。索引即通过弹出方法返回的值。如:
var i = $.layer({}); //或者 var i = layer.alert();之类的也可返回索引 |
layer.closeAll() | 用于关闭所有层,在多层模式时也许会用到 |
layer.shift(type , rate) | layer弹出时内置动画,在success回调中使用。type:动画类型,供七种选择,左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。 rate:动画频率,毫秒。 如: success : function(){ |
layer.autoArea(index) | 用来处理在层中宽高改变时,重新自适应层宽高。必填参数为层的索引值 |
layer.iframeAuto(index) | 用于让iframe层自适应。非常实用,如果是在iframe层内部,则可通过var index = layer.getFrameIndex (window.name)得到;若在父页面,则可通过调用iframe层的返回值得到,如var index = $.layer(); 详见官网实例演示之iframe子父操作。 |
layer.setMove() | 当拖拽元素改变时,可用此方法重新初始化拖拽。 |
layer.zIndex | 全局属性,用于获取layer容器中的最大z-index值 |
layer.setTop(layerNow) | 引用此方法可开启点击使当前窗口置顶功能,只能用于用在success回调中,layerNow参数即为success回调函数中传过来 的参数,即当前layer容器。type:1/type:2多窗口模式时可能非常实用,当需要时,需配置zIndex:layer.zIndex,可详见[实力加强版]一页的例子:[页面层]之无限层中层 |
layer.path | 静态属性一枚,获取当前layer的存放路径。 |
layer.use(module, callback) | 载入一个模块,支持载入js、css,当你试图给layer拓展个js模块时,用它会更高大上不是么。如载入一个js:layer.use('extend/layer.ext.js', function(){}); 详细参考layer.ext.js |
参数说明如下:
键: 值 | 描述 |
type : 0, | 层的类型。0:信息框(默认),1:页面层,2:iframe层,3:加载层,4:tips层。
此为重要参数,不同类型层类型的总开关,调用时必须设置。 |
shade : [0.5 , '#000' , true] | 控制遮罩。0.5:遮罩透明度,'#000':遮罩颜色,true:是否遮罩(否:false) |
shadeClose : false | 用来控制点击遮罩区域是否关闭层。(是:true)。 |
fix : true, | 层是否固定在可视区域。否:false |
fadeIn: 300, | (1.7.0重新新增,1.4.*貌似也有),用于层的渐显,值为毫秒数 |
move : ['.xubox_title' , true] | 通过拖拽层的某个元素来实现对层的拖拽。'.xubox_title':拖拽绑定事件所在元素选择器(默认为标题栏),true:是否允许拖拽(否:false) |
moveOut : false | 用于控制层是否允许被拖出可视窗口外,false:不允许,true:允许 |
moveType: 0 | (1.7.0新增)用于配置拖拽类型,默认为空心方块式拖动层,若值设为1,则直接拖动层 |
title : '信息' | 控制标题栏。不想显示标题栏,配置title:false 即可 |
offset : ['220px' , '50%'] | 控制层坐标。'220px':纵坐标,'50%':横坐标。 需要注意的是,像素必须带px单位,百分比不需要。该参数灵活运用,可助你实现诸多特效。 |
area : ['310px' , 'auto'] | 控制层宽高。'310px':宽,'auto':高。 当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐您这样做。 |
closeBtn : [0 , true] | 控制层右上角关闭按钮。0:关闭按钮风格(1:风格2),当标题栏不存在时,自动切换为风格2。 true:是否显示关闭按钮(否:false) |
time : 0 | 自动关闭等待秒数,整数值。也许它可以助你做蛮多事,想象一下吧。 |
bgcolor : '#fff' | 用于控制层的背景色,默认白色(#fff),如设置透明,设置空字符即可。 |
border : [10 , 0.3 , '#000', true] | 10:边框大小,0.3:边框透明度,'#000':边框颜色,true:是否显示边框(否:false)。通过它您可以任意配置边框,譬如你觉得边框碍眼,赶紧启用[0,0,'',false]吧 |
zIndex : 19891014 | 控制层堆叠顺序(z-index)。整数值,默认是贤心的生日。合理设置它,可以避免与其它插件的层级冲突 |
maxWidth : 400 | 最大宽度。整数值。当宽度设为auto时才有用。 |
dialog: { |
信息框层模式提供的私有参数。使用时,按需配置即可 btns : 按钮的个数。提供了0-2的选择 btn : [按钮一的文本值 , 按钮二的文本值] type : 图标类型,提供了0-15的选择,也许有你喜欢的。 设置-1不显示图标(1.6.0) msg : 信息框内容,重要参数 yes : 按钮一的回调函数 no : 按钮二的回调函数 |
page: { |
页面层模式私有参数。dom:需要弹出的html片段所对应的选择器(class 或 id,推荐用id,确保唯一)。html: 自定义html字符串。url:ajax请求地址。ok,ajax请求完毕后执行的回调。需要注意的是,优先级是:html>url>dom,这意味着,当你一旦配置了html的非空值,将优先采用html中的元素弹出,如此类推,若配置html或url,你必须也配置宽高值。html参数为layer-v1.5.1开始新增。url和ok为1.6.0开始新增 |
iframe: { |
iframe层模式私有参数。src:要打开的网址。使用率非常高,尤其是对于喜欢用iframe的同学。 |
loading : {type : 0} | 加载层私有属性。type:loading图标类型(提供了0-3的选择,试试吧,看看有无你喜欢的)。一般配合ajax使用 |
tips : { |
tips小提示层私有属性。 msg:提示内容。 follow:触发事件对应的选择器。 guide:指引方向(0:上,1:右,2:下,3:左)。 isGuide:是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon [自定义样式示例] style: ['background-color:#FFF8ED; color:#000; border:1px solid #FF9900', '#FF9900']]。 layer-v1.7.0开始,对tips有了更为完善的支持,提供了上、右、下、左模式,可智能识别指引方向。 |
success : function(layer){} | 层弹出成功后的回调函数 |
close : function(index){} | 层右上角关闭按钮的回调函数。 |
end : function(){} | 层被彻底关闭后执行的回调函数。它的存在让close回调成为浮云。 |
moveEnd : function(){} | 拖拽时鼠标按键放下后的回调函数 |
官网:http://sentsin.com/jquery/layer/
layer:web弹出层解决方案的更多相关文章
- jQuery、layer实现弹出层的打开、关闭功能实例详解
本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...
- layer/layui弹出层插件bug
<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...
- 获取layer.open弹出层的返回值
正在开发的车联网项目用到了layer API.当我在开发“新建电子围栏”的时候需要弹出地图,用户在地图中画一个区域,最后将这个弹出层的数据返回给原页面.下面是我的实现过:程: 触发弹出层的代码: la ...
- layer关闭弹出层,弹出打印
常规的话,下面能够完成关闭弹出层 var index = parent.layer.getFrameIndex(window.name); //延迟关闭 解决打印窗口弹不出来的情况 parent.la ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- 原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
- jQuery Layer mobile 弹出层
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...
- layer关闭弹出层总结
//关闭方法1 layer提供了5种层类型.可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层). 若你采用layer.open({type: 1})方式调用, ...
- layer关闭弹出层返回值到父页面
1.首先在父页面定义一个空间,Id=layerResult 然后 layer.open({ type: , title: '选择看课件', shadeClose: true, shade: 0.8, ...
随机推荐
- 28.STL常用算法
#include <algorithm> 算法 常用版本 描述 返回Type std::find() find(_InIt _Fisrt,_InIt _Last, _Ty& _Va ...
- POJ 3187 全排列+杨辉三角(组合数)
思路: next_permutation()加个递推组合数随便搞搞就A了- //By SiriusRen #include <cstdio> #include <algorithm& ...
- SpringMVC后台使用对象接受参数字符串转日期
在springMVC配置文件中加入: <bean id="dateConvert" class="com.iomp.util.DateConvert"/& ...
- Android-加载大图,照片墙的实现
照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影.它的设计思路其实也非常简单,用一个GridView控件当作“墙”,然后随着GridView的滚动将一张张照片贴在“墙”上, ...
- 机器学习(七) PCA与梯度上升法 (上)
一.什么是PCA 主成分分析 Principal Component Analysis 一个非监督学的学习算法 主要用于数据的降维 通过降维,可以发现更便于人类理解的特征 其他应用:可视化:去噪 第一 ...
- CentOS6.9下ssh密钥登录配置步骤(免密码登录)和ssh-keygen 命令常用参数
密钥登录步骤(免密码登录)ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一种,出于安全方面的考虑,介绍密钥认证方式登录到linux/unix的方 ...
- DedeCMS文章编辑不更新时间1970年1月1日
在修改文章或者后期优化的时候,织梦dedecms5.7版本存在一个问题,修改文章的同时也修改了文章的发布时间,这个功能可能有些人比较需要,但同时也有些站长朋友又不需要,因为我们编辑某个文章的时候,发现 ...
- 洛谷2863 [Usaco06JAN]牛的舞会
题目描述 约翰的N (2 <= N <= 10,000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别 上鲜花,她们要表演圆舞. 只有奶牛才能表演这种圆舞.圆舞需要一些绳索和一 ...
- ActiveMQ学习总结(8)——消息队列设计精要
消息队列已经逐渐成为企业IT系统内部通信的核心手段.它具有低耦合.可靠投递.广播.流量控制.最终一致性等一系列功能,成为异步RPC的主要手段之一. 当今市面上有很多主流的消息中间件,如老牌的Activ ...
- HTML学习----------DAY2第四节
HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...