layer —— 一个简单的jQuery弹出层插件
layer的使用
4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题
4.21更新;
解答4-19的问题:采用红色字
4,19日更新问题
在老版本中(1.7)版中遇到的问题;问题补充:准确的说是,在移动端中所出现的问题,
layer.confirm() //在运行时会报错,是什么原因呢?
原因:在移动端中,其实是不支持,layer.alert(),layer.confirm(),layer.msg()等方法的,只支持 layer.open() ;参数根据相关文档去配置就好了;
layer.open({content:'你确定删除吗?',btn:['确定’,'取消']}) //显示的确定在右边,并且调用函数是错的?
原因:移动端本来就是与PC相反的,是为了符合用户习惯。所以在移动端书写时正常书写就好,只有2个按钮时,确定回掉用yes:function(){},取消回掉用no:function(){};有多个按钮时;确定按钮会在最右侧,确定也是用yes:function(){};其他按钮用,btn2:function(){},btn3:fubction(),...
if(!layer.open({content:'你确定删除吗?',btn:['确定’,'取消']})) return false ; //第一次显示正常,第二次就不执行了,直接执行后面的语句,导致内容删除掉?
原因:采用上题的方法就不会出现问题;
改成:
layer.open({
content:'测试',
btn: ['确定', '取消'],
yes:function(index, layero) {
console.log('确定');
},
no:function(index, layero) {
//点击取消时,弹出框就没了
}
})
简介:web弹层组件;更少的代码展现更强健的功能;永久性提供无偿服务;
使用:
1,下载layer.zip,解压;
2,引入jquery.js和 layer.js;这是一个独立于layui的组件,不需要依赖什么;
3,demo:
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//layer.alert('hello world!');
layer.alert('hello', {
icon: 1,
skin: 'layer-ext-moon'
})
</script>
可以看出:只是将单单的alert换成了layer.alert,其他同理;后面可跟参数来设置显示的样式;你以为仅仅只是这样吗,前面只是简单的用法,然并卵;正确的打开方式这..这样子的
layer.open({
type: 1,
content: '传入任意的文本或html'
})
4,基础参数:
1,(层类型) type: layer提供了5种层类型。可传入的值有:
0(信息框,默认) 包括(alert,confirm,msg)
1(页面层)
2(iframe层)
3(加载层)
4(tips层)
若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
layer.open({
type: 1,
content: '我是页面层'
});
2,(标题) title: 3种类型:String/Array/Boolean,默认:'信息'
3,(内容) content: 3种类型:String/DOM/Array,默认:''
4,(皮肤) skin: 类型:String,默认:''
//单个使用
layer.open({
skin: 'demo-class'
});
//全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
layer.config({
skin: 'demo-class'
})
//CSS
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
…
// 加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。
扩展:layer皮肤制作说明。
【第一步】:命名文件夹
在layer的skin目录建立一个文件夹,假设您将该文件夹命名为:yourskin
【第二步】:创建样式等文件
在yourskin文件夹下建立一个单独的样式文件,务必命名为:style.css。并且你可能用到的图片也要存放在该文件夹下
【第三步】:书写样式
/*
通过body前缀,是为了确保你皮肤的优先级
你可以通过调试工具重置更多样式
*/
body .layer-ext-yourskin .layui-layer-title{}
body .layui-ext-yourskin .layui-layer-btn{}
body .layui-ext-yourskin .layui-layer-btn a{}
【第四步】:调试
通过全局配置看看你的皮肤定义的如何:
layer.config({
extend: 'myskin/style.css', //加载您的扩展样式
skin: 'layer-ext-yourskin'
});
layer.alert('layer皮肤-Yourskin');
【最后一步】:发布
1. 现在你已经成功制作了一个皮肤了,如果你觉得它很美,你可以共享出更多的人使用。
2. 那么你应该制作一个简单的页面来介绍你的皮肤,提供尽可能简单的使用说明(就像这个:layer.seaning.com)。
3. 然后将你的皮肤主题页网址通过任意渠道发给贤心(比如可以通过邮箱:xu@sentsin.com)
------------------------------------and more-----参考官方文档---------------------------------------------------------
area宽高
offset坐标
icon提示图标
btn提示按钮
btnAlign按钮排列
closeBtn右上关闭
shade遮罩
shadeClose
time自动关闭
id唯一id
anim动画
isOutAnim关闭动画
maxmin最大小化
fixed是否固定
resize是否允许拉伸
resizing正在拉伸
scrollbar屏蔽滚动
maxWidth最大宽
zIndex层叠值
move拖拽元素
moveOut拖出
moveEnd回调
tipsTips参数
tipsMore允许多tips
success弹出后回调
yes确定回调
cancel关闭回调
end销毁后回调
full/min/restore
内置方法
config全局设置
ready就绪
open核心方法
alert弹框
confirm询问
msg提示
load加载
tips吸附
close关闭层
closeAll关闭全部
style
title重置标题
getChildFrame
getFrameIndex
iframeAuto
iframeSrc
setTop多层置顶
full/min/restore
其他内置层
prompt输入层
tab选项卡层
photos图片层
layer —— 一个简单的jQuery弹出层插件的更多相关文章
- webui-popover 一个轻量级的jquery弹出层插件
该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css js 文件 <link rel="s ...
- 效果非常好的 Jquery弹出层插件 jQuery Sweet alert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...
- jQuery弹出层插件popbox
都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...
- 分享一个JQuery弹出层插件
JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...
- layer官方演示与讲解(jQuery弹出层插件)
1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2. ...
- 一个简单的div弹出层的小例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 转 js一个简单实用的弹出层
关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...
- jQuery弹出层插件大全
1.thickbox 目前用的比较多的,最新版本是thickbox3.1 下载地址:http://jquery.com/demo/thickbox/#examples 2.colorBox 官方网站: ...
- layer (jQuery弹出层插件)使用
$(".delete").click(function(){ var work_name = $(this).data('name'); var item_id = $(this) ...
随机推荐
- Android第四次作业
一.团队成员 成员1:刘宇莹 学号:1600802122 班级:计算机164 博客链接:刘宇莹 成员2:孟鑫菲 学号:1600802092 班级:计算机163 博客链接:孟鑫菲 二.团队项目apk 拍 ...
- 在页面上获取web项目信息
获取协议名称:request.getScheme() 获取域名:request.getServerName() 获取项目名称:request.getContextPath() 使用EL表达式获取项目名 ...
- __x__(19)0907第四天__ HTML5 文本标签 及 样式
strong 表语义上的强调, em 表示语气上的强调: <strong>警告:离僵尸远点!</strong> 世界末日了,因为僵尸是<em>有毒的</em& ...
- __x__(44)0910第六天__表单
form表单: form必须属性:action,指定一个服务器地址. 若希望表单中的数据发送给服务器,必须设置name属性. 用户填写的信息,将会追加在url地址?后面,以查询字符串的形式发送给服务器 ...
- Kali 2.0使用SSH进行远程登录
注:此文为转载他人博客,不用做商业用途,如有侵权,请联系我删除 一.配置SSH参数 修改sshd_config文件,命令为: vi /etc/ssh/sshd_config 将#PasswordAut ...
- iOS HTML特殊字符转译
something about you Bye Bye è; un saluto 我使用NSXMLParser,它是顺利,直到它找到èHTML实体.它要求foundCharacters:为“再见” ...
- ThinkPHP5 添加多个文字水印及疑难解答
public function imageload() { $imgpath = ROOT_PATH . 'public' . DS . 'static' . DS . 'www' . DS . 'i ...
- 创建zookeeper集群
第一步:需要安装jdk环境. 第二步:把zookeeper的压缩包上传到服务器. 第三步:解压缩. 第四步:把zookeeper复制三份. [root@localhost ~]# mkdir /usr ...
- Html转义字符列表
Symbol Code Entity Name ™ ™ € € Space ! ! " " " # # $ $ % % & & ...
- Head First Python-Python简单处理文件
前面介绍了自定义格式化输出列表函数printList(),下面再介绍下格式化列表项及列表项的排序. 这里有一组列表数据,记录运动员跑步时间的,要求按照时间大小进行排序.这里每项数据记录的时间格式不一样 ...