最近在做公司的官网,其中有用到layer这款插件,以前没有接触过,不过学下来觉得好用好学。下面分享一下我的学习心得。

  layer是web弹出层组件。在官网下载好layer后,把他部署到你的项目文件中(不能去挪动layer里面的文件结构,因为它们是不可拆散的组合)。你不用去管其他文件是干嘛的,只需关心layer.js,当然layer是基于jQuery的,你需要在引入layer之前引入jquery1.8或者以上版本。

一.基础参数:

1.type——基础类型层(number类型值,默认0)

0:信息框  1:页面层  2:iframe层  3:加载层  4:tips层

2.title——弹出层标题

title:"标题内容"  title:['标题内容','font-size:18px;']  title:false(不显示标题)

3.content——弹出框内容

content:'内容’  content:"<div>hello world</div>'

4.area——弹出框的宽高

area:'500px'只设置宽  area:['500px','300px']设置宽高

5.icon——弹出层图标(只适用于信息框和加载层)

信息框的取值范围:0~6  加载层的取值范围:0~2

6.btn——弹出层按钮设置(默认:确认)

btn:'yes'  btn:['yes'.'no']

7.closeBtn——弹出层关闭按钮(默认:1)

closeBtn:0不显示  closeBtn:2

8.shade——除了弹出层其他部分(默认:0.3)

shade:[0.8,'#393D49']换色  shade:0不显示

9.shadeClose——点击除了弹出层其他部分的效果(默认:false)

控制弹出层的关闭(当点击除了弹出层其他部分)

shadeClose:true点击关闭  shadeClose:false点击不关闭

10.time——弹出层自动关闭所需时间(毫秒为单位)

二.常用方法

1.layer.open(options)最核心的方法

options:基础参数

layer.open({content: '内容'})

2.layer.alert(content,options,yes)信息框

参数:

content: 内容,

option: 基础参数

yes 点击确定按钮回调函数

layer.alert('内容',{icon:1},function(index,layerDom){});

3.layer.confirm(content,option,yes,cancel)询问层

参数:

cancel:取消按钮回调函数

4.layer.msg(content,options,end)提示框

参数:

end:层销毁后触发回调

5.layer.load(icon,option)加载层

6.layer.tips(content,follow,options)tip层

7.layer.title(title,index)改变层的标题

8.layer.tab(options)tab层

layer插件的更多相关文章

  1. layer插件layer.photos()动态插入的图片无法正常显示

    layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...

  2. layer插件学习——弹框(自定义页)

    本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...

  3. layer插件学习——提示层

    本文是自己整理的关于layer插件的提示层的结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery插 ...

  4. layer插件学习——询问框

    本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...

  5. layer插件学习——icon样式

    本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...

  6. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

  7. layer插件open方法回掉值问题

    最近做项目需用到一个弹出层加载iframe页面的东西,首先想到layer插件,此插件用到过多次,兼容性很好,功能也强大,废话不多说上代码. 其实功能很简单,就是在目标页面选择一个值,回掉回来,说明一下 ...

  8. 弹出框layer插件

    有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...

  9. jQuery弹出层layer插件的使用

    引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> ...

随机推荐

  1. BZOJ-2768: [JLOI2010]冠军调查(超级裸的最小割)

    2768: [JLOI2010]冠军调查 Time Limit: 10 Sec  Memory Limit: 128 MB Description 一年一度的欧洲足球冠军联赛已经进入了淘汰赛阶段.随着 ...

  2. ubuntu 下配置Web服务器

    ubuntu 下配置Web服务器 1.切换管理员身份 终端/文本界面输入命令: su 根据提示输入密码 注: 如果不能使用su 点击查看如何启用su2.安装MySQL5 apt-get install ...

  3. windows 下odoo 不同版本安装运行问题

    在开发测试不同版本odoo时,总会遇到在同一浏览器下运行出错的状况.虽然可以把不同版本分属不同的端口,但是登录标识会入写用户本地浏览器cookie,由于cookie只匹配域名及路径但是不区分端口, 所 ...

  4. 三层——vb.net版

    经过不懈的努力,我的vb.net 版的三层登陆终于实现了.下面将我的成果向大家展示一下. 原则          vb.net的三层登陆跟C#的三层登陆的思想是一样的都是将系统分层--U层只负责与用户 ...

  5. ASP.NET MVC用存储过程批量添加修改数据

    用Entity Framework 进行数据库交互,在代码里直接用lamda表达式和linq对数据库操作,中间为程序员省去了数据库访问的代码时间,程序员直接可以专注业务逻辑层的编写.但是对于比较复杂的 ...

  6. 如何实现php字符串翻转?

    字符串:$str = "abcdefg"; // 方法一(直接使用php自带函数strrev($str)) print_r(strrev($str)); // 使用for循环方式, ...

  7. 用qemu搭建aarch64学习环境

    作者信息 作者: 彭东林 邮箱: pengdonglin137@163.com QQ: 405728433 软件平台 主机: Ubuntu14.04 64位版本 模拟器:Qemu-2.8.0 Linu ...

  8. iptables禁止ping入

    iptables禁止ping入 以下设置将允许自己往外ping 不允许别人ping自己 vi /etc/sysconfig/iptables 加入如下2条规则 -A INPUT -p icmp --i ...

  9. framework各版本新特性(为面试准备)

    菜鸟D估计描述这些新特性的文章都是烂大街的货色,之所以拿出来分(e)享(xin)一下,有两个原因:1.当年面试的时候有人问到,我不知道该怎么回答:2.项目需要发布了,但是考虑到framework的版本 ...

  10. 在Angular中,如果权限值是异步请求所得,如何将其设置为HTTP请求头的Authorization?

    遇到此问题的背景:项目需要实现单点登录,在前后端分离的前提下,前台如何保存token值成为了一个问题.想到的解决方案是,将token值统一存到一个前端程序,其他的前端程序去这个前端程序去取token( ...