在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件。layer侧重于用户灵活的自定义,为不同人的使用习惯提供全方位设计,您的页 面会因此拥有更丰富、友好的操作体验,而您只需在调用时简单地配置相关参数,即可轻松实现各类交互。

 

它的使用方法很简单,首先,引入jquery库及layer库 代码如下:

<button id="test1">小小提示层</button>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/layer.min.js"></script>
<script>
$('#test1').on('click', function () {
//2秒后自动关闭,-1代表不显示图标
layer.msg('Hello layer', 2, -1);
});
</script>
 
作者:广州-yunny
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-layer.html
 
 

最近做的一个项目使用了一个叫做layer.js的插件,感觉很不错,在这里写下一些使用心得。

官方下载的地址与使用文档:http://sentsin.com/jquery/layer/

因为官方的使用演示讲解的已经非常清楚了,在这里我就讲解一下就我在项目中的使用心得。

情况一:操作请求在iframe页面中,但是弹窗希望是在整个页面中居中,也就是相当于父页面中的弹窗,也就是所谓的在iframe操作父页面

方法如下:在当前的iframe页面中写JS触发效果,希望弹窗的的DIV必须放在iframe父页面中,调用代码如下

     $("#addBank").click(function(){
var docHeight = document.documentElement.clientHeight;
top.$.layer({
type : 1,
title : '添加银行账号',
fix : true,
zIndex : 19891014,
offset:[(docHeight/2-240)+'px' , ''],
area : ['auto','350px'],
page : {dom : '#addWrapper'}
});
});

其中top.$.layer就是调用的关键了,top是浏览器的内置对象,表示最顶层容器,这样一来就是实现了iframe控制父页面的弹窗效果了,

"#addWrapper"是父页面中的一个div,id为"addWrapper",其他的参数官方API里面都有详细介绍,这里我就不再啰嗦了

情况二:希望弹窗自定义显示的文字的样式,我们可以在接受参数message的时候使用如:"<p style='text-align:center;'>你要显示的文字</p>"的方式来实现

  1. /*
  2. 先去官网下载最新的js  http://sentsin.com/jquery/layer/
  3. ①引用jquery
  4. ②引用layer.min.js
  5. */
  6. 触发弹层的事件可自由绑定,如:
  7. $('#id').on('click', function(){
  8. layer.msg('test');
  9. });
  10. 下面主要贴出上述例子的调用代码:
  11. 【信息框】:
  12. layer.alert('白菜级别前端攻城师贤心', 8); //风格一
  13. layer.msg('前端攻城师贤心'); //风格二
  14. //当然,远远不止这两种风格。
  15. 【询问框】:
  16. $.layer({
  17. shade: [0],
  18. area: ['auto','auto'],
  19. dialog: {
  20. msg: '您是如何看待前端开发?',
  21. btns: 2,
  22. type: 4,
  23. btn: ['重要','奇葩'],
  24. yes: function(){
  25. layer.msg('重要', 1, 1);
  26. }, no: function(){
  27. layer.msg('奇葩', 1, 13);
  28. }
  29. }
  30. });
  31. //还可用layer.confirm()快捷调用
  32. 【页面层一】
  33. $.layer({
  34. type: 1,
  35. shade: [0],
  36. area: ['auto', 'auto'],
  37. title: false,
  38. border: [0],
  39. page: {dom : '.layer_notice'}
  40. });
  41. 【页面层二】
  42. var pageii = $.layer({
  43. type: 1,
  44. title: false,
  45. area: ['auto', 'auto'],
  46. border: [0], //去掉默认边框
  47. shade: [0], //去掉遮罩
  48. closeBtn: [0, false], //去掉默认关闭按钮
  49. shift: 'left', //从左动画弹出
  50. page: {
  51. 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>'
  52. }
  53. });
  54. //自设关闭
  55. $('#pagebtn').on('click', function(){
  56. layer.close(pageii);
  57. });
  58. 【iframe层一】
  59. $.layer({
  60. type: 2,
  61. shadeClose: true,
  62. title: false,
  63. closeBtn: [0, false],
  64. shade: [0.8, '#000'],
  65. border: [0],
  66. offset: ['20px',''],
  67. area: ['1000px', ($(window).height() - 50) +'px'],
  68. iframe: {src: 'http://f2e.sentsin.com/chat'}
  69. });
  70. 【iframe层二】
  71. layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, {
  72. time: 5,
  73. maxWidth: 260
  74. });
  75. $.layer({
  76. type: 2,
  77. closeBtn: false,
  78. shadeClose: true,
  79. shade: [0.1, '#fff'],
  80. border: [0],
  81. time: 5,
  82. iframe: {
  83. src: 'test/guodu.html'
  84. },
  85. title: false,
  86. area: ['300px','250px'],
  87. shift: 'right-bottom',
  88. end: function(){
  89. $.layer({
  90. type : 2,
  91. title: '贤心博客 - sentsin.com',
  92. shadeClose: true,
  93. maxmin: true,
  94. fix : false,
  95. area: ['1024px', 500],
  96. iframe: {
  97. src : 'http://sentsin.com/'
  98. }
  99. });
  100. }
  101. });
  102. 【加载层一】
  103. layer.load(3);
  104. 【加载层二】
  105. layer.load('加载带文字', 3);
  106. 【tips层一】
  107. layer.tips('tips的样式并非是固定的,您可自定义外观。', this, {
  108. style: ['background-color:#78BA32; color:#fff', '#78BA32'],
  109. maxWidth:185,
  110. time: 3,
  111. closeBtn:[0, true]
  112. });
  113. 【tips层二】
  114. layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2});
  115. 【输入/文件层】
  116. //普通文本
  117. layer.prompt({title: '您的名字?'}, function(name){
  118. alert(name);
  119. });
  120. //密码文本
  121. layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){
  122. alert(pass);
  123. });
  124. //文件上传
  125. layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){
  126. alert(file);
  127. });
  128. //多行文本
  129. layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){
  130. alert(val);
  131. });
  132. 【tab层】
  133. layer.tab({
  134. area: ['1000px', '500px'],
  135. data: [
  136. {title: 'Say', content:'Hi,Main'},
  137. {title: '无题', content:'支持html传入'}
  138. ]
  139. });
  140. 【相册层】
  141. //此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json
  142. var conf = {};
  143. $.getJSON('ajax地址', {}, function(json){
  144. conf.photoJSON = json; //保存json,以便下次直接读取内存数据
  145. layer.photos({
  146. html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭',
  147. json: json
  148. });
  149. });

