layer插件
最近在做公司的官网,其中有用到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插件的更多相关文章
- layer插件layer.photos()动态插入的图片无法正常显示
layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...
- layer插件学习——弹框(自定义页)
本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...
- layer插件学习——提示层
本文是自己整理的关于layer插件的提示层的结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery插 ...
- layer插件学习——询问框
本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...
- layer插件学习——icon样式
本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...
- 用jQuery Validate+layer插件实现好看的表单提交效果
作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...
- layer插件open方法回掉值问题
最近做项目需用到一个弹出层加载iframe页面的东西,首先想到layer插件,此插件用到过多次,兼容性很好,功能也强大,废话不多说上代码. 其实功能很简单,就是在目标页面选择一个值,回掉回来,说明一下 ...
- 弹出框layer插件
有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...
- jQuery弹出层layer插件的使用
引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> ...
随机推荐
- (一)Lua脚本语言入门
今天开始自己的Lua语言学习,Lua脚本语言,是介于应用程序和开发其应用程序的底层编程语言之间,,它很方便调用其它语言,它只是在载入时对其进行编译,而不像我们写的单片机程序是预编译的,先编译好然后写入 ...
- ubuntu14.04 下手动安装java jdk
ubuntu14.04 下手动安装java jdk 第一步: 下载jdk.tar.gz (这里假设下载的文件名为jdk.tar.gz) 第二步: 解压 sudo tar -zxvf ./jdk.tar ...
- 《JAVASCRIPT高级程序设计》window/location/navigator/screen/history对象
如果要在web中使用JAVASCRIPT,那么BOM(浏览器对象模型)毫无疑问是最重要的部分.BOM提供了很多对象,例如,window.location.navigator.screen.histor ...
- .Net Core 之 MSBuild 介绍
前言 关于 .NET Core 旧版本的 sdk 介绍可以参看我以前的 这篇 文章. 8 个小时前,.NET Core 项目组释放了 .NET Core 新一轮的 sdk 工具更新,即 RC4 版本 ...
- 日志组件 logback
一.简介 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-access.logb ...
- MongoDB学习总结(五) —— 安全认证
作为数据库软件,我们要确保数据的安全,不是谁都可以访问的,所以mongodb也像其他的数据库软件一样可以采用用户验证的方法, mongodb 3.0之前的版本提供了addUser方法向不同的数据库添加 ...
- css中的text-overflow
css中的text-overflow HTML中: <body><div class="clip">此处中多余的文字直接被切掉,不显示</div> ...
- Redis参数配置和运维说明
开发过程中使用缓存的情况还是比较多的,记录一下Redis的参数说明以备以后查看: #Redis Config daemonize yes pidfile /var/run/redis.pid port ...
- POJ 3356 AGTC(DP求字符串编辑距离)
给出两个长度小于1000的字符串,有三种操作,插入一个字符,删除一个字符,替换一个字符. 问A变成B所需的最少操作数(即编辑距离) 考虑DP,可以用反证法证明依次从头到尾对A,B进行匹配是不会影响答案 ...
- centos快速安装redis
mkdir redis cd redis wget http://labfile.oss.aliyuncs.com/files0422/redis-2.8.9.tar.gz 解压 tar -xvfz ...