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="" /> ...
随机推荐
- iOS 插件化开发汇总 Small框架
应用插件化背景 目前很多应用功能越来越多,软件显得越来越臃肿.因此插件化就成了很多软件发展的必经之路,比如支付宝这种平台级别的软件: 页上密密麻麻的功能,而且还在增多,照这个趋势发展下去,软件包的大小 ...
- Bezier(贝塞尔)曲线简介
在计算机图形学中,Bezier曲线被广泛用于对平滑的曲线进行建模,对其有适当的了解是必要的.一条Bezier曲线由一系列控制点定义,称为曲线的阶数,由此可知,使用两个控制点()可以定义一条一阶Bezi ...
- codeforces div2.C
C. New Year and Rating time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- Win下 MySQL数据库安装与配置详解
第一步 从官网下载安装包 (本次只写安装版的32位的mysql) 1. https://www.mysql.com/downloads/ 下载的官网地址 一直滑到最下面 然后点第一个 然后选第一个 这 ...
- echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
- CoreCLR源码探索(三) GC内存分配器的内部实现
在前一篇中我讲解了new是怎么工作的, 但是却一笔跳过了内存分配相关的部分. 在这一篇中我将详细讲解GC内存分配器的内部实现. 在看这一篇之前请必须先看完微软BOTR文档中的"Garbage ...
- php curl详细解析和常见大坑
1. 拿来先试试手 比如我们以著名的"测试网络是否连接"的网站--百度为例,来尝试下curl <?php // create curl resource $ch = curl ...
- 前端必备技能之Photosh切图
切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用 ...
- Ansible_自动化运维《Ansible之初识-1》
1.Ansible简介 1.1 Ansible介绍 Ansible 是一个简单的自动化运维管理工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fab ...
- PLSQL触发器
触发器权限 数据库创建用户时想要在本用户下使用触发器,需要给用户触发器的权限 使用DBA用户执行 GRANT CREATE TRIGGER TO user_name; 如果想在当前用户下创建其他用户 ...