WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
弹层组件 - wui.layer 更多 layer 示例

模块加载名称:layer
通过wui.use('layer', callback) 加载 layer 模块,然后就可以直接使用了,就像下面这样简单。
wui.use('layer', function(){
  var layer = wui.layer;

  layer.msg('hello');
}); 
特别说明:事件需自己绑定,以下只展现调用代码。

//初体验

layer.alert('内容')

//第三方扩展皮肤

layer.alert('内容', { icon: 1, skin: 'layer-ext-moon' //关于皮肤的扩展规则,查看下面具体界绍 })

//询问框

layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, function(){ layer.msg('的确很重要', {icon: 1}); }, function(){ layer.msg('也可以这样', { time: 20000, //20s后自动关闭 btn: ['明白了', '知道了'] }); });

//提示层

layer.msg('玩命提示中');

//墨绿深蓝风

layer.alert('墨绿风格,点击确认看深蓝', { skin: 'wui-layer-molv' //样式类名 ,closeBtn: 0 }, function(){ layer.alert('偶吧深蓝style', { skin: 'wui-layer-lan' ,closeBtn: 0 ,anim: 4 //动画类型 }); });

//捕获页

layer.open({ type: 1, shade: false, title: false, //不显示标题 content: $('.notice'), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响 cancel: function(){ layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6}); } });

//页面层

layer.open({ type: 1, skin: 'wui-layer-rim', //加上边框 area: ['420px', '240px'], //宽高 content: 'html内容' });

//自定页

layer.open({ type: 1, skin: 'wui-layer-demo', //样式类名 closeBtn: 0, //不显示关闭按钮 anim: 2, shadeClose: true, //开启遮罩关闭 content: '内容' });

//tips层

layer.tips('Hi,我是tips', '吸附元素选择器,如#id');

//iframe层

layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: '/' //iframe的url });

//iframe窗

layer.open({ type: 2, title: false, closeBtn: 0, //不显示关闭按钮 shade: [0], area: ['340px', '215px'], offset: 'rb', //右下角弹出 time: 2000, //2秒后自动关闭 anim: 2, content: ['/wui/examples/guodu.html', 'no'], //iframe的url,no代表不显示滚动条 end: function(){ //此处用于演示 layer.open({ type: 2, title: '很多时候,我们想最大化看,比如像这个页面。', shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: ['893px', '600px'], content: '/' }); } });

//加载层

var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2

//loading层

var index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 });

//小tips

layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', { tips: [1, '#3595CC'], time: 4000 });

//prompt层

layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){ layer.close(index); layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){ layer.close(index); layer.msg('演示完毕!您的口令:'+ pass +'<br>您最后写下了:'+text); }); });

//tab层

layer.tab({ area: ['600px', '300px'], tab: [{ title: 'TAB1', content: '内容1' }, { title: 'TAB2', content: '内容2' }, { title: 'TAB3', content: '内容3' }] });

//相册层

$.getJSON('/wui/examples/photos.html', function(json){ layer.photos({ photos: json //格式见API文档手册页 ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机 }); });

//信息框-例1

layer.alert('见到你真的很高兴', {icon: 6});

//信息框-例2

layer.msg('你确定你很帅么?', { time: 0 //不自动关闭 ,btn: ['必须啊', '丑到爆'] ,yes: function(index){ layer.close(index); layer.msg('雅蠛蝶 O.o', { icon: 6 ,btn: ['嗷','嗷','嗷'] }); } });

//信息框-例3

layer.msg('这是最常用的吧');

//信息框-例4

layer.msg('不开心。。', {icon: 5});

//信息框-例5

layer.msg('玩命卖萌中', function(){ //关闭后的操作 });

//页面层-自定义

layer.open({ type: 1, title: false, closeBtn: 0, shadeClose: true, skin: 'yourclass', content: '自定义HTML内容' });

//页面层-图片

layer.open({ type: 1, title: false, closeBtn: 0, area: ['auto'], skin: 'wui-layer-nobg', //没有背景色 shadeClose: true, content: $('#tong') });

//iframe层-父子操作

layer.open({ type: 2, area: ['700px', '450px'], fixed: false, //不固定 maxmin: true, content: '/wui/examples/iframe.html' });

//iframe层-多媒体

layer.open({ type: 2, title: false, area: ['630px', '360px'], shade: 0.8, closeBtn: 0, shadeClose: true, content: '//player.youku.com/embed/XMjY3MzgzODg0' }); layer.msg('点击任意处关闭');

//iframe层-禁滚动条

layer.open({ type: 2, area: ['360px', '500px'], skin: 'wui-layer-rim', //加上边框 content: ['/', 'no'] });

//加载层-默认风格

layer.load(); //此处演示关闭 setTimeout(function(){ layer.closeAll('loading'); }, 2000);

//加载层-风格2

layer.load(1); //此处演示关闭 setTimeout(function(){ layer.closeAll('loading'); }, 2000);

//加载层-风格3

layer.load(2); //此处演示关闭 setTimeout(function(){ layer.closeAll('loading'); }, 2000);

//加载层-风格4

layer.msg('加载中', { icon: 16 ,shade: 0.01 });

//打酱油

layer.msg('尼玛,打个酱油', {icon: 4});

//tips层-上

layer.tips('上', '#id或者.class', { tips: [1, '#0FA6D8'] //还可配置颜色 });

//tips层-右

layer.tips('默认就是向右的', '#id或者.class');

//tips层-下

layer.tips('下', '#id或者.class', { tips: 3 });

//tips层-左

layer.tips('左边么么哒', '#id或者.class', { tips: [4, '#78BA32'] });

//tips层-不销毁之前的

layer.tips('不销毁之前的', '#id或者.class', { tipsMore: true });

//默认prompt

layer.prompt(function(val, index){ layer.msg('得到了'+val); layer.close(index); });

//屏蔽浏览器滚动条

layer.open({ content: '浏览器滚动条已锁', scrollbar: false });

//弹出即全屏

var index = layer.open({ type: 2, content: '/', area: ['320px', '195px'], maxmin: true }); layer.full(index);

//正上方

layer.msg('灵活运用offset', { offset: 't', anim: 6 }); //更多例子 layer.msg('Hi');
我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的 content 和 time 即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要所有都去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。 类型:Number,默认:0
layer 提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外) 类型:String/Array/Boolean,默认:'信息'
title 支持三种类型的值,若你传入的是普通的字符串,如 title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以 title: ['文本', 'font-size:18px;'],数组第二项可以写任意 css 样式;如果你不想显示标题栏,你可以 title: false 类型:String/DOM/Array,默认:''
content 可传入的值是灵活多变的,不仅可以传入普通的 html 内容,还可以指定 DOM,更可以随着 type 的不同而不同。譬如:
/!*
 如果是页面层
 */
layer.open({
  type: 1,
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意,如果str是object,那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2,
  content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
});
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});  
类型:String,默认:''
skin 不仅允许你传入 layer 内置的样式 class 名,还可以传入您自定义的 class 名。这是一个很好的切入点,意味着你可以借助 skin 轻松完成不同的风格定制。目前 layer 内置的 skin 有:wui-layer-lan wui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子
//单个使用
layer.open({
  skin: 'demo-class'
});
//全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
layer.config({
  skin: 'demo-class'
})
//CSS
body .demo-class .wui-layer-title{background:#c00; color:#fff; border: none;}
    body .demo-class .wui-layer-btn{border-top:1px solid #E9E7E7}
    body .demo-class .wui-layer-btn a{background:#333;}
    body .demo-class .wui-layer-btn .wui-layer-btn1{background:#999;}
    …
加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。
类型:String/Array,默认:'auto'
在默认状态下,layer 是宽高都自适应的,但当你只想定义宽度时,你可以 area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以 area: ['500px', '300px'] 类型:String/Array,默认:垂直水平居中
offset 默认情况下不用设置。但如果你不想垂直水平居中,你还可以进行以下赋值:
备注
offset: 'auto' 默认坐标,即垂直水平居中
offset: '100px' 只定义top坐标,水平保持居中
offset: ['100px', '50px'] 同时定义top、left坐标
offset: 't' 快捷设置顶部坐标
offset: 'r' 快捷设置右边缘坐标
offset: 'b' 快捷设置底部坐标
offset: 'l' 快捷设置左边缘坐标
offset: 'lt' 快捷设置左上角
offset: 'lb' 快捷设置左下角
offset: 'rt' 快捷设置右上角
offset: 'rb' 快捷设置右下角
icon - 图标。信息框和加载层的私有参数
类型:Number,默认:-1(信息框)/0(加载层)
信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入 0-2。如:
//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载
类型:String/Array,默认:'确认'
信息框模式时,btn 默认是一个确认按钮,其它层类型则默认不显示,加载层和 tips 层则无效。当您只想自定义一个按钮时,你可以 btn: '我知道了',当你要定义两个按钮时,你可以 btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是 yes,而从按钮2开始,则回调为 btn2: function(){},以此类推。如:
//eg1
layer.confirm('纳尼?', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

//eg2
layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调

    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调

    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){
    //右上角关闭回调

    //return false 开启该代码可禁止点击该按钮关闭
  }
});
类型:String,默认:r
你可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。该参数可支持的赋值如下:
备注
btnAlign: 'l' 按钮左对齐
btnAlign: 'c' 按钮居中对齐
btnAlign: 'r' 按钮右对齐。默认值,不用设置
类型:String/Boolean,默认:1
layer 提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则 closeBtn: 0 类型:String/Array/Boolean,默认:0.3
即弹层外区域。默认是 0.3 透明度的黑色背景('#000')。如果你想定义别的颜色,可以 shade: [0.8, '#393D49'];如果你不想显示遮罩,可以 shade: 0 类型:Boolean,默认:false
如果你的 shade 是存在的,那么你可以设定 shadeClose 来控制点击弹层外区域关闭。 类型:Number,默认:0
默认不会自动关闭。当你想自动关闭时,可以 time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒) 类型:String,默认:空字符
设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式 类型:Number,默认:0
我们的出场动画全部采用 CSS3。这意味着除了 ie6-9,其它所有浏览器都是支持的。目前 anim 可支持的动画类型有 0-6 如果不想显示动画,设置 anim: -1 即可。
备注
anim: 0 平滑放大。默认
anim: 1 从上弹出
anim: 2 从右弹出
anim: 3 从左弹出
anim: 4 从下弹出
anim: 5 渐显
anim: 6 抖动
anim: 7 从最右往左滑入
anim: 8 从最左往右滑入
anim: 9 从最下往上滑入
anim: 10 从最上往下滑入
anim: 11 从左翻滚
类型:Boolean,默认:true
默认情况下,关闭层时会有一个过度动画。如果你不想开启,设置 isOutAnim: false 即可 类型:Boolean,默认:false
该参数值对 type:1 和 type:2 有效。默认不显示最大小化按钮。需要显示配置 maxmin: true 即可 类型:Boolean,默认:true
即鼠标滚动时,层是否固定在可视区域。如果不想,设置 fixed: false 即可 类型:Boolean,默认:true
默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false 即可。该参数对 loading、tips 层无效 类型:Function,默认:null
当你拖拽弹层右下角对窗体进行尺寸调整时,如果你设定了该回调,则会执行。回调返回一个参数:当前层的DOM对象
resizing: function(layero){
  console.log(layero);
}
类型:Boolean,默认:true
默认允许浏览器滚动,如果设定 scrollbar: false,则屏蔽 类型:Number,默认:360
请注意:只有当area: 'auto'时,maxWidth的设定才有效。 类型:Number,默认:无
请注意:只有当高度自适应时,maxHeight的设定才有效。 类型:,默认:20000000
一般用于解决和其它组件的层叠冲突。 类型:String/DOM/Boolean,默认:'.wui-layer-title'
默认是触发标题区域拖拽。如果你想单独定义,指向元素的选择器或者DOM即可。如 move: '.mine-move'。你还配置设定 move: false 来禁止拖拽 类型:Boolean,默认:false
默认只能在窗口内拖拽,如果你想让拖到窗外,那么设定 moveOut: true 即可 类型:Function,默认:null
默认不会触发 moveEnd,如果你需要,设定 moveEnd: function(layero){} 即可。其中 layero 为当前层的DOM对象 类型:Number/Array,默认:2
tips 层的私有参数。支持上右下左四个方向,通过1-4进行方向设定。如 tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定 tips: [1, '#c00'] 类型:Boolean,默认:false
允许多个意味着不会销毁之前的 tips 层。通过 tipsMore: true 开启 类型:Function,默认:null
当你需要在层创建完毕时即执行一些语句,可以通过该回调。success 会携带两个参数,分别是当前层DOM当前层索引。如:
layer.open({
  content: '测试回调',
  success: function(layero, index){
    console.log(layero, index);
  }
});
类型:Function,默认:null
该回调携带两个参数,分别为当前层索引、当前层DOM对象。如:
layer.open({
  content: '测试回调',
  yes: function(index, layero){
    //do something
    layer.close(index); //如果设定了yes回调,需进行手工关闭
  }
});
类型:Function,默认:null
该回调携带两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero),默认会自动触发关闭。如果不想关闭,return false 即可,如;
cancel: function(index, layero){
  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
    layer.close(index)
  }
  return false;
}
类型:Function,默认:null
无论是确认还是取消,只要层被销毁了,end 都会执行,不携带任何参数。 类型:Function,默认:null
携带一个参数,即当前层DOM 这是一个可以重要也可以不重要的方法,重要的是,它的权利真的很大,尤其是在模块化加载 layer 时,你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块,甚至还可以决定整个弹层的默认参数。而说它不重要,是因为多数情况下,你会发现,你似乎不是那么十分需要它。但你真的需要认识一下这位伙计。
如果您是采用 seajs 或者 requirejs 加载 layer,你需要执行该方法来完成初始化的配置。比如:
layer.config({
  path: '/res/layer/' //layer.js所在的目录,可以是绝对目录,也可以是相对目录
});
//这样的话,layer就会去加载一些它所需要的配件,比如css等。
//当然,你即便不用seajs或者requirejs,也可以通过上述方式设定路径
如果你是采用 <script src="?a.js&layer.js"> 这种合并的方式引入 layer,那么您需要在 script 标签上加一个自定义属性 merge="true"。如:
<script src="?a.js&layer.js" merge="true">
这样的话,layer就不会去自动去获取路径,但你需要通过以下方式来完成初始化的配置
layer.config({
  path: '/res/layer/' //layer.js所在的目录,可以是绝对目录,也可以是相对目录
});
注意:如果采用 wui 加载 layer,无需设置 path。所以前置工作都是自动完成。
但 layer.config 的作用远不止上述这样。它还可以配置层默认的基础参数,如:
layer.config({
  anim: 1, //默认动画风格
  skin: 'wui-layer-molv' //默认皮肤
  …
});
//除此之外,extend还允许你加载拓展的css皮肤,如:
layer.config({
  //如果是独立版的layer,则将myskin存放在./skin目录下
  //如果是wui中使用layer,则将myskin存放在./css/modules/layer目录下
  extend: 'myskin/style.css'
});
//具体的皮肤定制,可以参见:skin参数说明
由于我们的 layer 内置了轻量级加载器,所以你根本不需要单独引入 css 等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时,你最好是将弹层放入 ready 方法中,如:
//页面一打开就执行弹层
layer.ready(function(){
  layer.msg('很高兴一开场就见到你');
});
基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走 layer.open(),创建任何类型的弹层都会返回一个当前层索引,上述的 options 即是基础参数,另外,该文档统一采用 options 作为基础参数的标识例子:
var index = layer.open({
  content: 'test'
});
//拿到的index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数。
它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统 alert,但却比 alert 更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。如
//eg1
layer.alert('只想简单的提示');
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){
  //do something

  layer.close(index);
});
类似系统 confirm,但却远胜 confirm,另外它不是和系统的 confirm 一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。
//eg1
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  //do something

  layer.close(index);
});
//eg2
layer.confirm('is not?', function(index){
  //do something

  layer.close(index);
});
我们在源码中用了相对较大的篇幅来定制了这个 msg,目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单,而且足够得自觉,它不仅占据很少的面积,而且默认还会3秒后自动消失所有这一切都决定了我对 msg 的爱。因此我赋予了它许多可能在外形方面,它坚持简陋的变化,在作用方面,它坚持零用户操作。而且它的参数也是自动补齐的。
//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6});
//eg3
layer.msg('关闭后想做些什么', function(){
  //do something
});
//eg
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
  //do something
});
type:3 的深度定制。load 并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon 支持传入 0-2 如果是0,无需传。另外特别注意一点:load 默认是不会自动关闭的,因为你一般会在 ajax 回调体中关闭它。
//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //换了种风格
//eg3
var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒
//关闭
layer.close(index);
type:4 的深度定制。也是我本人比较喜欢的一个层类型,因为它拥有和 msg 一样的低调和自觉,而且会智能定位,即灵活地判断它应该出现在哪边。默认是在元素右边弹出
//eg1
layer.tips('只想提示地精准些', '#id');
//eg 2
$('#id').on('click', function(){
  var that = this;
  layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可
});
//eg 3
layer.tips('在上面', '#id', {
  tips: 1
});
关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个 index 了吧。事实上它非常容易得到。
//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的,每一种弹层调用方式,都会返回一个index
layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可

//如果你想关闭最新弹出的层,直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的

//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
如果你很懒,你不想去获取 index 你只想关闭。那么 closeAll 真的可以帮上你。如果你不指向层类型的话,它会销毁掉当前页所有的 layer 层。当然,如果你只想关闭某个类型的层,那么你可以
layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层
该方法对 loading 层和 tips 层无效。参数 index 为层的索引,cssStyle 允许你传入任意的 css 属性
//重新给指定层设定width、top等
layer.style(index, {
  width: '1000px',
  top: '10px'
});
使用方式:layer.title('标题变了', index) 当你试图在当前页获取 iframe 页的DOM元素时,你可以用此方法。selector 即 iframe 页的选择器
layer.open({
  type: 2,
  content: 'examples/iframe.html',
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
    console.log(body.html()) //得到iframe页的body内容
    body.find('input').val('Hi,我是从父页来的')
  }
});
此方法一般用于在 iframe 页关闭自身时用到。
//假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
调用该方法时,iframe 层的高度会重新进行适应 似乎不怎么常用的样子。使用方式:layer.iframeSrc(index, 'http://qq.com') 非常强大的一个方法,虽然一般很少用。但是当你的页面有很多很多 layer 窗口,你需要像 Window 窗体那样,点击某个窗口,该窗体就置顶在上面,那么 setTop 可以来轻松实现。它采用巧妙的逻辑,以使这种置顶的性能达到最优
//通过这种方式弹出的层,每当它被选择,就会置顶。
layer.open({
  type: 2,
  shade: false,
  area: '500px',
  maxmin: true,
  content: 'http://www.wui.com',
  zIndex: layer.zIndex, //重点1
  success: function(layero){
    layer.setTop(layero); //重点2
  }
});
一般用于在自定义元素上触发最大化、最小化和全屏。 prompt 的参数也是向前补齐的。options 不仅可支持传入基础参数,还可以传入 prompt 专用的属性。当然,也可以不传。yes 携带 value 表单值 index 索引 elem 表单元素
//prompt层新定制的成员如下
{
  formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
  value: '', //初始时的值,默认空字符
  maxlength: 140, //可输入文本的最大长度,默认500
}

//例子1
layer.prompt(function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});

//例子2
layer.prompt({
  formType: 2,
  value: '初始值',
  title: '请输入值',
  area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});
tab 层只单独定制了一个成员,即 tab: [],这个好像没有什么可介绍的,简单粗暴看例子
layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1',
    content: '内容1'
  }, {
    title: 'TAB2',
    content: '内容2'
  }, {
    title: 'TAB3',
    content: '内容3'
  }]
});
相册层,也可以称之为图片查看器。它的出场动画从 layer 内置的动画类型中随机展现。photos 支持传入 json 和直接读取页面图片两种方式。如果是 json 传入,如下:
$.getJSON('/jquery/test/photos.json', function(json){
  layer.photos({
    photos: json
    ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
  });
});

//而返回的json需严格按照如下格式:
{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号,默认0
  "data": [   //相册包含的图片,数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}
如果是直接从页面中获取图片,那么需要指向图片的父容器,并且你的 img 可以设定一些规定的属性(但不是必须的)。
//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>

<script>
//调用示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
</script>
第二种方式的图片查看器显然更加简单,因为无需像第一种那样返回规定的 json,但是他们还是有各自的应用场景的,你可以按照你的需求进行选择。
另外,photos 还有个 tab 回调,切换图片时触发。
layer.photos({
  photos: json/选择器,
  tab: function(pic, layero){
    console.log(pic) //当前图片的一些信息
  }
});
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile