layer和jquery是什么关系知乎

/* 

先去官网下载最新的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: <p style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background-color:#eee;"><p>我从左边来，我自定了风格。</p><button id="pagebtn" class="btns" onclick="">关闭</button></p>  

}  

});  

//自设关闭  

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

});  

});