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. bower一个强大的前端依赖包管理工具

    在介绍之前,你必须的知道bower是基于nodejs开发的,所以你首先必须得有个nodejs环境,至于这么安装nodejs网上一大堆教程,对了使用bower还需要安装git,这里就不多说了. #### ...

  2. webstorm使用技巧

    WebStorm快捷键收集:模式visual studio 代码提示:ctrl + alt + 空格 代码补全:alt + / 代码换行:ctrl + shift + 上下箭头 重新运行:ctrl + ...

  3. Spark入门实战系列--6.SparkSQL(上)--SparkSQL简介

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .SparkSQL的发展历程 1.1 Hive and Shark SparkSQL的前身是 ...

  4. ArcGIS Earth数据小析

    ArcGIS Earth,一款轻量级的三维地球应用.因为工作关系下载试用了半天,正好借这个机会简单研究一下ArcGIS Earth的大概思路,特别是地形数据的组成和影像数据的加载,在这总结整理一下.下 ...

  5. nodejs 生产环境配置

    1.node 默认为development(开发)模式 启动node 时可以设置模式为生产模式 set NODE_ENV=production node app.js 2.设置node监听的端口 va ...

  6. Java性能优化

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 注:里面的测试结果会因电脑配置的不同而有所差异!!! 1. 为一些集合定义初始化大小 List.Set.Map都 ...

  7. jQuery邮箱自动补全代码

    JScript 代码   复制 (function($){ $.fn.emailMatch= function(settings){ var defaultSettings = { emailTip: ...

  8. SQL分页查询,纯Top方式和row_number()解析函数的使用及区别

    听同事分享几种数据库的分页查询,自己感觉,还是需要整理一下MS SqlSever的分页查询的. Sql Sever 2005之前版本: select top 页大小 * from 表名 where i ...

  9. 定义通用的可通过lambda表达式树来获取属性信息

    我们一般获取某个类型或对象的属性信息均采用以下几种方法: 一.通过类型来获取属性信息 var p= typeof(People).GetProperty("Age");//获取指定 ...

  10. 数据结构(C语言第2版)----时间复杂度和单链表

    马上要到校招了,复习下相关的基础知识. 时间复杂度是什么? 官方解释: 算法的执行时间需要依据算法所编制的程序在计算机上于运行时所消耗的时间来度量.在算法中可以使用基本的语句的执行次数作为算法的时间复 ...