返回新版 文档手册 功能演示 有问必答 贤心博客
大小:68KB
在线调试 快速上手1.8.5 更旧版本演示 去看最新版
终止 运行

一睹为快?

点击以下各方框查看效果:

输入/文件层 tab层 相册层
触发弹层的事件可自由绑定,如:
$('#id').on('click', function(){
  layer.msg('test');
});
下面主要贴出上述例子的调用代码:
【信息框】:
layer.alert('白菜级别前端攻城师贤心', 8); //风格一
layer.msg('前端攻城师贤心'); //风格二
//当然,远远不止这两种风格。

【询问框】:
$.layer({
  shade: [0],
  area: ['auto','auto'],
  dialog: {
    msg: '您是如何看待前端开发?',
    btns: 2,          
    type: 4,
    btn: ['重要','奇葩'],
    yes: function(){
      layer.msg('重要', 1, 1);
    }, no: function(){
      layer.msg('奇葩', 1, 13);
    }
  }
});
//还可用layer.confirm()快捷调用

【页面层一】
$.layer({
  type: 1,
  shade: [0],
  area: ['auto', 'auto'],
  title: false,
  border: [0],
  page: {dom : '.layer_notice'}
});

【页面层二】
var pageii = $.layer({
  type: 1,
  title: false,
  area: ['auto', 'auto'],
  border: [0], //去掉默认边框
  shade: [0], //去掉遮罩
  closeBtn: [0, false], //去掉默认关闭按钮
  shift: 'left', //从左动画弹出
  page: {
    html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background-color:#eee;"><p>我从左边来,我自定了风格。</p><button id="pagebtn" class="btns" onclick="">关闭</button></div>'
  }
});
//自设关闭
$('#pagebtn').on('click', function(){
  layer.close(pageii);
});

【iframe层一】
$.layer({
  type: 2,
  shadeClose: true,
  title: false,
  closeBtn: [0, false],
  shade: [0.8, '#000'],
  border: [0],
  offset: ['20px',''],
  area: ['1000px', ($(window).height() - 50) +'px'],
  iframe: {src: 'http://f2e.sentsin.com/chat'}
}); 

【iframe层二】
layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, {
  time: 5,
  maxWidth: 260
});
$.layer({
  type: 2,
  closeBtn: false,
  shadeClose: true,
  shade: [0.1, '#fff'],
  border: [0],
  time: 5,
  iframe: {
    src: 'test/guodu.html'
  },
  title: false,
  area: ['300px','250px'],
  shift: 'right-bottom',
  end: function(){
    $.layer({
      type : 2,
      title: '贤心博客 - sentsin.com',
      shadeClose: true,
      maxmin: true,
      fix : false,  
      area: ['1024px', 500],           
      iframe: {
        src : 'http://sentsin.com/'
      } 
    });
  }
});

【加载层一】
layer.load(3);

【加载层二】
layer.load('加载带文字', 3);

【tips层一】
layer.tips('tips的样式并非是固定的,您可自定义外观。', this, {
  style: ['background-color:#78BA32; color:#fff', '#78BA32'],
  maxWidth:185,
  time: 3,
  closeBtn:[0, true]
});

【tips层二】
layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2});

【输入/文件层】
//普通文本
layer.prompt({title: '您的名字?'}, function(name){
  alert(name);
});
//密码文本
layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){
  alert(pass);
});
//文件上传
layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){
  alert(file);
});
//多行文本
layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){
  alert(val);
});

【tab层】
layer.tab({
  area: ['1000px', '500px'],
  data: [
    {title: 'Say', content:'Hi,Main'},
    {title: '无题', content:'支持html传入'}          
  ]
});

【相册层】
//此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json
var conf = {};
$.getJSON('ajax地址', {}, function(json){
  conf.photoJSON = json; //保存json,以便下次直接读取内存数据
  layer.photos({
    html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭',
    json: json
  });
});
      

layer - demo演示

layer提供了五种模式的层,分别为:信息框页面层iframe层加载层tips层,而layer.ext.js提供的拓展层是在这五种模式的基础上创建的。下面就此五种模式层进行大致的演示,更多功能还需要您自己去实验发现。

