小巧强大的jquery layer弹窗弹层插件


Posted in Javascript onDecember 06, 2015

先去官网下载最新的js  http://sentsin.com/jquery/layer/
①引用jquery
②引用layer.min.js

触发弹层的事件可自由绑定,如: 

$('#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 
  }); 
});
Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 #Javascript
javascript字符串函数汇总
Dec 06 #Javascript
win7下安装配置node.js+express开发环境
Dec 06 #Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 #Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 #Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 #Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 #Javascript
You might like
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python 实现简单的电话本功能
2015/08/09 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python怎么提高计算速度
2020/06/11 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
高中政治教学反思
2014/01/18 职场文书
民用住房租房协议书
2014/10/29 职场文书
工会工作个人总结
2015/03/03 职场文书
土建施工员岗位职责
2015/04/11 职场文书
劳动模范获奖感言
2015/07/31 职场文书
教师节主题班会教案
2015/08/17 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
一文搞懂python异常处理、模块与包
2021/06/26 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python