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. LinkedHashMap源码详解

    序言 本来是不打算先讲map的,但是随着对set集合的认识,发现如果不先搞懂各种map,是无法理解set的.因为set集合很多的底层就是用map来存储的.比如HashSet就是用HashMap,Lin ...

  2. 浅谈attr()和prop()

    刚开始学JQ的时候 ,看到attr()和prop()这两个属性的时候感觉很迷茫,而且配合官方给出的推荐使用图: prop()可以做到的attr()完全都可以,而且做不到的attr()也可以做到.何用? ...

  3. SharePoint 2013连接非默认端口的SQL Server

        SharePoint 2013场在连接的时候不允许出现连接地址中包含端口号,否则场配置就会报错,在执行到配置场数据库时无法完成.     此时如果SQL Server不是用的默认端口1433的 ...

  4. hdu1269迷宫城堡(判断有向图是否是一个强连通图)

    1 /* 题意: 给你一个图,求这个有向图示否是一个强连通图(每两个节点都是可以相互到达的)! 思路1:按正向边dfs一遍,将经过的节点计数,如果记录的节点的个数小于n,那么就说明图按照正向边就不是连 ...

  5. Abp公共连接和事务管理方法

    Conection 和事务管理在使用数据库的应用中是一个最重要的概念.当你打开一个连接,开始一个事务,如何来处理这些连接等等. 您也许知道,.NET使用了连接池.所以,创建一个连接实际上是从连接池里得 ...

  6. 基于@AspectJ配置Spring AOP之一--转

    原文地址:http://tech.it168.com/j/2007-08-30/200708302209432.shtml 概述 在低版本Spring中定义一个切面是比较麻烦的,需要实现特定的接口,并 ...

  7. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  8. Azure Automation (4) 按照Azure虚拟机的机器名,设置开关机

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China服务. 在有的时候,我们不需要将所有的虚拟机进行开关机. 本文介绍的脚 ...

  9. SURF算子(1)

    SURF算子,参考这篇文章的解释http://www.ipol.im/pub/art/2015/69/ SURF 是   Speeded Up Robust Features 加速鲁棒特征的含义. T ...

  10. path入门 20141102-1405

    那Python有哪些缺点呢? 第一个缺点就是运行速度慢,和C程序相比非常慢, 第二个缺点就是代码不能加密. Python是解释型的 不是编译型的 Python解释器-CPython 命令行: 只需要在 ...