layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。

  1. 版本Layer 2.2

  2. 作者:贤心闲

  3. github

在线实例

实例预览 layer实例DEMO演示-jQuery弹出层插件

实例预览 layer实例测试

参考手册

帮助文档 layer API 帮助文档

引入文件

  1. <link rel="stylesheet" href="layer.css" media="all">
  2. <script type="text/javascript" src="jquery.min.js"></script>
  3. <script type="text/javascript" src="layer.js"></script>
复制

使用方法

  1. <a href="javascript:;" onclick="test();">点我弹窗</a>
  2. <script>
  3. function test() {
  4. //在这里面输入任何合法的js语句
  5. layer.open({
  6. type: 1,
  7. //page层
  8. area: ['500px', '300px'],
  9. title: '你好,layer。',
  10. shade: 0.6,
  11. //遮罩透明度
  12. moveType: 1,
  13. //拖拽风格,0是默认,1是传统拖动
  14. shift: 1,
  15. //0-6的动画形式,-1不开启
  16. content: '<div style="padding:50px;">这是一个非常普通的页面层(type:1),传入了自定义的html</div>'
  17. });
  18. }
  19. </script>
复制

jQuery Layer 弹层组件的更多相关文章

  1. 学习layer弹层组件移动版

    layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层

  2. Layer弹层组件 二次扩展,项目中直接使用。

    /************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...

  3. HTML5 本地存储+layer弹层组件制作记事本

    什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这 ...

  4. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

  5. layerweb弹层组件(SSH框架下)

    action类 这里主要看业务方法中表单路径中的(isClose = "1";return resUri;) public class MaterialsAction extend ...

  6. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  7. React15.6.0实现Modal弹层组件

    代码地址如下:http://www.demodashi.com/demo/12315.html 注:本文Demo环境使用的是我平时开发用的配置:这里是地址. 本文适合对象 了解React. 使用过we ...

  8. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  9. layer弹层基本参数初尝试

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. RoundedImageView,实现圆形、圆角矩形的注意事项

    RoundedImageView是gitHub上面的一个开源组件(https://github.com/vinc3m1/RoundedImageView),实现一些圆形或者圆角矩形是很方便的, < ...

  2. 深入理解PHP内核(十一)函数-函数的内部结构

    原文链接:http://www.orlion.ga/330/ php的函数包括用户定义的函数.内部函数(print_r count…).匿名函数.变量函数($func = 'print_r'; $fu ...

  3. C#多线程之旅(4)——APM初探

    源码地址:https://github.com/Jackson0714/Threads 原文地址:C#多线程之旅(4)——APM初探 C#多线程之旅目录: C#多线程之旅(1)——介绍和基本概念 C# ...

  4. java中并不是任意多个接口都可以实现多实现

    interface A{ public abstract void show(); } interface B{ public abstract int show(); } public class ...

  5. WebAPI 2.x中如何扩展Identity Store

    ASP.NET WebAPI 中引入了新的一套身份验证和授权的机制,官方的叫法是ASP.NET Identity,有关这个概念的细节,感兴趣的同学可以参考 http://www.asp.net/ide ...

  6. 开发高效的Tag标签系统数据库设计

    需求背景 目前主流的博客系统.CMS都会有一个TAG标签系统,不仅可以让内容链接的结构化增强,而且可以让文章根据Tag来区分.相比传统老式的Keyword模式,这种Tag模式可以单独的设计一个Map的 ...

  7. Android 学习之路

    转载:http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/ 这篇博客背后的故事 一路走来很不容易,刚好知乎上被人邀请回 ...

  8. Android OpenGL 编写简单滤镜

    Android 上使用Opengl进行滤镜渲染效率较高,比起单纯的使用CPU给用户带来的体验会好很多.滤镜的对象是图片,图片是以Bitmap的形式表示,Opengl不能直接处理Bitmap,在Andr ...

  9. Android中Services简析

    Services是Android中四大基础组件(Activities. Services. Content Providers. BroadCast Receivers)之一,主要用于在后台长时间运行 ...

  10. Winform如何实现ComboBox模糊查询

    最近朋友问了一个关于Winform实现ComboBox模糊查询的知识点,自己好久没有搞Winform了,就上手练了一下,废话不多说,进入正题. 前台设计: 前台就是一个简单的Form窗体+一个Comb ...