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;
        });
时间: 2024-08-27 06:03:00

jquery插件layer的相关文章

移动端下滑刷新插件(jQuery插件)

题外话:好久没写过博客了,感觉还是在校园的舒服.感觉实习都很累,一天负责得好多事情.不过值得炫耀的是,以前上大一时候,某老师拿出他们企业的项目,说这个项目单纯源代码就1个G.当时觉得,这么大的项目,肯定很多人一起做并且花费许多时间.现在出来实习了两个月,独自从前端到后台,都独自敲了上G的代码,觉得当时是没见过.而且现在一个人就承担公司大部分的业务,感觉还是不错的. 好了,回到话题,由于不能独自开发,而且为了给他们方便,自己写过不少的插件,不过今天刚好空闲,发出刚好完成的,移动端的下滑到底刷新插件

jQuery插件AjaxFileUpload实现ajax文件上传

jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script> <script type=&qu

jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

12个最新免费的jQuery插件周报#5(2015年)

(06/03/2015 至 13/03/2015)这周收集的12个最好.最新的12个免费jQuery插件 Elastic SVG Sidebar Material Design 弹性SVG侧栏导航,受 Material Design 启发 Animating labels for input form 非常适合于小屏幕的动画浮动标签. jQuery Light Carousel Light Carousel 是一个轻量级的响应式 jQuery carousel轮播. jQuery polygon

jquery 插件 起步代码

/** * Created by W.J.Chang on 2014/6/25. */ ;(function($) { var methods= { check: function() { return this.each(function() { this.checked = true; }); } }; $.fn.pager = function(method) { if ( methods[method] ) { return methods[ method ].apply( this,

ichat在线客服jQuery插件(可能是历史上最灵活的)

ichat是一款开源免费在线客服jQuery插件,通过该插件,您可以自由的定制属于自己的在线客服代码. ichat充分吸收传统在线客服插件的优点,并加上自身的独特设计,使得ichat可定制性异常强大. ichat追求简单实用,走小清新路线,以便能够适应大多数网站风格. ichat几乎全部由配置生成,使用简便,不需要写html,但需要写js,因为配置是json对象. ichat体积小巧,代码高效,兼容性良好,采用jQuery插件封装,与原有系统零冲突. 效果预览图: 更多内容参见: ichat项目

第七章(插件的使用和写法)(7.6 编写 jQuery 插件)

7.6.1 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. jQuery 的插件主要分为3种类型. 1 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的 jQuery 对象进行操作,是最常见的一种插件. 据不完全统计,95%以上的 jQuery 插件都是封装对象方法的插件,此类插件可以发挥出 jQuery 选择器的强大优势.有相当一部分的 jQuery 的方法,都是在 jQuery 脚本库内部通过这种

Jquery插件使用方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

原创jquery插件treeTable(转)

由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. 在网上找到了很多资料,发现treeTable方面的组件质量都不高,有些还不错样式不符合,性能也比较差.想想树表也挺简单的,不就是通过隐藏或者展现某些tr来实现嘛.于是乎,自己写一个. 2011年5月4号恰好放假一个下午,于是在家里风风火火开始构造自己的树表插件. 样式我就用了http://www.h