jquery插件layer
//信息框-例1
layer.alert('见到你真的很高兴', {icon: 6}); //信息框-例2
layer.confirm('你确定你很帅么?', {icon: 3}, function(index){
layer.close(index);
alert('自恋狂');
}); //信息框-例3
layer.msg('这是最常用的吧'); //信息框-例4
layer.msg('不开心。。', {icon: 5}); //信息框-例4
layer.msg('玩命卖萌中', function(){
//关闭后的操作
}); //页面层-自定义
layer.open({
type: 1,
title: false,
closeBtn: false,
shadeClose: true,
skin: 'yourclass',
content: '自定义HTML内容'
}); //页面层-佟丽娅
layer.open({
type: 1,
title: false,
closeBtn: false,
area: '516px',
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: $('#tong')
}); //iframe层-父子操作
layer.open({
type: 2,
area: ['700px', '530px'],
fix: false, //不固定
maxmin: true,
content: 'test/iframe.html'
}); //iframe层-多媒体
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: false,
shadeClose: true,
content: 'http://player.youku.com/embed/XMjY3MzgzODg0'
});
layer.msg('点击遮罩任意处关闭'); //iframe层-禁滚动条
layer.open({
type: 2,
area: ['360px', '500px'],
skin: 'layui-layer-rim', //加上边框
content: ['http://layer.layui.com/mobile', 'no']
}); //加载层-默认风格
layer.load();
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000); //加载层-风格2
layer.load(1);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000); //加载层-风格3
layer.load(2);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000); //加载层-风格4
layer.msg('加载中', {icon: 16}); //打酱油
layer.msg('尼玛,打个酱油', {icon: 4}); //tips层-上
layer.tips('上', '#id或者.class', {
tips: [1, '#0FA6D8'] //还可配置颜色
}); //tips层-右
layer.tips('默认就是向右的', '#id或者.class'); //tips层-下
layer.tips('下', '#id或者.class', {
tips: 2
}); //tips层-左
layer.tips('左边么么哒', '#id或者.class', {
tips: [4, '#78BA32']
}); //tips层-不销毁之前的
layer.tips('不销毁之前的', '#id或者.class', {
tipsMore: true
}); //默认prompt
layer.prompt(function(val){
layer.msg('得到了'+val);
}); //屏蔽浏览器滚动条
layer.open({
content: '浏览器滚动条已锁',
scrollbar: false
}); //弹出即全屏
var index = layer.open({
type: 2,
content: 'http://www.layui.com',
area: ['300px', '195px'],
maxmin: true
});
layer.full(index); //正上方
layer.msg('灵活运用offset', {
offset: 0,
shift: 6
}); //还该列举什么呢
layer.msg('等我想想…');
案列实践
<a href="<?= url('/user/edit/' . $val->id) ?>" class="eve_edit" rel="popup2" title="会员资料修改" class="poplight" >资料修改</a>
<a href="<?= url('/user/frozen/' . $val->id ) ?>" title="选择冻结项" class="event_lock">冻结</a>
js代码书写
$('.eve_edit').click(function() {
oplayer = layer.open({
type: 2,
title: $(this).attr('title'),
shadeClose: true,
shade: false,
maxmin: true,
area: ['60%', '80%'],
content: $(this).attr('href')
});
return false;
});
jquery插件layer的更多相关文章
- jquery 弹窗插件 layer
jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...
- 点击弹出 +1放大效果 -- jQuery插件
20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...
- 网站建设常用JQuery插件整理
1.jQuery.lazyload 作用:延迟加载网站图片,常用于电商网站.图片展示网站,对于提高网站打开速度比较有效. 2.Owl Carousel 作用:图片滚动特效.响应式传送带插件,特点是支持 ...
- 弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
- 元素视差方向移动jQuery插件-类似github 404页面效果
原文地址:http://www.xuanfengge.com/shake.html 前言: 视差滚动,大家也许并不陌生.但是对于视差方向移动,你是否有见过效果呢?看官请进来瞧瞧~ demo : 轩枫阁 ...
- webpack 引入jquery和第三方jquery插件
1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...
- 移动端下滑刷新插件(jQuery插件)
由于在工作不能独自开发,而且为了给他们方便,自己写过不少的插件,不过今天刚好空闲,发出刚好完成的,移动端的下滑到底刷新插件.我不是很喜欢写插件给别人用,因为用起来自然是简单的,没什么难度,所以一起分享 ...
- js插件---layer.js使用体验是怎样
js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
随机推荐
- 最强json解析工具
[原]http://blog.csdn.net/xiaoguomumu/article/details/75255629 感觉上面的链接所说,需要传一个T进去,也就是先要构造T,感觉麻烦 可以不这样做 ...
- Linux分区扩容
lz在MAC上面使用Linux虚拟机,开始只建了一个分区,挂载在”/”目录下.现在硬盘空间不够了,所以lz就来给这个分区扩容. 首先,当然是要给虚拟机分配更多的硬盘空间喽(lz用的是VMware Fu ...
- Java动态性 字节码操作
Java动态性的两种常见方式:-字节码操作 - 反射;字节码操作比反射开销小,性能高,JAVAasist性能高于反射,低于ASM 运行时操作字节码可是实现 : 动态生成新的类:动态的改变某个类的结构 ...
- C# Uploadify 文件上传组件的使用
一.页面的构建 1.要引用的JS和CSS <link href="../css/jquery-ui.css" rel="stylesheet" type= ...
- asp.net FileUpload上传文件夹并检测所有子文件
1.在FileUpload控件添加一个属性 webkitdirectory=""就可以上传文件夹了 <asp:FileUpload ID="FileUpload1& ...
- BulletedList用途
1.用作最普通的信息显示(列表方式) 2.制作导航条 BulletedList3中模式 1.Text 文本 2.HyperLink 连接 2.LinkButton 按钮 BulletedList 导航 ...
- 不同线程不能获取其他线程设置的ThreadLocal里面的值
背景: 最近在项目用到了ThreadLocal,存放一些值.起线程异步获取ThreadLocal中的值,得到null.这是由于,ThreadLocal.get()会获取当前线程的一个map对象,以Th ...
- java 判断图片的类型
// 这种方法如果遇到不是图片类型的文件会reader抛异常! public static void main(String[] args) throws IOException { // get i ...
- 从零开始的全栈工程师——JS面向对象(复习)
作用域 栈内存:js执行的环境堆内存:存放代码块的空间 存放方式 键值对形式存放 字符串的形式存放js在执行之前 浏览器会给他一个全局作用域叫window 每个作用域下都分为两个模块 一个是内存模块一 ...
- Android 从 Web 唤起 APP
前言 知乎在手机浏览器打开,会有个 App 内打开的按钮,点击直接打开且跳转到该详情页,是不是有点神奇,是如何做到的呢? 效果预览 Uri Scheme 配置 intent-filter Androi ...