注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

国内极其强大的弹出层多功能jquery插件layer

UI fishcity 2290浏览

多功能jquery插件layer

layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。

在与同类弹出层插件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被677920人次关注)。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。

layer遵循LGPL协议,将永久性提供无偿服务。历经两年,截至到2014年7月5号,已运用在15万家web平台,其中包括中国联通、蚂蚁短租、phpyun、中国网等知名网站,如果您有大型项目也在使用layer,您可以联系作者,以便在此展现案例,也为您的品牌推广尽一些绵薄之力。

因为是国产的,官方有极其详细的文档,在此就不多些一举了,直接过官方看吧。

//触发弹层的事件可自由绑定,如:
$('#id').on('click', function(){
    layer.msg('test');
});
//下面主要贴出上述例子的调用代码:
//【信息框】:
layer.alert('白菜级别前端攻城师贤心', 8); //风格一
layer.msg('前端攻城师贤心'); //风格二
//当然,远远不止这两种风格。

//【询问框】:
$.layer({
    shade: [0],
    area: ['auto','auto'],
    dialog: {
        msg: '您是如何看待前端开发?',
        btns: 2,                    
        type: 4,
        btn: ['重要','奇葩'],
        yes: function(){
            layer.msg('重要', 1, 1);
        }, no: function(){
            layer.msg('奇葩', 1, 13);
        }
    }
});
//还可用layer.confirm()快捷调用

//【页面层一】
$.layer({
    type: 1,
    shade: [0],
    area: ['auto', 'auto'],
    title: false,
    border: [0],
    page: {dom : '.layer_notice'}
});

//【页面层二】
var pageii = $.layer({
    type: 1,
    title: false,
    area: ['auto', 'auto'],
    border: [0], //去掉默认边框
    shade: [0], //去掉遮罩
    closeBtn: [0, false], //去掉默认关闭按钮
    shift: 'left', //从左动画弹出
    page: {
        html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background-color:#eee;"><p>我从左边来,我自定了风格。</p><button id="pagebtn" class="btns" onclick="">关闭</button></div>'
    }
});
//自设关闭
$('#pagebtn').on('click', function(){
    layer.close(pageii);
});

//【iframe层一】
$.layer({
    type: 2,
    shadeClose: true,
    title: false,
    closeBtn: [0, false],
    shade: [0.8, '#000'],
    border: [0],
    offset: ['20px',''],
    area: ['1000px', ($(window).height() - 50) +'px'],
    iframe: {src: 'http://f2e.sentsin.com/chat'}
}); 

//【iframe层二】
layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, {
    time: 5,
    maxWidth: 260
});
$.layer({
    type: 2,
    closeBtn: false,
    shadeClose: true,
    shade: [0.1, '#fff'],
    border: [0],
    time: 5,
    iframe: {
        src: 'test/guodu.html'
    },
    title: false,
    area: ['300px','250px'],
    shift: 'right-bottom',
    end: function(){
        $.layer({
            type : 2,
            title: '贤心博客 - sentsin.com',
            shadeClose: true,
            maxmin: true,
            fix : false,  
            area: ['1024px', 500],                     
            iframe: {
                src : 'http://sentsin.com/'
            } 
        });
    }
});

//【加载层一】
layer.load(3);

//【加载层二】
layer.load('加载带文字', 3);

//【tips层一】
layer.tips('tips的样式并非是固定的,您可自定义外观。', this, {
    style: ['background-color:#78BA32; color:#fff', '#78BA32'],
    maxWidth:185,
    time: 3,
    closeBtn:[0, true]
});

//【tips层二】
layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2});

//【输入/文件层】
//普通文本
layer.prompt({title: '您的名字?'}, function(name){
    alert(name);
});
//密码文本
layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){
    alert(pass);
});
//文件上传
layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){
    alert(file);
});
//多行文本
layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){
    alert(val);
});

//【tab层】
layer.tab({
    area: ['1000px', '500px'],
    data: [
        {title: 'Say', content:'Hi,Main'},
        {title: '无题', content:'支持html传入'}                    
    ]
});

//【相册层】
//此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json
var conf = {};
$.getJSON('ajax地址', {}, function(json){
    conf.photoJSON = json; //保存json,以便下次直接读取内存数据
    layer.photos({
        html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭',
        json: json
    });
});

转载请注明:jQ酷 » 国内极其强大的弹出层多功能jquery插件layer

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。