layer弹出信息框API
首先向大家推荐layer,在这里也非常感谢贤心的贡献,非常不错的信息框及弹出层解决方案,为一些项目的前端开发提高了很大的效率,希望layer 越办越好!
下面是API,呵呵,官方抄袭过来的,为了自己看着方便。
| layer API之键值(仅在需要时配置,未配置的会用默认) | ||
|---|---|---|
| 键 : 值 | 描述 | |
| skin : 0 | 层的皮肤编号,值为整数型。目前默认只提供一种皮肤,当你按照样式规则新增皮肤时(详见skin/layer.css),你可配置该参数。 | |
| 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 | |
| move : ['.xubox_title' , true] | 控制层拖拽。’.xubox_title’:拖拽绑定事件所在元素选择器(默认为标题栏),true:是否允许拖拽(否:false) | |
| title : ['信息' , true] | 控制标题栏。’信息’:标题栏文字,true:是否显示标题栏(否:false) | |
| offset : ['220px' , '50%'] | 控制层坐标。’220px’:纵坐标,’50%’:横坐标。 需要注意的是,像素必须带px单位,百分比不需要。该参数灵活运用,可助你实现诸多特效。 | |
| area : ['310px' , 'auto'] | 控制层宽高。’310px’:宽,’auto’:高。 当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐您这样做。 | |
| closeBtn : [0 , true] | 控制层右上角关闭按钮。0:关闭按钮风格(1:风格2),当标题栏不存在时,自动切换为风格2。 true:是否显示关闭按钮(否:false) | |
| time : 0 | 自动关闭等待秒数,整数值。也许它可以助你做蛮多事,想象一下吧。 | |
| border : [10 , 0.3 , '#000', true] | 10:边框大小,0.3:边框透明度,’#000′:边框颜色,true:是否显示边框(否:false)。通过它您可以任意配置边框,譬如你觉得边框碍眼,赶紧启用[0,0,'',false]吧 | |
| zIndex : 19891014 | 控制层堆叠顺序(z-index)。整数值,默认是贤心的生日。合理设置它,可以避免与其它插件的层级冲突 | |
| maxWidth : 400 | 最大宽度。整数值。当宽度设为auto时才有用。 | |
| fadeIn : [300 , false] | 控制层的渐显。300:渐显频率,false:是否开启渐显(默认不开启,true:开启) 从来都觉得这参数形同虚设。 | |
dialog: {
|
信息框层模式提供的私有参数。使用时,按需配置即可
btns : 按钮的个数。提供了0-2的选择 btn : [按钮一的文本值 , 按钮二的文本值] type : 图标类型,提供了0-10的选择,也许有你喜欢的。 msg : 信息框内容,重要参数 yes : 按钮一的回调函数 no : 按钮二的回调函数 |
|
page: {
|
页面层模式私有参数。dom:需要弹出的html片段所对应的选择器(class 或 id,推荐用id,确保唯一)。需要注意的是,html优先级高于dom,这意味着,当你一旦配置了html的非空值,将优先采用html中的元素弹出,并且不支持area的自适应模式,你必须配置宽高值。html参数为layer-v1.5.1开始新增。 | |
iframe: {
|
iframe层模式私有参数。src:要打开的网址。使用率非常高,尤其是对于喜欢用iframe的同学。 | |
| loading : {type : 0} | 加载层私有属性。type:loading图标类型(提供了0-3的选择,试试吧,看看有无你喜欢的)。一般配合ajax使用 | |
tips : {
|
tips小提示层私有属性。msg:提示内容,follow:触发事件对应的选择器。 guide:指引方向(0:上下,1:左右)。[自定义样式示例] style: ['background-color:#FFF8ED; color:#000; border:1px solid #FF9900', '#FF9900']]。layer-v1.5.1开始,对tips逐渐有了较为完善的支持,提供了上下和左右模式,可智能识别指引方向。 | |
| success : function(layer){} | 层弹出成功后的回调函数 | |
| close : function(index){} | 层右上角关闭按钮的回调函数。 | |
| end : function(){} | 层被彻底关闭后执行的回调函数。它的存在让close回调成为浮云。 | |
| layer API之内置方法 | ||
|---|---|---|
| 方法名 | 描述 | |
| $.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 , msgType , callback),四个参数,msgText:信息内容(文本),msgTime:自动关闭所需等待秒数(默认2秒),msgType:提示图标(整数,0-10的选择),callback:自动销毁后的回调函数。如:layer.msg(‘嗨,伙计,我是layer’) | |
| layer.tips() | 对tips层的重新封装,layer.tips(html , follow , time , maxWidth, guide, style),四个参数,html:信息内容(文本),follow:触发事件对应的选择器,time:自动关闭所需等待秒数,maxWidth:最大宽度,guide: 0(上下模式)或者1(左右模式) style: tips样式(参加api表格一中的style属性)如:
$('.demo').click(function(){
|
|
| layer.load() | 对加载层的重新封装,layer.load(loadTime , loadgif , loadShade),三个参数,loadTime:自动关闭所需等待秒数(0时则不自动关闭),loadgif:加载图标(整数,0-3的选择),loadShade:是否遮罩(true 或 false)。如:layer.load(0); | |
| layer.getChildFrame(selector) | 获取子iframe中的DOM。非常实用,父窗口操作iframe中内容时可以大显神威。如:layer.getChildFrame(‘body’).html() //得到iframe的body的全部html元素 | |
| layer.getFrameIndex() | 获取iframe层的索引。 如在iframe页中关闭自身:
var i = parent.layer.getFrameIndex(); |
|
| layer.close(index) | 用于手动关闭层。参数为layer的索引值。索引即通过弹出方法返回的值。如:
var i = $.layer({}); //或者 var i = layer.alert();之类的也可返回索引
|
|
| layer.shift(type , rate) | layer弹出时内置动画,type:动画类型,供四种中选择,左上:’left-top’,右上:’right-top’,左下:’left-bottom’,右下:’right-bottom’ 。 rate:动画频率,毫秒。 如:
success : function(){
|
|
| layer.autoArea(index) | 用来处理在层中宽高改变时,重新自适应层宽高。必填参数为层的索引值 | |
| layer.iframeAuto() | 用于让iframe层自适应。非常实用,详见官网实例演示之iframe子父操作。 | |
| layer.setMove() | 当拖拽元素改变时,可用此方法重新初始化拖拽。 | |
自由转载,转载请注明: 转载自WEB开发笔记 www.chhua.com
本文链接地址: layer弹出信息框API http://www.chhua.com/web-note4188
layer弹出信息框API的更多相关文章
- Windows Shell编程之如何编写为文件对象弹出信息框的Shell扩展
有关COM编程资料 转载:http://www.cnblogs.com/lzjsky/archive/2010/11/22/1884702.html 活动桌面引入一项新特性, 当你在某些特定对象上旋停 ...
- delphi弹出信息框大全
1. 警告信息框 MessageBox(Handle,'警告信息框','警告信息框',MB_ICONWARNING);2.疑问信息框 MessageBox(Handle,'疑问信息框','疑问信息框' ...
- delphi弹出信息框大全(转载)
1. 警告信息框 MessageBox(Handle,'警告信息框','警告信息框',MB_ICONWARNING); 2.疑问信息框 MessageBox(Handle,'疑问信息框','疑问信息框 ...
- winform C#屏幕右下角弹出消息框并自动消失
①弹出信息框后慢慢下降消失 在主窗体中新增按钮重命名为btnShowAndDisappearMessages,在click事件中写如下代码: private void btnShowAndDisapp ...
- C#中三种弹出信息窗口的方式
弹出信息框,是浏览器客户端的事件.服务器没有弹出信息框的功能. 方法一: asp.net页面如果需要弹出信息框,则需要在前台页面上注册一个javascript脚本,使用alert方法.使用Client ...
- HTML页面使用layer弹出框输入数据
javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果.详细介绍http://layer.layui.com/ 部署:将laye ...
- layer弹出框确定前验证:弹出消息框(弹出两个layer)
作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...
- javascript的alert()的消息框不弹出或者弹出信息有误
有时不知道什么,有时javascript的alert()的消息框不弹出或者弹出信息有误,代码是这么写的: //提示信息 public static void alert(TemplateControl ...
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
随机推荐
- 快速Android开发系列网络篇之Volley
Volley是Google推出的一个网络请求库,已经被放到了Android源码中,地址在这里,先看使用方法 RequestQueue mRequestQueue = Volley.newRequest ...
- JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- windows下获取IP地址的两种方法
windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...
- 存储程序(1)——MYSQL
MySQL支持把几种对象存放在服务器端供以后使用.这几种对象有一些可以根据情况通过程序代码调用,有一些会在数据表被修改时自动执行,还有一些可以在预定时刻自动执行.它们包括以下几种: 1.存储函数(st ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(13)-系统日志和异常的处理③
系列目录 上一节我们讲了如何捕获异常和记录日志,这一节我们讲,没有捕获的或者忘记捕获的异常包括404错误等,我们统一处理这个异常. 这一讲是利用 Application_Error 捕获所有异常,全局 ...
- ASP.NET Core管道深度剖析[共4篇]
之所以称ASP.NET Core是一个Web开发平台,源于它具有一个极具扩展性的请求处理管道,我们可以通过这个管道的定制来满足各种场景下的HTTP处理需求.ASP. NET Core应用的很多特性,比 ...
- Linux平台 Oracle 11gR2 RAC安装Part1:准备工作
一.实施前期准备工作 1.1 服务器安装操作系统 1.2 Oracle安装介质 1.3 共享存储规划 1.4 网络规范分配 二.安装前期准备工作 2.1 各节点系统时间校对 2.2 各节点关闭防火墙和 ...
- C语言之链表list
#include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <string.h& ...
- ASP.NET Core 中文文档 第二章 指南(5) 在 Nano Server 上运行ASP.NET Core
原文 ASP.NET Core on Nano Server 作者 Sourabh Shirhatti 翻译 娄宇(Lyrics) 校对 刘怡(AlexLEWIS).许登洋(Seay).谢炀(kile ...
- 使用 Windows Phone Toolkit 的 Tilt 效果
上一篇文章分享了如何使控件具有摁下的效果(在WindowsPhone中使控件具有Tilt效果),实现方式是在项目中添加新的类文件,其实,如果项目引用了Windows Phone Toolkit,那么就 ...