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 ...
随机推荐
- Excel&&word&&PPT
1. Excel 1.1 制作下拉框 选中单元格或列--> 菜单"数据" --> "数据验证"-->"设置" --> ...
- fabric省略输出
fab -f test_fabric.py start --hide status,running,stdout,user,aborts,warnings,stderr 省略所有输出--hide st ...
- flutter initializing gradle终极解决方案
自己开发的公众号,可以领取淘宝内部优惠券 修改flutter.gradle文件 这种做法网上一大堆的教程,如果你还没改过建议先试下,比如这篇 Flutter 运行 一直Initializing gra ...
- python词频统计
1.jieba 库 -中文分词库 words = jieba.lcut(str) --->列表,词语 count = {} for word in words: if len(word)==1 ...
- 关于消息推送的补充,主要介绍服务端的实现,包含object c 版本 c 版本 java 版本 php 版本 (转)
要实现消息推送功能,我们可以采用第三方(腾讯:信鸽:百度:云推送:极光推送:友盟):当然,因为各种原因,我们不能使用第三方的推送服务,那我们就需要自己编写服务端.在网上寻觅了很久,找到一篇很不错的讲解 ...
- js时间与时间戳之间的转换操作,返回天、小时、分,全家桶
1.将时间戳转换成时间 var formatDate = function(d) { var now = new Date(d); var year = now.getFullYear(); var ...
- JS的封装(JS插件的封装)
JS中类的概念类,实际上就是一个function,同时也是这个类的构造方法,new创建该类的实例,new出的对象有属性有方法.方法也是一种特殊的对象. 类的方法在构造方法中初始化实例的方法(就是在构造 ...
- wxpython 界面布局
1.frame.Centre() 窗口出来后显示居中 2.textCtrl文本框style=wx.TE_PASSWORD密码, wx.TE_MULTILINE多行输入 3.单选按钮组 4.列表 5.图 ...
- 面向对象设计之------Is-A(继承关系)、Has-A(合成关系,组合关系)和Use-A(依赖关系)(转)
原文url:http://blog.csdn.net/loveyou128144/article/details/4749576 @Is-A,Has-A,Use-A则是用来描述类与类之间关系的.简单的 ...
- java生成实体类的工具内部是如何实现的(mysql)
一.认识INFORMATION_SCHEMA数据库 INFORMATION_SCHEMA数据库提供了访问数据库元数据(数据的数据)的方式 该数据库中存放有数据库名.表名,列名.列的数据类型等各种数据 ...