使用组件时,请将layer整个文件夹放置您项目的任何一个目录下,请务必不要移动layer默认的文件结构,否则将无法运行。部署完后,您只需在页面引入layer.min.js即可(当然,别忘了引入jquery,必须使用jquery1.8或以上)

【例一】:
layer.alert('一个很普通的信息框');

【例二】:
layer.alert('信息框演示二', 11, !1);

【例三】:
layer.confirm('信息框演示三',function(index){
  layer.msg('信息框演示三');
});

【例四】:
layer.msg('也可以不用显示图标哦', 2, -1);

【例五】:
就是告诉下大家有很多图标可以选择

【例六】:
layer.msg('踩到屎啦', 2, 13);
      
ps:做一些仿百度登录窗口之类的,只需要把样式写好,然后page配置下即可。
【页面层之自定义风格】:
var pagei = $.layer({
   type: 1,   //0-4的选择,
  title: false,
  border: [0],
  closeBtn: [0],
  shadeClose: true,
  area: ['460px', '280px'],
  page: {
    html: '<\div style="width:460px; height:280px; background-color:#81BA25; color:#fff;"><\div style="padding:20px;">里面传入任何html元素<\/div><\/div>' //此处放了防止html被解析,用了\转义,实际使用时可去掉
  }
});

【页面层之图片】:
var i = $.layer({
  type : 1,
  title : false,
  fix : false,
  offset:['50px' , ''],
  area : ['515px','615px'],
  page : {dom : '#tong'}
});

【页面层之淘宝】:
var i = $.layer({
  type : 1,
  title : false,
  offset:['150px' , ''],
  border : false,
  area : ['503px','395px'],
  page : {dom : '#taobao'}
});
      
【iframe层之多媒体】:
$.layer({
  type: 2,
  title: false,
  area: ['910px', '700px'],
  fix: false,
  shadeClose: true,
  closeBtn: false,
  offset: [($(window).height() - 700)/2+'px', ''], //上下垂直居中
  border: [0],
  shade : [0.9, '#000'],
  iframe: {src: 'http://im.qq.com/online/flash/flash20140304.swf'}
});

【iframe层之自定义风格】:
$.layer({
  type: 2,
  border: [0],
  title: false,
  shadeClose: true,
  closeBtn: false,
  iframe: {src : 'test/center.html'},
  area: ['860px', '400px']
});

【iframe层之子父操作】:
$.layer({
  type: 2,
  shade: [0],
  fix: false,
  title: 'iframe子父操作',
  maxmin: true,
  iframe: {src : 'iframe.html'},
  area: ['800px' , '440px'],
  close: function(index){
    layer.msg('您获得了子窗口标记:' + layer.getChildFrame('#name', index).val(),3,1);
  }
}); 
      
例一:
var loadi = layer.load(5, 0); //如不想让加载自动关闭,第一个参数设置0即可,如:layer.load(0);

例二:          
var loadi = layer.load('加载中…'); //需关闭加载层时,执行layer.close(loadi)即可








   
      
tips上
$('#id').on('click', function(){
  layer.tips('比如实现用户小名片什么的呀', this, {
    style: ['background-color:#0FA6D8; color:#fff', '#0FA6D8'],
    maxWidth:150
  });
});

tips右
$('#id').on('click', function(){
  layer.tips('你瞧那远古的光/裸露空荡/无穷无尽是你深邃的眼/传递遐想 ——《远与暗》 写于2012·春·杭州', this, {
    guide: 1,
    time: 1,
    style: ['background-color:#F26C4F; color:#fff', '#F26C4F'],
    maxWidth:240
  });
});

tips下
layer.tips('非常感谢大家对layer的支持,正因为你们,才让小小组件有了大大的关注。2014,加油!', this, {
  guide: 2,
  maxWidth:240
});

tips左
layer.tips('更多效果你自己慢慢发现吧。', this, {
  guide: 3,
  style: ['background-color:#c00; color:#fff', '#c00'],
  time: 1
});
    
      

事实上layer提供的丰富的接口支撑,已经足够让你的弹层变得千变万化,我们无法为您逐一演示。因此当你需要时,你可以阅览下$.layer()的参数说明,它会帮助你更好地运用layer。过程中遇到的任何问题,你都可以通过“有问必答”进行反馈。

下面我们还列举一些平时使用layer时的实例。