初始化
This commit is contained in:
@@ -0,0 +1,105 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>layer-更懂你的web弹窗解决方案</title>
|
||||
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="layer/layer.js"></script>
|
||||
|
||||
<style>
|
||||
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
|
||||
a,a:hover{ text-decoration:none;}
|
||||
pre{font-family:'微软雅黑'}
|
||||
.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
|
||||
.box a{padding-right:15px;}
|
||||
#about_hide{display:none}
|
||||
.layer_text{background-color:#fff; padding:20px;}
|
||||
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
|
||||
.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
|
||||
.photos-demo img{width:200px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<pre>
|
||||
@Name：layer-v<script>document.write(layer.v)</script> 弹层组件说明
|
||||
@Author：贤心
|
||||
@Blog：<a href="http://sentsin.com" target="_blank">http://sentsin.com</a>
|
||||
@Site：<a href="http://layer.layui.com/?form=local" target="_blank">http://layer.layui.com</a>
|
||||
@Github：<a href="https://github.com/sentsin/layer" target="_blank">https://github.com/sentsin/layer</a>
|
||||
|
||||
|
||||
<strong>【注意事项】</strong>
|
||||
一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
|
||||
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
|
||||
三、jquery需1.8+
|
||||
四、更多使用说明与演示，请参见layer官网。
|
||||
五、使用时请务必保留来源，请勿用于违反我国法律的web平台。
|
||||
六、layer遵循LGPL协议，将永久性提供无偿服务。版权最终解释权：贤心。
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h2 style="padding-bottom:20px;">扩展模块：图片查看器（相册层）</h2>
|
||||
<div id="photosDemo" class="photos-demo">
|
||||
<!-- layer-src表示大图 layer-pid表示图片id src表示缩略图-->
|
||||
|
||||
<img layer-src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg" layer-pid="" src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg" alt="layer宣传图">
|
||||
<img layer-src="http://sentsin.qiniudn.com/sentsinmy5.jpg" layer-pid="" src="http://sentsin.qiniudn.com/sentsinmy5.jpg" alt="我入互联网这五年">
|
||||
<img layer-src="" layer-pid="" src="http://sentsin.qiniudn.com/sentsin_39101a660cf4671b7ec297a74cc652c74152104f.jpg" alt="微摄影">
|
||||
<img layer-src="http://sentsin.qiniudn.com/sentsinsan01.jpg" layer-pid="" src="http://sentsin.qiniudn.com/sentsinsan01.jpg" alt="三清山">
|
||||
<img layer-src="http://ww2.sinaimg.cn/mw1024/5db11ff4jw1ehcyirr6quj20q00ex42w.jpg" layer-pid="" src="http://ww2.sinaimg.cn/mw1024/5db11ff4jw1ehcyirr6quj20q00ex42w.jpg" alt="国足">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box" style="text-align:center">
|
||||
<a href="http://layer.layui.com/?form=local" target="_blank">更多示例</a>
|
||||
<a href="http://layer.layui.com/api.html" target="_blank">使用文档</a>
|
||||
<a href="http://fly.layui.com" target="_blank" title="Fly">交流反馈</a>
|
||||
<a href="javascript:;" id="about">关于</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
;!function(){
|
||||
|
||||
//加载扩展模块
|
||||
layer.config({
|
||||
extend: 'extend/layer.ext.js'
|
||||
});
|
||||
|
||||
//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
|
||||
layer.ready(function(){
|
||||
//官网欢迎页
|
||||
layer.open({
|
||||
type: 2,
|
||||
//skin: 'layui-layer-lan',
|
||||
title: 'layer弹层组件',
|
||||
fix: false,
|
||||
shadeClose: true,
|
||||
maxmin: true,
|
||||
area: ['1000px', '500px'],
|
||||
content: 'http://layer.layui.com/?form=local',
|
||||
end: function(){
|
||||
layer.tips('试试相册模块？', '#photosDemo', {tips: 1})
|
||||
}
|
||||
});
|
||||
|
||||
//layer.msg('欢迎使用layer');
|
||||
|
||||
//使用相册
|
||||
layer.photos({
|
||||
photos: '#photosDemo'
|
||||
});
|
||||
});
|
||||
|
||||
//关于
|
||||
$('#about').on('click', function(){
|
||||
layer.alert(layer.v + ' - 贤心出品 sentsin.com');
|
||||
});
|
||||
|
||||
}();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,6 @@
|
||||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,2
|
||||
[InternetShortcut]
|
||||
URL=http://code.jquery.com/jquery-1.9.1.min.js
|
||||
IDList=
|
||||
HotKey=0
|
||||
@@ -0,0 +1,8 @@
|
||||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,2
|
||||
[InternetShortcut]
|
||||
URL=http://fly.layui.com/
|
||||
IDList=
|
||||
HotKey=0
|
||||
IconFile=F:\bd_xianxin\bayuanbao\www\favicon.ico
|
||||
IconIndex=0
|
||||
@@ -0,0 +1,6 @@
|
||||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,2
|
||||
[InternetShortcut]
|
||||
URL=http://sentsin.com/jquery/layer/
|
||||
IDList=
|
||||
HotKey=0
|
||||
@@ -0,0 +1,2 @@
|
||||
/*! layer弹层组件拓展类 */
|
||||
;!function(){layer.use("skin/layer.ext.css",function(){layer.layui_layer_extendlayerextjs=!0});var a=layer.cache||{},b=function(b){return a.skin?" "+a.skin+" "+a.skin+"-"+b:""};layer.prompt=function(a,c){a=a||{},"function"==typeof a&&(c=a);var d,e=2==a.formType?'<textarea class="layui-layer-input">'+(a.value||"")+"</textarea>":function(){return'<input type="'+(1==a.formType?"password":"text")+'" class="layui-layer-input" value="'+(a.value||"")+'">'}();return layer.open($.extend({btn:["确定","取消"],content:e,skin:"layui-layer-prompt"+b("prompt"),success:function(a){d=a.find(".layui-layer-input"),d.focus()},yes:function(b){var e=d.val();""===e?d.focus():e.length>(a.maxlength||500)?layer.tips("最多输入"+(a.maxlength||500)+"个字数",d,{tips:1}):c&&c(e,b,d)}},a))},layer.tab=function(a){a=a||{};var c=a.tab||{};return layer.open($.extend({type:1,skin:"layui-layer-tab"+b("tab"),title:function(){var a=c.length,b=1,d="";if(a>0)for(d='<span class="layui-layer-tabnow">'+c[0].title+"</span>";a>b;b++)d+="<span>"+c[b].title+"</span>";return d}(),content:'<ul class="layui-layer-tabmain">'+function(){var a=c.length,b=1,d="";if(a>0)for(d='<li class="layui-layer-tabli xubox_tab_layer">'+(c[0].content||"no content")+"</li>";a>b;b++)d+='<li class="layui-layer-tabli">'+(c[b].content||"no content")+"</li>";return d}()+"</ul>",success:function(a){var b=a.find(".layui-layer-title").children(),c=a.find(".layui-layer-tabmain").children();b.on("mousedown",function(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0;var b=$(this),d=b.index();b.addClass("layui-layer-tabnow").siblings().removeClass("layui-layer-tabnow"),c.eq(d).show().siblings().hide()})}},a))},layer.photos=function(a,c,d){function e(a,b,c){var d=new Image;d.onload=function(){d.onload=null,b(d)},d.onerror=function(a){d.onerror=null,c(a)},d.src=a}var f={};if(a=a||{},a.photos){var g=a.photos.constructor===Object,h=g?a.photos:{},i=h.data||[],j=h.start||0;if(f.imgIndex=j+1,g){if(0===i.length)return void layer.msg("没有图片")}else{var k=$(a.photos),l=k.find(a.img||"img");if(0===l.length)return;if(c||k.find(h.img||"img").each(function(b){var c=$(this);i.push({alt:c.attr("alt"),pid:c.attr("layer-pid"),src:c.attr("layer-src")||c.attr("src"),thumb:c.attr("src")}),c.on("click",function(){layer.photos($.extend(a,{photos:{start:b,data:i,tab:a.tab},full:a.full}),!0)})}),!c)return}f.imgprev=function(a){f.imgIndex--,f.imgIndex<1&&(f.imgIndex=i.length),f.tabimg(a)},f.imgnext=function(a,b){f.imgIndex++,f.imgIndex>i.length&&(f.imgIndex=1,b)||f.tabimg(a)},f.keyup=function(a){if(!f.end){var b=a.keyCode;a.preventDefault(),37===b?f.imgprev(!0):39===b?f.imgnext(!0):27===b&&layer.close(f.index)}},f.tabimg=function(b){i.length<=1||(h.start=f.imgIndex-1,layer.close(f.index),layer.photos(a,!0,b))},f.event=function(){f.bigimg.hover(function(){f.imgsee.show()},function(){f.imgsee.hide()}),f.bigimg.find(".layui-layer-imgprev").on("click",function(a){a.preventDefault(),f.imgprev()}),f.bigimg.find(".layui-layer-imgnext").on("click",function(a){a.preventDefault(),f.imgnext()}),$(document).on("keyup",f.keyup)},f.loadi=layer.load(1,{shade:"shade"in a?!1:.9,scrollbar:!1}),e(i[j].src,function(c){layer.close(f.loadi),f.index=layer.open($.extend({type:1,area:function(){var b=[c.width,c.height],d=[$(window).width()-100,$(window).height()-100];return!a.full&&b[0]>d[0]&&(b[0]=d[0],b[1]=b[0]*d[1]/b[0]),[b[0]+"px",b[1]+"px"]}(),title:!1,shade:.9,shadeClose:!0,closeBtn:!1,move:".layui-layer-phimg img",moveType:1,scrollbar:!1,moveOut:!0,shift:5*Math.random()|0,skin:"layui-layer-photos"+b("photos"),content:'<div class="layui-layer-phimg"><img src="'+i[j].src+'" alt="'+(i[j].alt||"")+'" layer-pid="'+i[j].pid+'"><div class="layui-layer-imgsee">'+(i.length>1?'<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>':"")+'<div class="layui-layer-imgbar" style="display:'+(d?"block":"")+'"><span class="layui-layer-imgtit"><a href="javascript:;">'+(i[j].alt||"")+"</a><em>"+f.imgIndex+"/"+i.length+"</em></span></div></div></div>",success:function(b,c){f.bigimg=b.find(".layui-layer-phimg"),f.imgsee=b.find(".layui-layer-imguide,.layui-layer-imgbar"),f.event(b),a.tab&&a.tab(i[j],b)},end:function(){f.end=!0,$(document).off("keyup",f.keyup)}},a))},function(){layer.close(f.loadi),layer.msg("当前图片地址异常<br>是否继续查看下一张？",{time:3e4,btn:["下一张","不看了"],yes:function(){i.length>1&&f.imgnext(!0,!0)}})})}}}();
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
|
||||
@Name: layer拓展样式
|
||||
@Date: 2012.12.13
|
||||
@Author: 贤心
|
||||
@blog: sentsin.com
|
||||
|
||||
*/.layui-layer-imgbar,.layui-layer-imgtit a,.layui-layer-tab .layui-layer-title span{text-overflow:ellipsis;white-space:nowrap}.layui-layer-iconext{background:url(default/icon-ext.png) no-repeat}html #layui_layer_skinlayerextcss{display:none;position:absolute;width:1989px}.layui-layer-prompt .layui-layer-input{display:block;width:220px;height:30px;margin:0 auto;line-height:30px;padding:0 5px;border:1px solid #ccc;box-shadow:1px 1px 5px rgba(0,0,0,.1) inset;color:#333}.layui-layer-prompt textarea.layui-layer-input{width:300px;height:100px;line-height:20px}.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4)}.layui-layer-tab .layui-layer-title{padding-left:0;border-bottom:1px solid #ccc;background-color:#eee;overflow:visible}.layui-layer-tab .layui-layer-title span{position:relative;float:left;min-width:80px;max-width:260px;padding:0 20px;text-align:center;cursor:default;overflow:hidden}.layui-layer-tab .layui-layer-title span.layui-layer-tabnow{height:43px;border-left:1px solid #ccc;border-right:1px solid #ccc;background-color:#fff;z-index:10}.layui-layer-tab .layui-layer-title span:first-child{border-left:none}.layui-layer-tabmain{line-height:24px;clear:both}.layui-layer-tabmain .layui-layer-tabli{display:none}.layui-layer-tabmain .layui-layer-tabli.xubox_tab_layer{display:block}.xubox_tabclose{position:absolute;right:10px;top:5px;cursor:pointer}.layui-layer-photos{-webkit-animation-duration:1s;animation-duration:1s;background:url(default/xubox_loading1.gif) center center no-repeat #000}.layui-layer-photos .layui-layer-content{overflow:hidden;text-align:center}.layui-layer-photos .layui-layer-phimg img{position:relative;width:100%;display:inline-block;*display:inline;*zoom:1;vertical-align:top}.layui-layer-imgbar,.layui-layer-imguide{display:none}.layui-layer-imgnext,.layui-layer-imgprev{position:absolute;top:50%;width:27px;_width:44px;height:44px;margin-top:-22px;outline:0;blr:expression(this.onFocus=this.blur())}.layui-layer-imgprev{left:10px;background-position:-5px -5px;_background-position:-70px -5px}.layui-layer-imgprev:hover{background-position:-33px -5px;_background-position:-120px -5px}.layui-layer-imgnext{right:10px;_right:8px;background-position:-5px -50px;_background-position:-70px -50px}.layui-layer-imgnext:hover{background-position:-33px -50px;_background-position:-120px -50px}.layui-layer-imgbar{position:absolute;left:0;bottom:0;width:100%;height:32px;line-height:32px;background-color:rgba(0,0,0,.8);background-color:#000\9;filter:Alpha(opacity=80);color:#fff;overflow:hidden;font-size:0}.layui-layer-imgtit *{display:inline-block;*display:inline;*zoom:1;vertical-align:top;font-size:12px}.layui-layer-imgtit a{max-width:65%;overflow:hidden;color:#fff}.layui-layer-imgtit a:hover{color:#fff;text-decoration:underline}.layui-layer-imgtit em{padding-left:10px;font-style:normal}
|
||||
@@ -0,0 +1,26 @@
|
||||
鉴于layer 2.0为其两个月的考验，也暴露了一些小问题，如今已经在2.1如数修复，但潜在的bug仍然在所难免，还希望您能继续反馈。
|
||||
（2.x对1.9+版本无缝兼容，可直接全文件覆盖升级。）
|
||||
|
||||
|
||||
【2.1】2015.11.04
|
||||
> 修复在使用seajs或者requirejs后，layer.ext.js报layer未定义的错误。
|
||||
> 修复弹出层后，回车键无效的bug。
|
||||
> 修复iframe层的success回调在ie8以下浏览器无效的bug
|
||||
> 修复只有一张图片时，并且该图片地址异常，不断弹出提示的bug。
|
||||
> 修复当设定moveEnd回调，即便层关闭，仍然触发该回调的bug
|
||||
> 即便采用模块加载，layer对象仍然保留全局，原因是layer自有模块需要。
|
||||
> 优化图标锯齿
|
||||
|
||||
【2.0】2015.09.01
|
||||
> 全新的默认皮肤
|
||||
> 修复按住Enter键时，出现不断弹层的bug。
|
||||
> 修复模块加载时，layer仍然暴露给了全局的bug。
|
||||
> 修复拖拽完毕回调moveEnd，在层关闭后拖拽鼠标仍然触发该回调的bug。
|
||||
> 确认和取消的回调除了yes和cancel外，还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调，可以使用 btn2: function(){}
|
||||
|
||||
== 拓展模块 ==
|
||||
> 修复通过<script>标签引入layer.ext.js时，出现Cannot read property 'skin' of undefined的报错问题。（虽然我们更推荐用layer.config()方式加载layer.ext.js）。
|
||||
> 如果相册只有一张图片，则不触发上/下一张。
|
||||
|
||||
|
||||
—— http://layer.layui.com
|
||||
Reference in New Issue
Block a user