jQuery layer弹出层插件 http://layer.layui.com/直接上官网学的更多相关文章

  1. 写了一个jquery的 弹出层插件。

    下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件  参数(option): widt ...

  2. jquery layer弹出层插件

    http://www.51xuediannao.com/js/jquery/jquery_layer/layer.html

  3. 在layui layer 弹出层中加载 layui table

    layui.use('table', function(){ var table = layui.table; layer.open({ type : 1, area : [ "600px& ...

  4. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  5. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  6. layer弹出层

    最近因为项目要求做了一个layer弹出层demo,先看效果图 好了,现在开始上代码 index.jsp <%@ page language="java" import=&qu ...

  7. layer弹出层详解

    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...

  8. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  9. jQuery弹出层插件popbox

    都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...

随机推荐

  1. POJ 2115 C Looooops(模线性方程)

    http://poj.org/problem?id=2115 题意: 给你一个变量,变量初始值a,终止值b,每循环一遍加c,问一共循环几遍终止,结果mod2^k.如果无法终止则输出FOREVER. 思 ...

  2. [java]String和Date、Timestamp之间的转换

    一.String与Date(java.util.Date)互转  1.1 String -> Date Date date = DateFormat.parse(String  str); St ...

  3. Spring的注解@Qualifier(二十五)

    转载:https://www.cnblogs.com/smileLuckBoy/p/5801678.html 近期在捯饬spring的注解,现将遇到的问题记录下来,以供遇到同样问题的童鞋解决~ 先说明 ...

  4. 流程设计器jQuery + svg/vml(Demo1 - 构建设计器UI界面)

    之前用Silverlight实现过一个流程设计器(Demo),使用起来不是很方便.打算参考GooFlow,结合自己对工作流的理解,用jQuery改造实现一个,力求简单实用. 第一步是要构建设计器的UI ...

  5. React Diff 算法

    React介绍 React是Facebook开发的一款JS库,用于构建用户界面的类库. 它采用声明式范例,可以传递声明代码,最大限度地减少与DOM的交互. 特点: 声明式设计:React采用声明范式, ...

  6. Editor does not contain a main type

    1.错误描述 2.错误原因 在含有main方法的类中,运行应用程序,却提示这个错误:编译器不包含main类型 3.解决办法 (1)选择该Java类上一级文件,build path--->use ...

  7. [转载]MySQL索引原理与慢查询优化

    好文,以防丢失,故转之,另对排版做简单优化.原文地址:http://ourmysql.com/archives/1401 索引目的 索引的目的在于提高查询效率,可以类比字典,如果要查"mys ...

  8. nodejs通过buffer传递数据到前端,前端通过arraybuffer接收数据

    以后端传送threejs中的点阵数组为例: 后端: let buffer = Buffer.alloc((points.length + 4) * 4) //points.length + 4:预留前 ...

  9. streamsets Processors 说明

    Processors 表示对于一种数据操作处理,在pipeline中可以应用多个Processors, 同时根据不同的执行模式,可以分为独立模式的,集群模式.边缘模式(agent),以及 帮助测试的测 ...

  10. Python学习思维导图

     刚学习Python时,边学边总结的,采用思维导图的形式, 适合回顾使用.内容参考<Python:从入门到实践>一书.   再给出一张Datacamp网站上的一张关于Python基础的总结 ...