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  

  • });  

  • });  

猜你喜欢