layer.js,,,分享一个好用的弹出层
基本属性:
<!DOCTYPE html>
<html>
<head>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="css/layer.css" media="all">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script src="js/layer.js"></script>
</head>
</head>
<body>
<div class="clear box layer-main">
<a href="javascript:;" onclick="test();">点我弹窗</a>
</div>
</body>
<script>
function test() {
//在这里面输入任何合法的js语句
layer.open({
type: 1,
//page层
area: ['70%', '30%'],
title: '弹出框',
shade: 0.6,//遮罩透明度
shadeClose:true,//点击遮罩关闭层
moveType: 1,//拖拽风格,0是默认,1是传统拖动
shift: 1,//0-6的动画形式,-1不开启
fix:true,//不随滚动条滚动,一直在可视区域。
border:[0],
closeBtn:[1,true],
content: '<div style="padding:10px;">这是一个非常普通的页面层,可以传入内容</div>',
btn:['确定','取消']
});
}
</script>
</html>
我是为了测试移动端效果,才加的meta标签,可以去掉。体验pc端的效果。个人感觉pc端效果更好,移动端可以将就这用。
键: 值 | 描述 |
下表的属性都是默认值,您可在调用时按需重新配置,他们可帮助你实现各式各样的风格。如是调用: $.layer({键: 值, 键: 值, …}); | |
type: 0 | 层的类型。0:信息框(默认),1:页面层,2:iframe层,3:加载层,4:tips层。
此为重要参数,不同类型层的总开关,若为type:0则不需要配置,其它类型层在调用时必须设置type。 |
title: '信息' | 控制默认标题栏。 如想自定义标题样式,可以 title: ['标题', 'background:#c00;'] //第二个参数可书写任意css 如不想显示标题栏,配置title: false 即可 |
maxmin: false | 是否输出窗口最小化/全屏/还原按钮。 如需要开启,设置maxmin: true 即可 此功能为layer1.8开始新增 |
offset: ['', ''] | 控制层坐标。 offset的值分别是: [纵坐标, 横坐标],默认为垂直水平居中 如果您要设定纵坐标,可以:offset:['200px', '']/td> |
area: ['310px', '130px'] | 控制层宽高。 area值分别为:[宽度, 高度] 当设置为auto时,意味着采用自适应(iframe层不能设置auto), 对于宽度,并不推荐您设置auto。 |
border: [10, 0.3, '#000'] | 控制层的边框。 border的值分别为:[边框大小, 透明度, 颜色, layer1.8之前需在此处加true] 如果您不想显示border,设置 border: [0] 即可 |
shade: [0.5, '#000'] | 控制遮罩。 值分别是:[遮罩透明度, 遮罩颜色, layer1.8之前需在此处加true] 如果不想显示遮罩,配置shade: [0]即可 |
shadeClose: false | 用来控制点击遮罩区域是否关闭层。 若开启,设为true即可 |
closeBtn: [0, true] | 控制层右上角关闭按钮。 closeBtn的值分别为: [关闭按钮的风格(支持0和1), true] 若不想显示关闭按钮,配置 closeBtn: false即可 |
time: 0 | 自动关闭等待秒数,整数值。 0表示不自动关闭,若3秒后自动关闭,time: 3即可 |
fix: true, | 用于设定层是否不随滚动条而滚动,固定在可视区域。 |
move: '.xubox_title' | 设定某个元素来实现对层的拖拽。 值为:用来拖拽的元素选择器 若不想拖拽,move: false即可 |
moveOut: false | 用于控制层是否允许被拖出可视窗口外 |
moveType: 0 | 用于配置拖拽类型(layer1.7之前版本不支持) 默认为引导式拖动层,若值设为1,则直接拖动层 |
bgcolor: '#fff' | 用于控制层的背景色 如果不想设置任何颜色,设置空字符即可。但是对于type:0的对话框层而言,始终都是白色 |
zIndex: 19891014 | 控制层堆叠顺序(即css的z-index)。整数值。 合理设置它,可以避免与其它插件的层级冲突 |
maxWidth: 400 | 最大宽度。整数值。 当area宽度设为auto时才有用。 |
fadeIn: 300, | 用于控制层渐显弹出(layer1.7之前版本不支持) 值为毫秒数 |
btns: 1, | 按钮的个数。提供了0-2的选择,设置0表示不输出按钮 |
btn: ['确定', '取消'], | [按钮一的文本值 , 按钮二的文本值] 必须btns值大于0才有效 |
shift: '', | 用于控制动画弹出 有七种选择:左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。 如shift:'top' 表示从上动画弹出 |
dialog: { |
信息框层模式提供的私有参数。使用时,按需配置即可 type: 图标类型,提供了0-16的选择,也许有你喜欢的。 设置-1不显示图标 msg: 信息框内容,重要参数 |
page: { |
页面层模式私有参数。 dom: 页面已存在的选择器 html: 直接传入的html字符串。 url: ajax请求地址。 ok: ajax请求完毕后执行的回调,datas是异步传递过来的值。 需要特别注意的是,dom、html、url只需设定其中一个就行,若配置html或url,你必须也配置宽高值。 |
iframe: { |
iframe层模式私有参数。 src: 要打开的网址。 scrolling: 是否允许iframe出现滚动条,默认自动。允许:'yes',不允许:'no' |
loading: { |
加载层私有属性。 type: loading图标类型(提供了0-3的选择)。 一般配合ajax使用 |
tips : { |
tips提示层私有属性。 msg: 提示内容。 follow: 吸附目标选择器。 guide: 指引方向(0:上,1:右,2:下,3:左)。 isGuide: 是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon more: 是否允许多个tips style: [' color:#000; border:1px solid #FF9900; /* 此处可用来自定义tips的css样式 */', '#FF9900']]。 数组第二个值,为三角形的颜色。 |
回调函数 | |
success: function(layero){ } |
层弹出成功后的回调函数. layero是回调传过来的当前层容器的实例,这意味着你可以对当前弹层进行dom操作 |
yes: function(index){} |
按钮一的回调函数 index为当前层的索引,主要用来回调执行后,配合layer.close(index)来关闭层 |
no: function(index){} |
按钮二的回调函数 |
close: function(index){} |
层右上角关闭按钮的点击事件触发回调函数。 |
end: function(){} |
层被彻底关闭后执行的回调函数。 |
moveEnd: function(){} |
拖拽完毕触发的回调函数 |
min: function(layero){}, |
分别为最小化、全屏、还原触发后的回调函数 layero是当前层容器的实例 layer1.8开始新增 |
下面这些是为了凑字数:
<!DOCTYPE html>
<html>
<head>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="css/layer.css" media="all">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script src="js/layer.js"></script>
</head>
</head>
<body>
<div class="clear box layer-main">
<a href="javascript:;" onclick="test();">点我弹窗</a>
</div>
</body>
<script>
function test() {
//在这里面输入任何合法的js语句
layer.open({
type: 1,
//page层
area: ['70%', '30%'],
title: '弹出框',
shade: 0.6,//遮罩透明度
shadeClose:true,//点击遮罩关闭层
moveType: 1,//拖拽风格,0是默认,1是传统拖动
shift: 1,//0-6的动画形式,-1不开启
fix:true,//不随滚动条滚动,一直在可视区域。
border:[0],
closeBtn:[1,true],
content: '<div style="padding:10px;">这是一个非常普通的页面层,可以传入内容</div>',
btn:['确定','取消']
});
}
</script>
</html>
layer.js,,,分享一个好用的弹出层的更多相关文章
- 分享一个ASP.NET的弹出层,比较好用!
网上的一些弹出层的控件多了去了,我很久之前用了一个,效果还不错,但如果应用到ASP.NET的话,会出现“弹出层内的控件runat='server'失效”的情况,具体情况我也不太会描述,但就是那些onc ...
- layer —— 一个简单的jQuery弹出层插件
layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...
- webui-popover 一个轻量级的jquery弹出层插件
该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css js 文件 <link rel="s ...
- 转 js一个简单实用的弹出层
关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...
- layer官方演示与讲解(jQuery弹出层插件)
1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2. ...
- Layer 弹出页面 在点击保存关闭弹出层
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> ...
- 一个简单的div弹出层的小例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js实现鼠标右键自定义菜单(弹出层),并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)
<table class="oa-el-panel-tree"> <tr> <td style="vertical-align: top; ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
随机推荐
- component to string
component to string string to component ObjectTextToBinary ObjectBinaryToText ReadComponent #include ...
- 好用的编辑框布局控件TdxLayoutControl
TdxLayoutControl是编辑框的容器,里面的编辑框可以自动对齐,自由拖放,异常方便.
- oracle学习 七 拼接变量+日期函数(持续更)
select count(KEYCODE) from STHSGDOC.ZJSJJL where ysrq=to_date(to_char(sysdate,'yyyy')||'/1','yyyy/MM ...
- js get 传参 汉字 乱码问题
js encodeURI(encodeURI(searchWord)) java URLDecoder.decode(searchWord,"utf-8")
- C++、GDAL创建shapefile文件
源代码网址:http://download.csdn.net/detail/ivanljf/5834823 一.先贴出第一段代码: #include "ogrsf_frmts.h" ...
- SQL SERVER 2005如何建立自动备份的维护计划
SQL Server 2005中可以使用维护计划来为数据库自动备份,减少数据库管理员的工作负担.其使用方法如下: (1)启动[sql server Management Studio],在[对象资源管 ...
- OC: Block回调的使用demo
Block 的用法 对于类的继承问题,子类在实现的时候,一般是自下而上,先看看下面的实现没有,没实现就向上找方法去实现. // // main.m #import <Foundation/Fou ...
- C++学习之const整理总结
1什么是const? (const类型)常类型是指使用类型修饰符const说明的类型,常类型的变量或对象的值是不能被更新的.(但可以偷梁换柱进行更新) 2为什么引入const? const 推出的初始 ...
- strlen与sizeof的区别 [转]
转自:http://www.cppblog.com/liangbo/archive/2006/10/06/13394.html 1.sizeof操作符的结果类型是size_t,它在头文件中typede ...
- (C++)STL排序函数sort和qsort的用法与区别
主要内容: 1.qsort的用法 2.sort的用法 3.qsort和sort的区别 qsort的用法: 原 型: void qsort(void *base, int nelem, int widt ...