jquery layer弹窗弹层插件 小巧强大

版权声明：本文为博主原创文章，未经博主允许不得转载。

[javascript] view
plain copy

print?

/*

先去官网下载最新的js http://sentsin.com/jquery/layer/
①引用jquery

②引用layer.min.js

*/

触发弹层的事件可自由绑定，如：

$('#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

});

});