mirror of https://github.com/layui/layer
layer1.8.5 - layer mobile 1.0
sentsin
commit
fdc578ab44
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
## 简要
|
||||
layer是一款口碑非常不错的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。
|
||||
|
||||
在与同类弹出层插件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，皆广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。
|
||||
|
||||
## 愿景
|
||||
致力于打造国内最盛行的弹层组件，为web开发提供强劲动力。
|
||||
|
||||
## 现状
|
||||
从两年前初出茅庐，到后来成为小众组件，再发展到今天，已为数以万计的人所熟知。
|
||||
据不完全统计，截至到2014年5月13号，layer已服务于15万多家web平台。
|
||||
其中包括：
|
||||
* [中国联通](http://app.10010.com/)
|
||||
* [蚂蚁短租](http://www.mayi.com/)
|
||||
* [phpyun](http://www.phpyun.com/)
|
||||
* [卡牌网](http://www.kapai.com/)
|
||||
* [八圆包](http://www.bayuanbao.com/)
|
||||
|
||||
|
||||
事实上我们无法获取到更多案例，所以如果您有大型项目也在使用layer，您可以联系作者，以便在layer官网展现，也为您的品牌推广尽一些绵薄之力。
|
||||
|
||||
## 日志
|
||||
【1.8.5更新日志】
|
||||
* 新增对title样式的自定义控制
|
||||
* 修复layer.prompt多行文本，设置默认值无效的bug
|
||||
|
||||
【1.8.4更新日志】
|
||||
* 新增浏览器窗口尺寸改变时的自适应定位
|
||||
* 新增属性shift，用于配置动画弹出（需要注意的是，之前的layer.shift()方法将在layer1.9遗弃，用shift属性取代）
|
||||
* 新增方法layer.title(name, index); 用于动态改变层的标题。
|
||||
* 修改弹出层默认初始坐标为垂直左右居中。
|
||||
* 开放多个tips，可通过配置tips: {more: true}开启。
|
||||
* 进一步完善tips的智能定位。
|
||||
* 放弃layer.ready方法，用jQuery的ready取代。
|
||||
* 进一步优化内部代码
|
||||
|
||||
== 拓展模块 ==
|
||||
* layer.prompt支持给表单传入默认值，如layer.prompt({val:'默认'}); 新增yes回调函数第二个参数为索引、第三个参数为表单元素。
|
||||
* 相册层新增tab回调函数，用于切换图片时进行相关操作
|
||||
* 相册层内部代码优化。
|
||||
|
||||
|
||||
## 备注
|
||||
[官网](http://sentsin.com/jquery/layer/)、[更新日志](https://github.com/sentsin/layer/blob/master/Update%20Notes.txt)、[Say交流](http://say.sentsin.com/home-48.html)
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>layer-更懂你的web弹窗解决方案</title>
|
||||
<script src="http://res.xiami.net/pc/lay/lib.js"></script>
|
||||
<script src="../layer.min.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;}
|
||||
.imgs img{width:300px;}
|
||||
</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>
|
||||
@官网：<a href="http://sentsin.com/jquery/layer" target="_blank">http://sentsin.com/jquery/layer</a>
|
||||
|
||||
|
||||
<strong>【注意事项】</strong>
|
||||
一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.min.js即可，除jQuery外，其它文件无需再引入。
|
||||
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您需要打开layer.min.js 去配置相对路径url。（默认采用自动获取layer所在的路径）
|
||||
三、jquery必须为1.8或1.8以上版本（原因，更小，性能更好，且新版layer使用了部分jq1.8+的特性），下载包里doc文件里有jquery1.9下载地址
|
||||
四、更多使用说明与演示（demo），请参见layer官网。
|
||||
五、使用时请务必保留来源，请勿用于违反我国法律的web平台。
|
||||
六、layer遵循LGPL协议，将永久性提供无偿服务。版权最终解释权：贤心。
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h2 style="padding-bottom:20px;">layer1.8相册模块，点击下述图片试试</h2>
|
||||
<div id="imgs" class="imgs">
|
||||
<img src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg" alt="layer宣传图">
|
||||
<img src="http://sentsin.qiniudn.com/sentsinmy5.jpg" alt="我入互联网这五年">
|
||||
<img src="http://sentsin.qiniudn.com/sentsin_39101a660cf4671b7ec297a74cc652c74152104f.jpg" alt="微摄影">
|
||||
<img src="http://sentsin.qiniudn.com/sentsinsan01.jpg" alt="三清山">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box" style="text-align:center">
|
||||
<a href="http://sentsin.com/jquery/layer/api.html" target="_blank">使用文档</a>
|
||||
<a href="http://say.sentsin.com/say-706.html" target="_blank">更新日志</a>
|
||||
<a href="http://say.sentsin.com/home-48.html" id="suggest">交流反馈</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
;!function(){
|
||||
|
||||
$(function(){
|
||||
$.layer({
|
||||
type: 2,
|
||||
title: [
|
||||
'官网',
|
||||
'background:#2B2E37; height:40px; color:#fff; border:none;' //自定义标题样式
|
||||
],
|
||||
border:[0],
|
||||
area: ['90%', '90%'],
|
||||
iframe: {src: 'http://sentsin.com/jquery/layer/?from=local'}
|
||||
})
|
||||
|
||||
layer.msg('hello，亲爱的朋友，当你看到这个的时候<br>意味着你已将layer下载到你的本地，并正常地运行了它。<br>layer是一款基于web的弹窗解决方案<br>旨在为你的产品增强体验。', 15, {
|
||||
rate: 'top',
|
||||
type: -1,
|
||||
shade: false
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
layer.use('extend/layer.ext.js', function(){
|
||||
//初始加载即调用，所以需放在ext回调里
|
||||
layer.ext = function(){
|
||||
layer.photosPage({
|
||||
html: '<div style="padding:20px;">这里传入自定义的html<p>相册支持左右方向键，支持Esc关闭</p><p>另外还可以通过异步返回json实现相册。更多用法详见官网。</p><p>'+ unescape("%u8FD8%u6709%u5E0C%u671B%u5927%u5BB6%u5E73%u65F6%u6709%u7A7A%u70B9%u4E0B%u5B98%u7F51%u7684%u5E7F%u544A%u54C8%uFF0C%u4E00%u5929%u4E0D%u8981%u8D85%u8FC7%u4E00%u6B21%uFF0C%u8C22%u8C22%u62C9") +'</p><p id="change"></p></div>',
|
||||
title: '快捷模式-获取页面元素包含的所有图片',
|
||||
id: 112, //相册id，可选
|
||||
parent: '#imgs'
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
$('#suggest').on('click',function(event){
|
||||
var height = $(window).height(), index = $.layer({
|
||||
type : 2,
|
||||
shade : [0.5 , '#000' , true],
|
||||
shadeClose : true,
|
||||
border : [!0],
|
||||
title : false,
|
||||
offset : ['25px',''],
|
||||
area : ['90%', (height - 50)+'px'],
|
||||
iframe : {src : $(this).attr('href')}
|
||||
});
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
}();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,365 @@
|
|||
/**
|
||||
|
||||
@Name: layer拓展类，依赖于layer
|
||||
@Date: 2014.08.13
|
||||
@Author: 贤心
|
||||
@Versions：1.8.5-ext
|
||||
@Api：http://sentsin.com/jquery/layer
|
||||
@Desc: 本拓展会持续更新
|
||||
|
||||
*/
|
||||
|
||||
layer.use('skin/layer.ext.css', function(){
|
||||
layer.ext && layer.ext();
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
|
||||
系统prompt
|
||||
|
||||
*/
|
||||
|
||||
layer.prompt = function(parme, yes, no){
|
||||
var log = {}, parme = parme || {}, conf = {
|
||||
area: ['auto', 'auto'],
|
||||
offset: [parme.top || '', ''],
|
||||
title: parme.title || '信息',
|
||||
dialog: {
|
||||
btns: 2,
|
||||
type: -1,
|
||||
msg: '<input type="'+ function(){
|
||||
if(parme.type === 1){ //密码
|
||||
return 'password';
|
||||
} else if(parme.type === 2) {
|
||||
return 'file';
|
||||
} else {
|
||||
return 'text';
|
||||
}
|
||||
}() +'" class="xubox_prompt xubox_form" id="xubox_prompt" value="'+ (parme.val || '') +'" />',
|
||||
yes: function(index){
|
||||
var val = log.prompt.val();
|
||||
if(val === ''){
|
||||
log.prompt.focus();
|
||||
} else if(val.replace(/\s/g, '').length > (parme.length || 1000)) {
|
||||
layer.tips('最多输入'+ (parme.length || 1000) +'个字数', '#xubox_prompt', 2);
|
||||
} else {
|
||||
yes && yes(val, index, log.prompt);
|
||||
}
|
||||
|
||||
}, no: no
|
||||
}, success: function(){
|
||||
log.prompt = $('#xubox_prompt');
|
||||
log.prompt.focus();
|
||||
}
|
||||
};
|
||||
if(parme.type === 3){
|
||||
conf.dialog.msg = '<textarea class="xubox_prompt xubox_form xubox_formArea" id="xubox_prompt">'+ (parme.val || '') +'</textarea>'
|
||||
}
|
||||
return $.layer(conf);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
|
||||
tab层
|
||||
|
||||
*/
|
||||
|
||||
layer.tab = function(parme){
|
||||
var log = {}, parme = parme || {}, data = parme.data || [], conf = {
|
||||
type: 1,
|
||||
border: [0],
|
||||
area: ['auto', 'auto'],
|
||||
bgcolor: '',
|
||||
title: false,
|
||||
shade : parme.shade,
|
||||
offset: parme.offset,
|
||||
move: '.xubox_tabmove',
|
||||
closeBtn: false,
|
||||
page: {html: '<div class="xubox_tab" style="'+ function(){
|
||||
parme.area = parme.area || [];
|
||||
return 'width:'+ (parme.area[0] || '500px') +'; height:'+ (parme.area[1] || '300px') +'">';
|
||||
}()
|
||||
+'<span class="xubox_tabmove"></span>'
|
||||
+'<div class="xubox_tabtit">'
|
||||
+function(){
|
||||
var len = data.length, ii = 1, str = '';
|
||||
if(len > 0){
|
||||
str = '<span class="xubox_tabnow">'+ data[0].title +'</span>';
|
||||
for(; ii < len; ii++){
|
||||
str += '<span>'+ data[ii].title +'</span>';
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}() +'</div>'
|
||||
+'<ul class="xubox_tab_main">'+ function(){
|
||||
var len = data.length, ii = 1, str = '';
|
||||
if(len > 0){
|
||||
str = '<li class="xubox_tabli xubox_tab_layer">'+ (data[0].content || 'content未传入') +'</li>';
|
||||
for(; ii < len; ii++){
|
||||
str += '<li class="xubox_tabli">'+ (data[ii].content || 'content未传入') +'</li>';
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}() +'</ul>'
|
||||
+'<span class="xubox_tabclose" title="关闭">X</span>'
|
||||
+'</div>'
|
||||
}, success: function(layerE){
|
||||
//切换事件
|
||||
var btn = $('.xubox_tabtit').children(), main = $('.xubox_tab_main').children(), close = $('.xubox_tabclose');
|
||||
btn.on('click', function(){
|
||||
var othis = $(this), index = othis.index();
|
||||
othis.addClass('xubox_tabnow').siblings().removeClass('xubox_tabnow');
|
||||
main.eq(index).show().siblings().hide();
|
||||
});
|
||||
//关闭层
|
||||
close.on('click', function(){
|
||||
layer.close(layerE.attr('times'));
|
||||
});
|
||||
}
|
||||
};
|
||||
return $.layer(conf);
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
|
||||
相册层
|
||||
|
||||
*/
|
||||
|
||||
|
||||
layer.photos = function(options){
|
||||
options = options || {};
|
||||
var log = {
|
||||
imgIndex: 1,
|
||||
end: null,
|
||||
html: $('html')
|
||||
}, win = $(window), json = options.json, page = options.page;
|
||||
|
||||
if(json){
|
||||
var data = json.data;
|
||||
if(json.status === 1){
|
||||
log.imgLen = data.length;
|
||||
if(data.length > 0){
|
||||
log.thissrc = data[json.start].src;
|
||||
log.pid = data[json.start].pid;
|
||||
log.imgsname = (json.title || '');
|
||||
log.name = data[json.start].name;
|
||||
log.imgIndex = json.start + 1;
|
||||
} else {
|
||||
layer.msg('没有任何图片', 2, 8);
|
||||
return;
|
||||
}
|
||||
|
||||
} else {
|
||||
layer.msg('未请求到数据', 2, 8);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
var imgs = $(page.parent).find('img'), nowimg = imgs.eq(page.start);
|
||||
log.thissrc = (nowimg.attr('layer-img') || nowimg.attr('src'));
|
||||
log.pid = nowimg.attr('pid');
|
||||
log.imgLen = imgs.length;
|
||||
log.imgsname = (page.title || '');
|
||||
log.name = nowimg.attr('alt');
|
||||
log.imgIndex = page.start + 1;
|
||||
}
|
||||
|
||||
var conf = {
|
||||
type: 1,
|
||||
border: [0],
|
||||
area: [(options.html ? 915 : 600) + 'px', 'auto'],
|
||||
title: false,
|
||||
shade: [0.9, '#000', true],
|
||||
shadeClose: true,
|
||||
offset: ['25px', ''],
|
||||
bgcolor: '',
|
||||
page: {
|
||||
html: '<div class="xubox_bigimg"><img src="'+ log.thissrc +'" alt="'+ (log.name || '') +'" layer-pid="'+ (log.pid || '') +'"><div class="xubox_imgsee">'+ function(){
|
||||
if(log.imgLen > 1){
|
||||
return '<a href="" class="xubox_iconext xubox_prev"></a><a href="" class="xubox_iconext xubox_next"></a>'
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}() +'<div class="xubox_imgbar"><span class="xubox_imgtit"><a href="javascript:;">'+ log.imgsname +' </a><em>'+ log.imgIndex +'/'+ log.imgLen +'</em></span></div></div></div>'+ function(){
|
||||
if(options.html){
|
||||
return '<div class="xubox_intro">'+ options.html +'</div>';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}()
|
||||
}, success: function(layero){
|
||||
log.bigimg = layero.find('.xubox_bigimg');
|
||||
log.imgsee = log.bigimg.find('.xubox_imgsee');
|
||||
log.imgbar = log.imgsee.find('.xubox_imgbar');
|
||||
log.imgtit = log.imgbar.find('.xubox_imgtit');
|
||||
log.layero = layero;
|
||||
|
||||
var img = log.imgs = log.bigimg.find('img');
|
||||
|
||||
clearTimeout(log.timerr);
|
||||
log.timerr = setTimeout(function(){
|
||||
$('html').css('overflow', 'hidden').attr('layer-full', log.index);
|
||||
}, 10);
|
||||
|
||||
img.load(function(){
|
||||
log.imgarea = [img.outerWidth(), img.outerHeight()];
|
||||
log.resize(layero);
|
||||
});
|
||||
|
||||
log.event();
|
||||
|
||||
}, end: function(){
|
||||
layer.closeAll();
|
||||
log.end = true;
|
||||
}
|
||||
};
|
||||
|
||||
//一些动作
|
||||
log.event = function(){
|
||||
log.bigimg.hover(function(){
|
||||
log.imgsee.show();
|
||||
}, function(){
|
||||
log.imgsee.hide();
|
||||
});
|
||||
|
||||
//上一张
|
||||
conf.imgprev = function(){
|
||||
log.imgIndex--;
|
||||
if(log.imgIndex < 1){
|
||||
log.imgIndex = log.imgLen;
|
||||
}
|
||||
log.tabimg();
|
||||
};
|
||||
log.bigimg.find('.xubox_prev').on('click', function(event){
|
||||
event.preventDefault();
|
||||
conf.imgprev();
|
||||
});
|
||||
|
||||
//下一张
|
||||
conf.imgnext = function(){
|
||||
log.imgIndex++;
|
||||
if(log.imgIndex > log.imgLen){
|
||||
log.imgIndex = 1;
|
||||
}
|
||||
log.tabimg()
|
||||
};
|
||||
log.bigimg.find('.xubox_next').on('click', function(event){
|
||||
event.preventDefault();
|
||||
conf.imgnext();
|
||||
});
|
||||
|
||||
//方向键
|
||||
$(document).keyup(function(event){
|
||||
if(!log.end){
|
||||
var code = event.keyCode;
|
||||
event.preventDefault();
|
||||
if(code === 37){
|
||||
conf.imgprev();
|
||||
} else if(code === 39) {
|
||||
conf.imgnext();
|
||||
} else if(code === 27) {
|
||||
layer.close(log.index);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
log.tabimg = function(){
|
||||
var timer, src, pid, name;
|
||||
log.imgs.removeAttr('style');
|
||||
if(json){
|
||||
var nowdata = data[log.imgIndex - 1];
|
||||
src = nowdata.src;
|
||||
pid = nowdata.pid;
|
||||
name = nowdata.name;
|
||||
} else {
|
||||
var thisimg = imgs.eq(log.imgIndex - 1);
|
||||
src = thisimg.attr('layer-img') || thisimg.attr('src');
|
||||
pid = thisimg.attr('layer-pid') || '';
|
||||
name = thisimg.attr('alt') || '';
|
||||
}
|
||||
log.imgs.attr({
|
||||
src: src,
|
||||
'layer-pid': pid,
|
||||
alt: name
|
||||
});
|
||||
log.imgtit.find('em').text(log.imgIndex + '/' + log.imgLen);
|
||||
log.imgsee.show();
|
||||
options.tab && options.tab({pid: pid, name: name});
|
||||
}
|
||||
};
|
||||
|
||||
//相册响应式
|
||||
log.resize = function(layero){
|
||||
var relog = {}, wa = [win.width(), win.height()];
|
||||
relog.limit = wa[0] - wa[0]/wa[1]*(60*wa[0]/wa[1]);
|
||||
if(relog.limit < 600){
|
||||
relog.limit = 600;
|
||||
}
|
||||
var area = [relog.limit, wa[1] > 400 ? wa[1] - 50 : 400];
|
||||
area[0] = options.html ? area[0] : (area[0] - 300);
|
||||
layer.area(log.index, {
|
||||
width: area[0] + (options.html ? 15 : 0),
|
||||
height: area[1]
|
||||
});
|
||||
relog.flwidth = area[0] - (options.html ? 300 : 0);
|
||||
if(log.imgarea[0] > relog.flwidth){
|
||||
log.imgs.css({width: relog.flwidth});
|
||||
} else {
|
||||
log.imgs.css({width: log.imgarea[0]});
|
||||
}
|
||||
if(log.imgs.outerHeight() < area[1]){
|
||||
log.imgs.css({top: (area[1] - log.imgs.outerHeight())/2});
|
||||
}
|
||||
log.imgs.css({visibility: 'visible'});
|
||||
log.bigimg.css({width: relog.flwidth, height: area[1], 'background-color': options.bgcolor});
|
||||
if(options.html){
|
||||
layero.find('.xubox_intro').css({height: area[1]});
|
||||
}
|
||||
relog = null;
|
||||
wa = null;
|
||||
area = null;
|
||||
};
|
||||
|
||||
win.on('resize', function(){
|
||||
if(log.end){
|
||||
return;
|
||||
}
|
||||
if(log.timer){
|
||||
clearTimeout(log.timer);
|
||||
}
|
||||
log.timer = setTimeout(function(){
|
||||
log.resize(log.layero);
|
||||
}, 200);
|
||||
});
|
||||
|
||||
log.index = $.layer(conf);
|
||||
return log.index;
|
||||
};
|
||||
|
||||
//获取页面元素包含的所有图片，快捷调用
|
||||
layer.photosPage = function(options){
|
||||
var log = {};
|
||||
log.run = function(index){
|
||||
layer.photos({
|
||||
html: options.html,
|
||||
success: options.success,
|
||||
page: {
|
||||
title: options.title,
|
||||
id: options.id,
|
||||
start: index,
|
||||
parent: options.parent
|
||||
}
|
||||
});
|
||||
};
|
||||
options = options || {};
|
||||
$(options.parent).find('img').each(function(index){
|
||||
$(this).on('click', function(){
|
||||
log.run(index);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,970 @@
|
|||
/****************************************
|
||||
|
||||
@Name：layer v1.8.5 弹层组件开发版
|
||||
@Author：贤心
|
||||
@Date：2014-08-13
|
||||
@Blog：http://sentsin.com
|
||||
@Copyright：Sentsin Xu(贤心)
|
||||
@官网：http://sentsin.com/jquery/layer
|
||||
|
||||
*/
|
||||
|
||||
;!function(window, undefined){
|
||||
"use strict";
|
||||
|
||||
var path = '', //组件存放目录，为空表示自动获取(不用填写host，相对站点的根目录即可)。
|
||||
|
||||
$, win, ready = {
|
||||
host: 'http://' + location.host,
|
||||
getPath: function(){
|
||||
var js = document.scripts, jsPath = js[js.length - 1].src;
|
||||
return path ? ready.host + path : jsPath.substring(0, jsPath.lastIndexOf("/") + 1);
|
||||
},
|
||||
|
||||
//五种原始层模式
|
||||
type: ['dialog', 'page', 'iframe', 'loading', 'tips']
|
||||
};
|
||||
|
||||
//默认内置方法。
|
||||
window.layer = {
|
||||
v: '1.8.5',
|
||||
ie6: !-[1,] && !window.XMLHttpRequest,
|
||||
index: 0,
|
||||
path: ready.getPath(),
|
||||
|
||||
//载入模块
|
||||
use: function(module, callback){
|
||||
var i = 0, head = $('head')[0];
|
||||
var module = module.replace(/\s/g, '');
|
||||
var iscss = /\.css$/.test(module);
|
||||
var node = document.createElement(iscss ? 'link' : 'script');
|
||||
var id = module.replace(/\.|\//g, '');
|
||||
if(iscss){
|
||||
node.type = 'text/css';
|
||||
node.rel = 'stylesheet';
|
||||
}
|
||||
node[iscss ? 'href' : 'src'] = /^http:\/\//.test(module) ? module : layer.path + module;
|
||||
node.id = id;
|
||||
if(!$('#'+ id)[0]){
|
||||
head.appendChild(node);
|
||||
}
|
||||
if(callback){
|
||||
if(document.all){
|
||||
$(node).ready(callback);
|
||||
} else {
|
||||
$(node).load(callback);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
alert: function(msg, icon, fn, yes){
|
||||
var isfn = (typeof fn === 'function'), conf = {
|
||||
dialog: {msg: msg, type: icon, yes: isfn ? fn : yes},
|
||||
area: ['auto', 'auto']
|
||||
};
|
||||
isfn || (conf.title = fn);
|
||||
return $.layer(conf);
|
||||
},
|
||||
|
||||
confirm: function(msg, yes, fn, no){
|
||||
var isfn = (typeof fn === 'function'), conf = {
|
||||
dialog: {msg: msg, type: 4, btns: 2, yes: yes, no: isfn ? fn : no}
|
||||
};
|
||||
isfn || (conf.title = fn);
|
||||
return $.layer(conf);
|
||||
},
|
||||
|
||||
msg: function(msg, time, parme, end){
|
||||
var conf = {
|
||||
title: false,
|
||||
closeBtn: false,
|
||||
time: time === undefined ? 2 : time,
|
||||
dialog: {msg: (msg === '' || msg === undefined) ? ' ' : msg},
|
||||
end: end
|
||||
};
|
||||
if(typeof parme === 'object'){
|
||||
conf.dialog.type = parme.type;
|
||||
conf.shade = parme.shade;
|
||||
conf.shift = parme.rate;
|
||||
} else if(typeof parme === 'function') {
|
||||
conf.end = parme
|
||||
} else {
|
||||
conf.dialog.type = parme;
|
||||
}
|
||||
return $.layer(conf);
|
||||
},
|
||||
|
||||
//加载层快捷引用
|
||||
load: function(parme, icon){
|
||||
if(typeof parme === 'string'){
|
||||
return layer.msg(parme, icon || 0, 16);
|
||||
} else {
|
||||
return $.layer({
|
||||
time: parme,
|
||||
loading: {type : icon},
|
||||
bgcolor: icon ? '#fff' : '',
|
||||
shade: icon ? [0.1, '#000'] : [0],
|
||||
border: (icon === 3 || !icon) ? [0] : [6, 0.3, '#000'],
|
||||
type : 3,
|
||||
title : ['',false],
|
||||
closeBtn : [0 , false]
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//tips层快捷引用
|
||||
tips: function(html, follow, parme, maxWidth, guide, style){
|
||||
var conf = {
|
||||
type: 4, shade: false,
|
||||
success: function(layero){
|
||||
if(!this.closeBtn){
|
||||
layero.find('.xubox_tips').css({'padding-right': 10});
|
||||
}
|
||||
},
|
||||
bgcolor:'', tips: {msg: html, follow: follow}
|
||||
};
|
||||
conf.time = typeof parme === 'object' ? parme.time : (parme|0);
|
||||
parme = parme || {};
|
||||
conf.closeBtn = parme.closeBtn || false
|
||||
conf.maxWidth = parme.maxWidth || maxWidth;
|
||||
conf.tips.guide = parme.guide || guide;
|
||||
conf.tips.style = parme.style || style;
|
||||
conf.tips.more = parme.more;
|
||||
return $.layer(conf);
|
||||
}
|
||||
};
|
||||
|
||||
//缓存常用字符
|
||||
var doms = ['xubox_layer', 'xubox_iframe', '.xubox_title', '.xubox_text', '.xubox_page', '.xubox_main'];
|
||||
|
||||
var Class = function(setings){
|
||||
var that = this, config = that.config;
|
||||
layer.index++;
|
||||
that.index = layer.index;
|
||||
that.config = $.extend({} , config , setings);
|
||||
that.config.dialog = $.extend({}, config.dialog , setings.dialog);
|
||||
that.config.page = $.extend({}, config.page , setings.page);
|
||||
that.config.iframe = $.extend({}, config.iframe , setings.iframe);
|
||||
that.config.loading = $.extend({}, config.loading , setings.loading);
|
||||
that.config.tips = $.extend({}, config.tips , setings.tips);
|
||||
that.creat();
|
||||
};
|
||||
|
||||
Class.pt = Class.prototype;
|
||||
|
||||
//默认配置
|
||||
Class.pt.config = {
|
||||
type: 0,
|
||||
shade: [0.3, '#000'],
|
||||
fix: true,
|
||||
move: '.xubox_title',
|
||||
title: '信息',
|
||||
offset: ['', '50%'],
|
||||
area: ['310px', 'auto'],
|
||||
closeBtn: [0, true],
|
||||
time: 0,
|
||||
bgcolor: '#fff',
|
||||
border: [6, 0.3, '#000'],
|
||||
zIndex: 19891014,
|
||||
maxWidth: 400,
|
||||
dialog: {btns: 1, btn: ['确定','取消'], type : 8, msg: '', yes: function(index){layer.close(index);}, no: function(index){layer.close(index);}},
|
||||
page: {dom: '#xulayer', html: '', url: ''},
|
||||
iframe: {src: 'http://sentsin.com', scrolling: 'auto'},
|
||||
loading: {type: 0},
|
||||
tips: {msg: '', follow: '', guide: 0, isGuide: true, style: ['background-color:#FF9900; color:#fff;', '#FF9900']},
|
||||
success: function(layer){}, //创建成功后的回调
|
||||
close: function(index){ layer.close(index);}, //右上角关闭回调
|
||||
end: function(){} //终极销毁回调
|
||||
};
|
||||
|
||||
//容器
|
||||
Class.pt.space = function(html){
|
||||
var that = this, html = html || '', times = that.index, config = that.config, dialog = config.dialog,
|
||||
ico = dialog.type === -1 ? '' : '<span class="xubox_msg xulayer_png32 xubox_msgico xubox_msgtype' + dialog.type + '"></span>',
|
||||
frame = [
|
||||
'<div class="xubox_dialog">'+ ico +'<span class="xubox_msg xubox_text" style="'+ (ico ? '' : 'padding-left:20px') +'">' + dialog.msg + '</span></div>',
|
||||
'<div class="xubox_page">'+ html +'</div>',
|
||||
'<iframe scrolling="'+ config.iframe.scrolling +'" allowtransparency="true" id="'+ doms[1] +''+ times +'" name="'+ doms[1] +''+ times +'" onload="this.className=\''+ doms[1] +'\'" class="'+ doms[1] +'" frameborder="0" src="' + config.iframe.src + '"></iframe>',
|
||||
'<span class="xubox_loading xubox_loading_'+ config.loading.type +'"></span>',
|
||||
'<div class="xubox_tips" style="'+ config.tips.style[0] +'"><div class="xubox_tipsMsg">'+ config.tips.msg +'</div><i class="layerTipsG"></i></div>'
|
||||
],
|
||||
shade = '' , border = '', zIndex = config.zIndex + times,
|
||||
shadeStyle = 'z-index:'+ zIndex +'; background-color:'+ config.shade[1] +'; opacity:'+ config.shade[0] +'; filter:alpha(opacity='+ config.shade[0]*100 +');';
|
||||
config.shade[0] && (shade = '<div times="'+ times +'" id="xubox_shade' + times + '" class="xubox_shade" style="'+ shadeStyle +'"></div>');
|
||||
|
||||
config.zIndex = zIndex;
|
||||
var title = '', closebtn = '', borderStyle = "z-index:"+ (zIndex-1) +"; background-color: "+ config.border[2] +"; opacity:"+ config.border[1] +"; filter:alpha(opacity="+ config.border[1]*100 +"); top:-"+ config.border[0] +"px; left:-"+ config.border[0] +"px;";
|
||||
config.border[0] && (border = '<div id="xubox_border'+ times +'" class="xubox_border" style="'+ borderStyle +'"></div>');
|
||||
|
||||
if(config.maxmin && (config.type === 1 || config.type === 2) && (!/^\d+%$/.test(config.area[0]) || !/^\d+%$/.test(config.area[1]))){
|
||||
closebtn = '<a class="xubox_min" href="javascript:;"><cite></cite></a><a class="xubox_max xulayer_png32" href="javascript:;"></a>';
|
||||
}
|
||||
config.closeBtn[1] && (closebtn += '<a class="xubox_close xulayer_png32 xubox_close' + config.closeBtn[0] +'" href="javascript:;" style="'+ (config.type === 4 ? 'position:absolute; right:-3px; _right:7px; top:-4px;' : '') +'"></a>');
|
||||
var titype = typeof config.title === 'object';
|
||||
config.title && (title = '<div class="xubox_title" style="'+ (titype ? config.title[1] : '') +'"><em>' + (titype ? config.title[0] : config.title) + '</em></div>');
|
||||
return [shade,
|
||||
'<div times="'+ times +'" showtime="'+ config.time +'" style="z-index:'+ zIndex +'" id="'+ doms[0] +''+ times
|
||||
+'" class="'+ doms[0] +'">'
|
||||
+ '<div style="background-color:'+ config.bgcolor +'; z-index:'+ zIndex +'" class="xubox_main">'
|
||||
+ frame[config.type]
|
||||
+ title
|
||||
+ '<span class="xubox_setwin">'+ closebtn + '</span>'
|
||||
+ '<span class="xubox_botton"></span>'
|
||||
+ '</div>'+ border + '</div>'
|
||||
];
|
||||
};
|
||||
|
||||
//创建骨架
|
||||
Class.pt.creat = function(){
|
||||
var that = this , space = '', config = that.config, dialog = config.dialog, times = that.index;
|
||||
var page = config.page, body = $("body"), setSpace = function(html){
|
||||
var html = html || '';
|
||||
space = that.space(html);
|
||||
body.append($(space[0]));
|
||||
};
|
||||
|
||||
switch(config.type){
|
||||
case 0:
|
||||
config.title || (config.area = ['auto','auto']);
|
||||
$('.xubox_dialog')[0] && layer.close($('.xubox_dialog').parents('.'+ doms[0]).attr('times'));
|
||||
break;
|
||||
|
||||
case 1:
|
||||
if(page.html !== ''){
|
||||
setSpace('<div class="xuboxPageHtml">'+ page.html +'</div>');
|
||||
body.append($(space[1]));
|
||||
} else if (page.url !== ''){
|
||||
setSpace('<div class="xuboxPageHtml" id="xuboxPageHtml'+ times +'">'+ page.html +'</div>');
|
||||
body.append($(space[1]));
|
||||
$.get(page.url, function(datas){
|
||||
$('#xuboxPageHtml'+ times).html(datas.toString());
|
||||
page.ok && page.ok(datas);
|
||||
});
|
||||
} else {
|
||||
if($(page.dom).parents(doms[4]).length == 0){
|
||||
setSpace();
|
||||
$(page.dom).show().wrap($(space[1]));
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 3:
|
||||
config.title = false;
|
||||
config.area = ['auto', 'auto'];
|
||||
config.closeBtn = ['', false];
|
||||
$('.xubox_loading')[0] && layer.closeLoad();
|
||||
break;
|
||||
|
||||
case 4:
|
||||
config.title = false;
|
||||
config.area = ['auto', 'auto'];
|
||||
config.fix = false;
|
||||
config.border = [0];
|
||||
config.tips.more || layer.closeTips();
|
||||
break;
|
||||
};
|
||||
if(config.type !== 1){
|
||||
setSpace();
|
||||
body.append($(space[1]));
|
||||
}
|
||||
|
||||
var layerE = that.layerE = $('#'+ doms[0] + times);
|
||||
|
||||
layerE.css({width: config.area[0], height: config.area[1]});
|
||||
config.fix || layerE.css({position: 'absolute'});
|
||||
|
||||
//配置按钮
|
||||
if(config.title && (config.type !== 3 || config.type !== 4)){
|
||||
var confbtn = config.type === 0 ? dialog : config, layerBtn = layerE.find('.xubox_botton');
|
||||
confbtn.btn = config.btn || dialog.btn;
|
||||
switch(confbtn.btns){
|
||||
case 0:
|
||||
layerBtn.html('').hide();
|
||||
break;
|
||||
case 1:
|
||||
layerBtn.html('<a href="javascript:;" class="xubox_yes xubox_botton1">'+ confbtn.btn[0] +'</a>');
|
||||
break;
|
||||
case 2:
|
||||
layerBtn.html('<a href="javascript:;" class="xubox_yes xubox_botton2">'+ confbtn.btn[0] +'</a>' + '<a href="javascript:;" class="xubox_no xubox_botton3">'+ confbtn.btn[1] + '</a>');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(layerE.css('left') === 'auto'){
|
||||
layerE.hide();
|
||||
setTimeout(function(){
|
||||
layerE.show();
|
||||
that.set(times);
|
||||
}, 500);
|
||||
}else{
|
||||
that.set(times);
|
||||
}
|
||||
config.time <= 0 || that.autoclose();
|
||||
that.callback();
|
||||
};
|
||||
|
||||
ready.fade = function(obj, time, opa){
|
||||
obj.css({opacity: 0}).animate({opacity: opa}, time);
|
||||
};
|
||||
|
||||
//计算坐标
|
||||
Class.pt.offset = function(){
|
||||
var that = this, config = that.config, layerE = that.layerE, laywid = layerE.outerHeight();
|
||||
if(config.offset[0] === '' && laywid < win.height()){
|
||||
that.offsetTop = (win.height() - laywid - 2*config.border[0])/2;
|
||||
}else if(config.offset[0].indexOf("px") != -1){
|
||||
that.offsetTop = parseFloat(config.offset[0]);
|
||||
} else {
|
||||
that.offsetTop = parseFloat(config.offset[0]||0)/100 * win.height();
|
||||
}
|
||||
that.offsetTop = that.offsetTop + config.border[0] + (config.fix ? 0 : win.scrollTop());
|
||||
if(config.offset[1].indexOf("px") != -1){
|
||||
that.offsetLeft = parseFloat(config.offset[1]) + config.border[0];
|
||||
} else {
|
||||
config.offset[1] = config.offset[1] === '' ? '50%' : config.offset[1];
|
||||
if(config.offset[1] === '50%'){
|
||||
that.offsetLeft = config.offset[1];
|
||||
}else{
|
||||
that.offsetLeft = parseFloat(config.offset[1])/100 * win.width() + config.border[0];
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
//初始化骨架
|
||||
Class.pt.set = function(times){
|
||||
var that = this;
|
||||
var config = that.config;
|
||||
var dialog = config.dialog;
|
||||
var page = config.page;
|
||||
var loading = config.loading;
|
||||
var layerE = that.layerE;
|
||||
var layerTitle = layerE.find(doms[2]);
|
||||
|
||||
that.autoArea(times);
|
||||
|
||||
if(config.title){
|
||||
if(config.type === 0){
|
||||
layer.ie6 && layerTitle.css({width : layerE.outerWidth()});
|
||||
}
|
||||
}else{
|
||||
config.type !== 4 && layerE.find('.xubox_close').addClass('xubox_close1');
|
||||
};
|
||||
|
||||
layerE.attr({'type' : ready.type[config.type]});
|
||||
that.offset();
|
||||
|
||||
//判断是否动画弹出
|
||||
if(config.type !== 4){
|
||||
if(config.shift && !layer.ie6){
|
||||
if(typeof config.shift === 'object'){
|
||||
that.shift(config.shift[0], config.shift[1]||500, config.shift[2]);
|
||||
} else {
|
||||
that.shift(config.shift, 500);
|
||||
}
|
||||
} else {
|
||||
layerE.css({top: that.offsetTop, left: that.offsetLeft});
|
||||
}
|
||||
}
|
||||
|
||||
switch(config.type){
|
||||
case 0:
|
||||
layerE.find(doms[5]).css({'background-color': '#fff'});
|
||||
if(config.title){
|
||||
layerE.find(doms[3]).css({paddingTop: 18 + layerTitle.outerHeight()});
|
||||
}else{
|
||||
layerE.find('.xubox_msgico').css({top: 8});
|
||||
layerE.find(doms[3]).css({marginTop : 11});
|
||||
}
|
||||
break;
|
||||
|
||||
case 1:
|
||||
layerE.find(page.dom).addClass('layer_pageContent');
|
||||
config.shade[0] && layerE.css({zIndex: config.zIndex + 1});
|
||||
config.title && layerE.find(doms[4]).css({top: layerTitle.outerHeight()});
|
||||
break;
|
||||
|
||||
case 2:
|
||||
var iframe = layerE.find('.'+ doms[1]), heg = layerE.height();
|
||||
iframe.addClass('xubox_load').css({width: layerE.width()});
|
||||
config.title ? iframe.css({top: layerTitle.height(), height: heg - layerTitle.height()}) : iframe.css({top: 0, height : heg});
|
||||
layer.ie6 && iframe.attr('src', config.iframe.src);
|
||||
break;
|
||||
|
||||
case 4:
|
||||
var layArea = [0, layerE.outerHeight()], fow = $(config.tips.follow), fowo = {
|
||||
width: fow.outerWidth(),
|
||||
height: fow.outerHeight(),
|
||||
top: fow.offset().top,
|
||||
left: fow.offset().left
|
||||
}, tipsG = layerE.find('.layerTipsG');
|
||||
|
||||
config.tips.isGuide || tipsG.remove();
|
||||
layerE.outerWidth() > config.maxWidth && layerE.width(config.maxWidth);
|
||||
|
||||
fowo.tipColor = config.tips.style[1];
|
||||
layArea[0] = layerE.outerWidth();
|
||||
|
||||
fowo.autoLeft = function(){
|
||||
if(fowo.left + layArea[0] - win.width() > 0){
|
||||
fowo.tipLeft = fowo.left + fowo.width - layArea[0];
|
||||
tipsG.css({right: 12, left: 'auto'});
|
||||
} else {
|
||||
fowo.tipLeft = fowo.left;
|
||||
};
|
||||
};
|
||||
|
||||
//辨别tips的方位
|
||||
fowo.where = [function(){ //上
|
||||
fowo.autoLeft();
|
||||
fowo.tipTop = fowo.top - layArea[1] - 10;
|
||||
tipsG.removeClass('layerTipsB').addClass('layerTipsT').css({'border-right-color': fowo.tipColor});
|
||||
}, function(){ //右
|
||||
fowo.tipLeft = fowo.left + fowo.width + 10;
|
||||
fowo.tipTop = fowo.top;
|
||||
tipsG.removeClass('layerTipsL').addClass('layerTipsR').css({'border-bottom-color': fowo.tipColor});
|
||||
}, function(){ //下
|
||||
fowo.autoLeft();
|
||||
fowo.tipTop = fowo.top + fowo.height + 10;
|
||||
tipsG.removeClass('layerTipsT').addClass('layerTipsB').css({'border-right-color': fowo.tipColor});
|
||||
}, function(){ //左
|
||||
fowo.tipLeft = fowo.left - layArea[0] + 10;
|
||||
fowo.tipTop = fowo.top;
|
||||
tipsG.removeClass('layerTipsR').addClass('layerTipsL').css({'border-bottom-color': fowo.tipColor});
|
||||
}];
|
||||
fowo.where[config.tips.guide]();
|
||||
|
||||
/* 8*2为小三角形占据的空间 */
|
||||
if(config.tips.guide === 0){
|
||||
fowo.top - (win.scrollTop() + layArea[1] + 8*2) < 0 && fowo.where[2]();
|
||||
} else if(config.tips.guide === 1){
|
||||
win.width() - (fowo.left + fowo.width + layArea[0] + 8*2) > 0 || fowo.where[3]()
|
||||
} else if(config.tips.guide === 2){
|
||||
(fowo.top - win.scrollTop() + fowo.height + layArea[1] + 8*2) - win.height() > 0 && fowo.where[0]();
|
||||
} else if(config.tips.guide === 3){
|
||||
layArea[0] + 8*2 - fowo.left > 0 && fowo.where[1]()
|
||||
} else if(config.tips.guide === 4){
|
||||
|
||||
}
|
||||
layerE.css({left: fowo.tipLeft, top: fowo.tipTop});
|
||||
break;
|
||||
};
|
||||
|
||||
if(config.fadeIn){
|
||||
ready.fade(layerE, config.fadeIn, 1);
|
||||
ready.fade($('#xubox_shade'+ times), config.fadeIn, config.shade[0]);
|
||||
}
|
||||
|
||||
//坐标自适应浏览器窗口尺寸
|
||||
if(config.fix && config.offset[0] === '' && !config.shift){
|
||||
win.on('resize', function(){
|
||||
layerE.css({top: (win.height() - layerE.outerHeight())/2});
|
||||
});
|
||||
}
|
||||
|
||||
that.move();
|
||||
};
|
||||
|
||||
//动画进入
|
||||
Class.pt.shift = function(type, rate, stop){
|
||||
var that = this, config = that.config;
|
||||
var layerE = that.layerE;
|
||||
var cutWth = 0, ww = win.width();
|
||||
var wh = win.height() + (config.fix ? 0 : win.scrollTop());
|
||||
|
||||
if(config.offset[1] == '50%' || config.offset[1] == ''){
|
||||
cutWth = layerE.outerWidth()/2;
|
||||
} else {
|
||||
cutWth = layerE.outerWidth();
|
||||
}
|
||||
|
||||
var anim = {
|
||||
t: {top: that.offsetTop},
|
||||
b: {top : wh - layerE.outerHeight() - config.border[0]},
|
||||
cl: cutWth + config.border[0],
|
||||
ct: -layerE.outerHeight(),
|
||||
cr: ww - cutWth - config.border[0]
|
||||
};
|
||||
|
||||
switch(type){
|
||||
case 'left-top':
|
||||
layerE.css({left: anim.cl, top: anim.ct}).animate(anim.t, rate);
|
||||
break;
|
||||
case 'top':
|
||||
layerE.css({top: anim.ct}).animate(anim.t, rate);
|
||||
break;
|
||||
case 'right-top':
|
||||
layerE.css({left: anim.cr, top: anim.ct}).animate(anim.t, rate);
|
||||
break;
|
||||
case 'right-bottom':
|
||||
layerE.css({left: anim.cr, top: wh}).animate(stop ? anim.t : anim.b, rate);
|
||||
break;
|
||||
case 'bottom':
|
||||
layerE.css({top: wh}).animate(stop ? anim.t : anim.b, rate);
|
||||
break;
|
||||
case 'left-bottom':
|
||||
layerE.css({left: anim.cl, top: wh}).animate(stop ? anim.t : anim.b, rate);
|
||||
break;
|
||||
case 'left':
|
||||
layerE.css({left: -layerE.outerWidth()}).animate({left: that.offsetLeft}, rate);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
//自适应宽高
|
||||
Class.pt.autoArea = function(times){
|
||||
var that = this, times = times || that.index, config = that.config, page = config.page;
|
||||
var layerE = $('#'+ doms[0] + times), layerTitle = layerE.find(doms[2]), layerMian = layerE.find(doms[5]);
|
||||
var titHeight = config.title ? layerTitle.innerHeight() : 0, outHeight, btnHeight = 0;
|
||||
if(config.area[0] === 'auto' && layerMian.outerWidth() >= config.maxWidth){
|
||||
layerE.css({width : config.maxWidth});
|
||||
}
|
||||
switch(config.type){
|
||||
case 0:
|
||||
var aBtn = layerE.find('.xubox_botton>a');
|
||||
outHeight = layerE.find(doms[3]).outerHeight() + 20;
|
||||
if(aBtn.length > 0){
|
||||
btnHeight = aBtn.outerHeight() + 20;
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
var layerPage = layerE.find(doms[4]);
|
||||
outHeight = $(page.dom).outerHeight();
|
||||
config.area[0] === 'auto' && layerE.css({width : layerPage.outerWidth()});
|
||||
if(page.html !== '' || page.url !== ''){
|
||||
outHeight = layerPage.outerHeight();
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
layerE.find('iframe').css({width: layerE.outerWidth(), height: layerE.outerHeight() - (config.title ? layerTitle.innerHeight() : 0)});
|
||||
break;
|
||||
case 3:
|
||||
var load = layerE.find(".xubox_loading");
|
||||
outHeight = load.outerHeight();
|
||||
layerMian.css({width: load.width()});
|
||||
break;
|
||||
};
|
||||
(config.area[1] === 'auto') && layerMian.css({height: titHeight + outHeight + btnHeight});
|
||||
$('#xubox_border' + times).css({width: layerE.outerWidth() + 2*config.border[0] , height: layerE.outerHeight() + 2*config.border[0]});
|
||||
(layer.ie6 && config.area[0] !== 'auto') && layerMian.css({width : layerE.outerWidth()});
|
||||
(config.offset[1] === '50%' || config.offset[1] == '') && (config.type !== 4) ? layerE.css({marginLeft : -layerE.outerWidth()/2}) : layerE.css({marginLeft : 0});
|
||||
};
|
||||
|
||||
//拖拽层
|
||||
Class.pt.move = function(){
|
||||
var that = this, config = that.config, conf = {
|
||||
setY: 0,
|
||||
moveLayer: function(){
|
||||
if(parseInt(conf.layerE.css('margin-left')) == 0){
|
||||
var lefts = parseInt(conf.move.css('left'));
|
||||
}else{
|
||||
var lefts = parseInt(conf.move.css('left')) + (-parseInt(conf.layerE.css('margin-left')))
|
||||
}
|
||||
if(conf.layerE.css('position') !== 'fixed'){
|
||||
lefts = lefts - conf.layerE.parent().offset().left;
|
||||
conf.setY = 0
|
||||
}
|
||||
conf.layerE.css({left: lefts, top: parseInt(conf.move.css('top')) - conf.setY});
|
||||
}
|
||||
};
|
||||
|
||||
var movedom = that.layerE.find(config.move);
|
||||
config.move && movedom.attr('move','ok');
|
||||
config.move ? movedom.css({cursor: 'move'}) : movedom.css({cursor: 'auto'});
|
||||
|
||||
$(config.move).on('mousedown', function(M){
|
||||
M.preventDefault();
|
||||
if($(this).attr('move') === 'ok'){
|
||||
conf.ismove = true;
|
||||
conf.layerE = $(this).parents('.'+ doms[0]);
|
||||
var xx = conf.layerE.offset().left, yy = conf.layerE.offset().top, ww = conf.layerE.width() - 6, hh = conf.layerE.height() - 6;
|
||||
if(!$('#xubox_moves')[0]){
|
||||
$('body').append('<div id="xubox_moves" class="xubox_moves" style="left:'+ xx +'px; top:'+ yy +'px; width:'+ ww +'px; height:'+ hh +'px; z-index:2147483584"></div>');
|
||||
}
|
||||
conf.move = $('#xubox_moves');
|
||||
config.moveType && conf.move.css({opacity: 0});
|
||||
|
||||
conf.moveX = M.pageX - conf.move.position().left;
|
||||
conf.moveY = M.pageY - conf.move.position().top;
|
||||
conf.layerE.css('position') !== 'fixed' || (conf.setY = win.scrollTop());
|
||||
}
|
||||
});
|
||||
|
||||
$(document).mousemove(function(M){
|
||||
if(conf.ismove){
|
||||
var offsetX = M.pageX - conf.moveX, offsetY = M.pageY - conf.moveY;
|
||||
M.preventDefault();
|
||||
|
||||
//控制元素不被拖出窗口外
|
||||
if(!config.moveOut){
|
||||
conf.setY = win.scrollTop();
|
||||
var setRig = win.width() - conf.move.outerWidth() - config.border[0], setTop = config.border[0] + conf.setY;
|
||||
offsetX < config.border[0] && (offsetX = config.border[0]);
|
||||
offsetX > setRig && (offsetX = setRig);
|
||||
offsetY < setTop && (offsetY = setTop);
|
||||
offsetY > win.height() - conf.move.outerHeight() - config.border[0] + conf.setY && (offsetY = win.height() - conf.move.outerHeight() - config.border[0] + conf.setY);
|
||||
}
|
||||
|
||||
conf.move.css({left: offsetX, top: offsetY});
|
||||
config.moveType && conf.moveLayer();
|
||||
|
||||
offsetX = null;
|
||||
offsetY = null;
|
||||
setRig = null;
|
||||
setTop = null
|
||||
}
|
||||
}).mouseup(function(){
|
||||
try{
|
||||
if(conf.ismove){
|
||||
conf.moveLayer();
|
||||
conf.move.remove();
|
||||
}
|
||||
conf.ismove = false;
|
||||
}catch(e){
|
||||
conf.ismove = false;
|
||||
}
|
||||
config.moveEnd && config.moveEnd();
|
||||
});
|
||||
};
|
||||
|
||||
//自动关闭layer
|
||||
Class.pt.autoclose = function(){
|
||||
var that = this, time = that.config.time, maxLoad = function(){
|
||||
time--;
|
||||
if(time === 0){
|
||||
layer.close(that.index);
|
||||
clearInterval(that.autotime);
|
||||
}
|
||||
};
|
||||
that.autotime = setInterval(maxLoad , 1000);
|
||||
};
|
||||
|
||||
ready.config = {
|
||||
end: {}
|
||||
};
|
||||
|
||||
Class.pt.callback = function(){
|
||||
var that = this, layerE = that.layerE, config = that.config, dialog = config.dialog;
|
||||
that.openLayer();
|
||||
that.config.success(layerE);
|
||||
layer.ie6 && that.IE6(layerE);
|
||||
|
||||
layerE.find('.xubox_close').on('click', function(){
|
||||
config.close(that.index);
|
||||
layer.close(that.index);
|
||||
});
|
||||
|
||||
layerE.find('.xubox_yes').on('click',function(){
|
||||
config.yes ? config.yes(that.index) : dialog.yes(that.index);
|
||||
});
|
||||
|
||||
layerE.find('.xubox_no').on('click',function(){
|
||||
config.no ? config.no(that.index) : dialog.no(that.index);
|
||||
layer.close(that.index);
|
||||
});
|
||||
|
||||
if(that.config.shadeClose){
|
||||
$('#xubox_shade'+ that.index).on('click', function(){
|
||||
layer.close(that.index);
|
||||
});
|
||||
}
|
||||
|
||||
//最小化
|
||||
layerE.find('.xubox_min').on('click', function(){
|
||||
layer.min(that.index, config);
|
||||
config.min && config.min(layerE);
|
||||
});
|
||||
|
||||
//全屏/还原
|
||||
layerE.find('.xubox_max').on('click', function(){
|
||||
if($(this).hasClass('xubox_maxmin')){
|
||||
layer.restore(that.index);
|
||||
config.restore && config.restore(layerE);
|
||||
} else {
|
||||
layer.full(that.index, config);
|
||||
config.full && config.full(layerE);
|
||||
}
|
||||
});
|
||||
|
||||
ready.config.end[that.index] = config.end;
|
||||
};
|
||||
|
||||
//恢复select
|
||||
ready.reselect = function(){
|
||||
$.each($('select'), function(index , value){
|
||||
var sthis = $(this);
|
||||
if(!sthis.parents('.'+doms[0])[0]){
|
||||
(sthis.attr('layer') == 1 && $('.'+doms[0]).length < 1) && sthis.removeAttr('layer').show();
|
||||
}
|
||||
sthis = null;
|
||||
});
|
||||
};
|
||||
|
||||
Class.pt.IE6 = function(layerE){
|
||||
var that = this;
|
||||
var _ieTop = layerE.offset().top;
|
||||
//ie6的固定与相对定位
|
||||
if(that.config.fix){
|
||||
var ie6Fix = function(){
|
||||
layerE.css({top : win.scrollTop() + _ieTop});
|
||||
};
|
||||
}else{
|
||||
var ie6Fix = function(){
|
||||
layerE.css({top : _ieTop});
|
||||
};
|
||||
}
|
||||
ie6Fix();
|
||||
win.scroll(ie6Fix);
|
||||
|
||||
//隐藏select
|
||||
$.each($('select'), function(index , value){
|
||||
var sthis = $(this);
|
||||
if(!sthis.parents('.'+doms[0])[0]){
|
||||
sthis.css('display') == 'none' || sthis.attr({'layer' : '1'}).hide();
|
||||
}
|
||||
sthis = null;
|
||||
});
|
||||
};
|
||||
|
||||
//给layer对象拓展方法
|
||||
Class.pt.openLayer = function(){
|
||||
var that = this, layerE = that.layerE;
|
||||
|
||||
//自适应宽高
|
||||
layer.autoArea = function(index){
|
||||
return that.autoArea(index);
|
||||
};
|
||||
|
||||
//兼容旧版出场动画
|
||||
layer.shift = function(type, rate, stop){
|
||||
that.shift(type, rate, stop);
|
||||
};
|
||||
|
||||
//初始化拖拽元素
|
||||
layer.setMove = function(){
|
||||
return that.move();
|
||||
};
|
||||
|
||||
//置顶当前窗口
|
||||
layer.zIndex = that.config.zIndex;
|
||||
layer.setTop = function(layerNow){
|
||||
var setZindex = function(){
|
||||
layer.zIndex++;
|
||||
layerNow.css('z-index', layer.zIndex + 1);
|
||||
};
|
||||
layer.zIndex = parseInt(layerNow[0].style.zIndex);
|
||||
layerNow.on('mousedown', setZindex);
|
||||
return layer.zIndex;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
ready.isauto = function(layero, options, offset){
|
||||
options.area[0] === 'auto' && (options.area[0] = layero.outerWidth());
|
||||
options.area[1] === 'auto' && (options.area[1] = layero.outerHeight());
|
||||
layero.attr({area: options.area + ',' + offset});
|
||||
layero.find('.xubox_max').addClass('xubox_maxmin');
|
||||
};
|
||||
|
||||
ready.rescollbar = function(index){
|
||||
if(doms.html.attr('layer-full') == index){
|
||||
if(doms.html[0].style.removeProperty){
|
||||
doms.html[0].style.removeProperty('overflow');
|
||||
} else {
|
||||
doms.html[0].style.removeAttribute('overflow');
|
||||
}
|
||||
doms.html.removeAttr('layer-full');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 集成属性/方法
|
||||
**/
|
||||
|
||||
|
||||
//获取page层所在索引
|
||||
layer.getIndex = function(selector){
|
||||
return $(selector).parents('.'+doms[0]).attr('times');
|
||||
};
|
||||
|
||||
//获取子iframe的DOM
|
||||
layer.getChildFrame = function(selector, index){
|
||||
index = index || $('.'+ doms[1]).parents('.'+doms[0]).attr('times');
|
||||
return $('#'+ doms[0] + index).find('.'+ doms[1]).contents().find(selector);
|
||||
};
|
||||
|
||||
//得到当前iframe层的索引，子iframe时使用
|
||||
layer.getFrameIndex = function(name){
|
||||
return $(name ? '#'+ name : '.'+ doms[1]).parents('.'+doms[0]).attr('times');
|
||||
};
|
||||
|
||||
//iframe层自适应宽高
|
||||
layer.iframeAuto = function(index){
|
||||
index = index || $('.'+ doms[1]).parents('.'+doms[0]).attr('times');
|
||||
var heg = layer.getChildFrame('body', index).outerHeight(),
|
||||
layero = $('#'+ doms[0] + index), tit = layero.find(doms[2]), titHt = 0;
|
||||
tit && (titHt = tit.height());
|
||||
layero.css({height: heg + titHt});
|
||||
var bs = -parseInt($('#xubox_border'+ index).css('top'));
|
||||
$('#xubox_border'+ index).css({height: heg + 2*bs + titHt});
|
||||
$('#'+ doms[1] + index).css({height: heg});
|
||||
};
|
||||
|
||||
//重置iframe url
|
||||
layer.iframeSrc = function(index, url){
|
||||
$('#'+ doms[0] + index).find('iframe').attr('src', url);
|
||||
};
|
||||
|
||||
//重置层
|
||||
layer.area = function(index, options){
|
||||
var layero = [$('#'+ doms[0] + index), $('#xubox_border'+ index)],
|
||||
type = layero[0].attr('type'), main = layero[0].find(doms[5]),
|
||||
title = layero[0].find(doms[2]);
|
||||
|
||||
if(type === ready.type[1] || type === ready.type[2]){
|
||||
layero[0].css(options);
|
||||
main.css({width: options.width, height: options.height});
|
||||
if(type === ready.type[2]){
|
||||
var iframe = layero[0].find('iframe');
|
||||
iframe.css({width: options.width, height: title ? options.height - title.innerHeight() : options.height});
|
||||
}
|
||||
if(layero[0].css('margin-left') !== '0px') {
|
||||
options.hasOwnProperty('top') && layero[0].css({top: options.top - (layero[1][0] ? parseFloat(layero[1].css('top')) : 0)});
|
||||
options.hasOwnProperty('left') && layero[0].css({left: options.left + layero[0].outerWidth()/2 - (layero[1][0] ? parseFloat(layero[1].css('left')) : 0)});
|
||||
layero[0].css({marginLeft : -layero[0].outerWidth()/2});
|
||||
}
|
||||
if(layero[1][0]){
|
||||
layero[1].css({
|
||||
width: parseFloat(options.width) - 2*parseFloat(layero[1].css('left')),
|
||||
height: parseFloat(options.height) - 2*parseFloat(layero[1].css('top'))
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//最小化
|
||||
layer.min = function(index, options){
|
||||
var layero = $('#'+ doms[0] + index), offset = [layero.position().top, layero.position().left + parseFloat(layero.css('margin-left'))];
|
||||
ready.isauto(layero, options, offset);
|
||||
layer.area(index, {width: 180, height: 35});
|
||||
layero.find('.xubox_min').hide();
|
||||
layero.attr('type') === 'page' && layero.find(doms[4]).hide();
|
||||
ready.rescollbar(index);
|
||||
};
|
||||
|
||||
//还原
|
||||
layer.restore = function(index){
|
||||
var layero = $('#'+ doms[0] + index), area = layero.attr('area').split(',');
|
||||
var type = layero.attr('type');
|
||||
layer.area(index, {
|
||||
width: parseFloat(area[0]),
|
||||
height: parseFloat(area[1]),
|
||||
top: parseFloat(area[2]),
|
||||
left: parseFloat(area[3])
|
||||
});
|
||||
layero.find('.xubox_max').removeClass('xubox_maxmin');
|
||||
layero.find('.xubox_min').show();
|
||||
layero.attr('type') === 'page' && layero.find(doms[4]).show();
|
||||
ready.rescollbar(index);
|
||||
};
|
||||
|
||||
//全屏
|
||||
layer.full = function(index, options){
|
||||
var layero = $('#'+ doms[0] + index), borders = options.border[0]*2 || 6, timer;
|
||||
var offset = [layero.position().top, layero.position().left + parseFloat(layero.css('margin-left'))];
|
||||
ready.isauto(layero, options, offset);
|
||||
if(!doms.html.attr('layer-full')){
|
||||
doms.html.css('overflow','hidden').attr('layer-full', index);
|
||||
}
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function(){
|
||||
layer.area(index, {
|
||||
top: layero.css('position') === 'fixed' ? 0 : win.scrollTop(),
|
||||
left: layero.css('position') === 'fixed' ? 0 : win.scrollLeft(),
|
||||
width: win.width() - borders,
|
||||
height: win.height() - borders
|
||||
});
|
||||
}, 100);
|
||||
};
|
||||
|
||||
//改变title
|
||||
layer.title = function(name, index){
|
||||
var title = $('#'+ doms[0] + (index||layer.index)).find('.xubox_title>em');
|
||||
title.html(name);
|
||||
};
|
||||
|
||||
//关闭layer总方法
|
||||
layer.close = function(index){
|
||||
var layero = $('#'+ doms[0] + index), type = layero.attr('type'), shadeNow = $('#xubox_moves, #xubox_shade' + index);
|
||||
if(!layero[0]){
|
||||
return;
|
||||
}
|
||||
if(type == ready.type[1]){
|
||||
if(layero.find('.xuboxPageHtml')[0]){
|
||||
layero[0].innerHTML = '';
|
||||
layero.remove();
|
||||
}else{
|
||||
layero.find('.xubox_setwin,.xubox_close,.xubox_botton,.xubox_title,.xubox_border').remove();
|
||||
for(var i = 0 ; i < 3 ; i++){
|
||||
layero.find('.layer_pageContent').unwrap().hide();
|
||||
}
|
||||
}
|
||||
}else{
|
||||
layero[0].innerHTML = '';
|
||||
layero.remove();
|
||||
}
|
||||
shadeNow.remove();
|
||||
layer.ie6 && ready.reselect();
|
||||
ready.rescollbar(index);
|
||||
typeof ready.config.end[index] === 'function' && ready.config.end[index]();
|
||||
delete ready.config.end[index];
|
||||
};
|
||||
|
||||
//关闭loading层
|
||||
layer.closeLoad = function(){
|
||||
layer.close($('.xubox_loading').parents('.'+doms[0]).attr('times'));
|
||||
};
|
||||
|
||||
//关闭tips层
|
||||
layer.closeTips = function(){
|
||||
layer.closeAll('tips');
|
||||
};
|
||||
|
||||
//关闭所有层
|
||||
layer.closeAll = function(type){
|
||||
$.each($('.'+doms[0]), function(){
|
||||
var othis = $(this);
|
||||
var is = type ? (othis.attr('type') === type) : 1;
|
||||
if(is){
|
||||
layer.close(othis.attr('times'));
|
||||
}
|
||||
is = null;
|
||||
});
|
||||
};
|
||||
|
||||
//主入口
|
||||
ready.run = function(){
|
||||
$ = jQuery;
|
||||
win = $(window);
|
||||
doms.html = $('html');
|
||||
layer.use('skin/layer.css');
|
||||
$.layer = function(deliver){
|
||||
var o = new Class(deliver);
|
||||
return o.index;
|
||||
};
|
||||
(new Image()).src = layer.path + 'skin/default/xubox_ico0.png';
|
||||
};
|
||||
|
||||
var require = '../../init/jquery'; //若采用seajs，需正确配置jquery的相对路径。未用可无视此处。
|
||||
if(window.seajs){
|
||||
define([require], function(require, exports, module){
|
||||
ready.run();
|
||||
module.exports = layer;
|
||||
});
|
||||
}else{
|
||||
ready.run();
|
||||
}
|
||||
|
||||
}(window);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
## layer mobole
|
||||
layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层支撑，采用Native JavaScript编写，完全独立于PC版的layer，您需要按照场景选择使用。
|
||||
|
||||
[文档与演示](http://sentsin.com/layui/layer/)
|
||||
|
||||
1. 无需依赖任何库，只加载layer.m.js即可
|
||||
2. 小巧玲珑，性能卓越、柔情似水…
|
||||
3. 具备无以伦比的自适应功能
|
||||
4. 灵活的皮肤自定义支撑，充分确保弹层风格多样化
|
||||
5. 丰富、科学的接口，让弹弹弹层无所不能
|
||||
|
||||
## 备注
|
||||
[官网](http://sentsin.com/layui/layer/)、[有问必答](http://say.sentsin.com/home-48.html)
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
/****************************************
|
||||
|
||||
@Name：layer v1.0 弹层组件移动版
|
||||
@Author：贤心
|
||||
@Date：2014-08-24
|
||||
@Copyright：Sentsin Xu(贤心)
|
||||
@官网：http://sentsin.com/layui/layer
|
||||
@License：MIT
|
||||
|
||||
*/
|
||||
|
||||
;!function(win){
|
||||
"use strict";
|
||||
|
||||
var path = '' //所在路径，如果非模块加载不用配置
|
||||
? path : document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0];
|
||||
|
||||
var doc = document, elem = 'createElement', byid = 'getElementById', claname = 'getElementsByClassName';
|
||||
|
||||
document.head.appendChild((function(){
|
||||
var link = doc[elem]('link');
|
||||
link.href = path + 'need/layer.css';
|
||||
link.type="text/css";
|
||||
link.rel="styleSheet"
|
||||
link.id = 'layermcss';
|
||||
return link;
|
||||
}()));
|
||||
|
||||
var config = {
|
||||
shade: true,
|
||||
shadeClose: true,
|
||||
fixed: true
|
||||
};
|
||||
|
||||
var ready = {
|
||||
extend: function(obj){
|
||||
var newobj = JSON.parse(JSON.stringify(config));
|
||||
for(var i in obj){
|
||||
newobj[i] = obj[i];
|
||||
}
|
||||
return newobj;
|
||||
}, timer: {}
|
||||
};
|
||||
|
||||
var index = 0, classs = ['layermbox'];
|
||||
|
||||
function Layer(options){
|
||||
var that = this;
|
||||
that.config = ready.extend(options);
|
||||
that.view();
|
||||
};
|
||||
|
||||
Layer.prototype.view = function(){
|
||||
var that = this, config = that.config, layerbox = doc[elem]('div');
|
||||
|
||||
that.id = layerbox.id = classs[0] + index;
|
||||
layerbox.setAttribute('class', classs[0] + ' ' + classs[0]+(config.type || 0));
|
||||
layerbox.setAttribute('index', index);
|
||||
|
||||
var title = (function(){
|
||||
var titype = typeof config.title === 'object';
|
||||
return config.title
|
||||
? '<h3 style="'+ (titype ? config.title[1] : '') +'">'+ (titype ? config.title[0] : config.title) +'</h3><button class="layermend">×</button>'
|
||||
: '';
|
||||
}());
|
||||
|
||||
var button = (function(){
|
||||
var btns = (config.btn || []).length, btndom;
|
||||
if(btns === 0 || !config.btn){
|
||||
return '';
|
||||
}
|
||||
btndom = '<span type="1">'+ config.btn[0] +'</span>'
|
||||
if(btns === 2){
|
||||
btndom = '<span type="0">'+ config.btn[1] +'</span>' + btndom;
|
||||
}
|
||||
return '<div class="layermbtn">'+ btndom + '</div>';
|
||||
}());
|
||||
|
||||
if(!config.fixed){
|
||||
config.top = config.hasOwnProperty('top') ? config.top : 100;
|
||||
config.style = config.style || '';
|
||||
config.style += ' top:'+ ( doc.body.scrollTop + config.top) + 'px';
|
||||
}
|
||||
|
||||
layerbox.innerHTML = (config.shade ? '<div class="laymshade"></div>' : '')
|
||||
+'<div class="layermmain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
|
||||
+'<section>'
|
||||
+'<div class="layermchild" '+ ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
|
||||
+ title
|
||||
+'<div class="layermcont">'+ (config.content||' ') +'</div>'
|
||||
+ button
|
||||
+'</div>'
|
||||
+'</section>'
|
||||
+'</div>';
|
||||
|
||||
if(!config.type){
|
||||
var dialogs = doc[claname](classs[0]+'0'), dialen = dialogs.length;
|
||||
if(dialen >= 1){
|
||||
layer.close(dialogs[0].getAttribute('index'))
|
||||
}
|
||||
}
|
||||
|
||||
document.body.appendChild(layerbox);
|
||||
|
||||
setTimeout(function(){
|
||||
try{
|
||||
doc[byid](that.id).classList.add('layermshow');
|
||||
}catch(e){
|
||||
return;
|
||||
}
|
||||
config.success && config.success(doc[byid](that.id));
|
||||
}, 1);
|
||||
|
||||
that.index = index++;
|
||||
that.action(config);
|
||||
};
|
||||
|
||||
Layer.prototype.action = function(config){
|
||||
var that = this;
|
||||
|
||||
//自动关闭
|
||||
if(config.time){
|
||||
ready.timer[that.index] = setTimeout(function(){
|
||||
layer.close(that.index);
|
||||
}, config.time*1000);
|
||||
}
|
||||
|
||||
//关闭按钮
|
||||
if(config.title){
|
||||
doc[byid](that.id)[claname]('layermend')[0].onclick = function(){
|
||||
config.cancel && config.cancel();
|
||||
layer.close(that.index, config.end);
|
||||
};
|
||||
}
|
||||
|
||||
//确认取消
|
||||
if(config.btn){
|
||||
doc[byid](that.id)[claname]('layermbtn')[0].onclick = function(event){
|
||||
var type = event.target.getAttribute('type');
|
||||
if(type == 0){
|
||||
config.no && config.no();
|
||||
layer.close(that.index, config.end);
|
||||
} else {
|
||||
config.yes ? config.yes(that.index) : layer.close(that.index, config.end);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//点遮罩关闭
|
||||
if(config.shade && config.shadeClose){
|
||||
var shade = doc[byid](that.id)[claname]('laymshade')[0];
|
||||
shade.onclick = function(){
|
||||
layer.close(that.index, config.end);
|
||||
};
|
||||
shade.ontouchmove = function(){
|
||||
layer.close(that.index, config.end);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
var layer = {
|
||||
v: '1.0',
|
||||
index: index,
|
||||
|
||||
//核心方法
|
||||
open: function(options){
|
||||
var o = new Layer(options || {});
|
||||
return o.index;
|
||||
},
|
||||
|
||||
close: function(index, callback){
|
||||
var ibox = doc[byid](classs[0]+index);
|
||||
if(!ibox) return;
|
||||
ibox.innerHTML = '';
|
||||
doc.body.removeChild(ibox);
|
||||
clearTimeout(ready.timer[index]);
|
||||
delete ready.timer[index];
|
||||
callback && callback();
|
||||
},
|
||||
|
||||
//关闭所有layer层
|
||||
closeAll: function(){
|
||||
var boxs = document.getElementsByClassName(classs[0]);
|
||||
for(var i = 0, len = boxs.length; i < len; i++){
|
||||
layer.close(boxs[i].getAttribute('index'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
"function" === typeof define ? define(function() {
|
||||
return layer;
|
||||
}) : win.layer = layer;
|
||||
|
||||
}(window);
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/* layer-v1.0 弹层移动版 By 贤心 2014-08-24 http://sentsin.com/layui/layer */
|
||||
;!function(a){"use strict";function k(a){var b=this;b.config=h.extend(a),b.view()}var g,h,i,j,l,b=document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0],c=document,d="createElement",e="getElementById",f="getElementsByClassName";document.head.appendChild(function(){var a=c[d]("link");return a.href=b+"need/layer.css",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}()),g={shade:!0,shadeClose:!0,fixed:!0},h={extend:function(a){var c,b=JSON.parse(JSON.stringify(g));for(c in a)b[c]=a[c];return b},timer:{}},i=0,j=["layermbox"],k.prototype.view=function(){var h,k,m,n,a=this,b=a.config,g=c[d]("div");a.id=g.id=j[0]+i,g.setAttribute("class",j[0]+" "+j[0]+(b.type||0)),g.setAttribute("index",i),h=function(){var a="object"==typeof b.title;return b.title?'<h3 style="'+(a?b.title[1]:"")+'">'+(a?b.title[0]:b.title)+'</h3><button class="layermend">×</button>':""}(),k=function(){var c,a=(b.btn||[]).length;return 0!==a&&b.btn?(c='<span type="1">'+b.btn[0]+"</span>",2===a&&(c='<span type="0">'+b.btn[1]+"</span>"+c),'<div class="layermbtn">'+c+"</div>"):""}(),b.fixed||(b.top=b.hasOwnProperty("top")?b.top:100,b.style=b.style||"",b.style+=" top:"+(c.body.scrollTop+b.top)+"px"),g.innerHTML=(b.shade?'<div class="laymshade"></div>':"")+'<div class="layermmain" '+(b.fixed?"":'style="position:static;"')+">"+"<section>"+'<div class="layermchild" '+(b.style?'style="'+b.style+'"':"")+">"+h+'<div class="layermcont">'+(b.content||" ")+"</div>"+k+"</div>"+"</section>"+"</div>",b.type||(m=c[f](j[0]+"0"),n=m.length,n>=1&&l.close(m[0].getAttribute("index"))),document.body.appendChild(g),setTimeout(function(){try{c[e](a.id).classList.add("layermshow")}catch(d){return}b.success&&b.success(c[e](a.id))},1),a.index=i++,a.action(b)},k.prototype.action=function(a){var d,b=this;a.time&&(h.timer[b.index]=setTimeout(function(){l.close(b.index)},1e3*a.time)),a.title&&(c[e](b.id)[f]("layermend")[0].onclick=function(){a.cancel&&a.cancel(),l.close(b.index,a.end)}),a.btn&&(c[e](b.id)[f]("layermbtn")[0].onclick=function(c){var d=c.target.getAttribute("type");0==d?(a.no&&a.no(),l.close(b.index,a.end)):a.yes?a.yes(b.index):l.close(b.index,a.end)}),a.shade&&a.shadeClose&&(d=c[e](b.id)[f]("laymshade")[0],d.onclick=function(){l.close(b.index,a.end)},d.ontouchmove=function(){l.close(b.index,a.end)})},l={v:"1.0",index:i,open:function(a){var b=new k(a||{});return b.index},close:function(a,b){var d=c[e](j[0]+a);d&&(d.innerHTML="",c.body.removeChild(d),clearTimeout(h.timer[a]),delete h.timer[a],b&&b())},closeAll:function(){var b,c,a=document.getElementsByClassName(j[0]);for(b=0,c=a.length;c>b;b++)l.close(a[b].getAttribute("index"))}},"function"==typeof define?define(function(){return l}):a.layer=l}(window);
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 B |
Binary file not shown.
|
After Width: | Height: | Size: 32 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 |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 221 B |
|
|
@ -0,0 +1,83 @@
|
|||
/**
|
||||
|
||||
@Name: layer's style
|
||||
@Date: 2012.09.15
|
||||
@Author: 贤心
|
||||
@blog： sentsin.com
|
||||
|
||||
**/
|
||||
|
||||
*html{background-image:url(about:blank); background-attachment:fixed;}
|
||||
|
||||
/** common **/
|
||||
.xubox_shade, .xubox_layer{position:fixed; _position:absolute;}
|
||||
.xubox_shade{top:0; left:0; width:100%; height:100%; _height:expression(document.body.offsetHeight+"px");}
|
||||
.xubox_layer{top:150px; left:50%; height:auto; width:310px; margin-left:-155px;}
|
||||
.xubox_border, .xubox_title, .xubox_title i, .xubox_page, .xubox_iframe, .xubox_title em, .xubox_close, .xubox_msgico, .xubox_moves{position:absolute;}
|
||||
.xubox_border{border-radius: 5px;}
|
||||
.xubox_title{left:0; top:0;}
|
||||
.xubox_main{position:relative; height:100%; _float:left;}
|
||||
.xubox_page{top:0; left:0;}
|
||||
.xubox_load{background:url(default/xubox_loading0.gif) #fff center center no-repeat;}
|
||||
.xubox_loading{display:block; float:left; text-decoration:none; color:#FFF; _float:none; }
|
||||
.xulayer_png32{background:url(default/xubox_ico0.png) no-repeat;}
|
||||
.xubox_moves{border:3px solid #666; cursor:move; background-color:rgba(255,255,255,.3); background-color:#fff\9; filter:alpha(opacity=50);}
|
||||
|
||||
.xubox_msgico{width:32px; height:32px; top:52px; left:15px; background:url(default/xubox_ico0.png) no-repeat;}
|
||||
.xubox_text{ padding-left:55px; float:left; line-height:25px; word-break:break-all; padding-right:20px; overflow:hidden; font-size:14px;}
|
||||
.xubox_msgtype0{background-position:-91px -38px;}
|
||||
.xubox_msgtype1{background-position:-128px -38px }
|
||||
.xubox_msgtype2{background-position:-163px -38px;}
|
||||
.xubox_msgtype3{background-position:-91px -75px;}
|
||||
.xubox_msgtype4{background-position:-163px -75px;}
|
||||
.xubox_msgtype5{background-position:-163px -112px;}
|
||||
.xubox_msgtype6{background-position:-163px -148px;}
|
||||
.xubox_msgtype7{background-position:-128px -75px;}
|
||||
.xubox_msgtype8{background-position:-91px -6px;}
|
||||
.xubox_msgtype9{background-position:-129px -6px;}
|
||||
.xubox_msgtype10{background-position:-163px -6px;}
|
||||
.xubox_msgtype11{background-position:-206px -6px;}
|
||||
.xubox_msgtype12{background-position:-206px -44px;}
|
||||
.xubox_msgtype13{background-position:-206px -81px;}
|
||||
.xubox_msgtype14{background-position:-206px -122px;}
|
||||
.xubox_msgtype15{background-position:-206px -157px;}
|
||||
.xubox_loading_0{width:60px; height:24px; background:url(default/xubox_loading0.gif) no-repeat;}
|
||||
.xubox_loading_1{width:37px; height:37px; background:url(default/xubox_loading1.gif) no-repeat;}
|
||||
.xubox_loading_2, .xubox_msgtype16{width:32px; height:32px; background:url(default/xubox_loading2.gif) no-repeat;}
|
||||
.xubox_loading_3{width:126px; height:22px; background:url(default/xubox_loading3.gif) no-repeat;}
|
||||
|
||||
.xubox_setwin{position:absolute; right:10px; *right:0; top:10px; font-size:0;}
|
||||
.xubox_setwin a{position:relative; display:inline-block; *display:inline; *zoom:1; vertical-align:top; width: 14px; height:14px; margin-left:10px; font-size:12px; _overflow:hidden;}
|
||||
.xubox_setwin .xubox_min cite{position:absolute; width:14px; height:2px; left:0; top:50%; margin-top:-1px; background-color:#919191; cursor:pointer; _overflow:hidden;}
|
||||
.xubox_setwin .xubox_min:hover cite{background-color:#2D93CA; }
|
||||
.xubox_setwin .xubox_max{background-position:-6px -189px;}
|
||||
.xubox_setwin .xubox_max:hover{background-position:-6px -206px;}
|
||||
.xubox_setwin .xubox_maxmin{background-position:-29px -189px;}
|
||||
.xubox_setwin .xubox_maxmin:hover{background-position:-29px -206px;}
|
||||
.xubox_setwin .xubox_close0{ width:14px; height:14px; background-position: -31px -7px; cursor:pointer;}
|
||||
.xubox_setwin .xubox_close0:hover{background-position:-51px -7px;}
|
||||
.xubox_setwin .xubox_close1{position:absolute; right:-28px; top:-28px; width:30px; height:30px; margin-left:0; background-position:-60px -195px; *right:-18px; _right:-15px; _top:-23px; _width:14px; _height:14px; _background-position:-31px -7px;}
|
||||
.xubox_setwin .xubox_close1:hover{ background-position:-91px -195px; _background-position:-51px -7px;}
|
||||
|
||||
.xubox_title{width:100%; height:35px; line-height:35px; border-bottom:1px solid #D5D5D5; background:url(default/xubox_title0.png) #EBEBEB repeat-x; font-size:14px; color:#333;}
|
||||
.xubox_title em{height:20px; line-height:20px; width:60%; top:7px; left:10px; font-style:normal; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
|
||||
.xubox_botton a{position:absolute; bottom:10px; left:50%; background:url(default/xubox_ico0.png) repeat; text-decoration:none; color:#FFF; font-size:14px; text-align:center; font-weight:bold; overflow:hidden; }
|
||||
.xubox_botton a:hover{text-decoration:none; color:#FFF; }
|
||||
.xubox_botton .xubox_botton1{ width:79px; height:32px; line-height:32px; margin-left:-39px; background-position:-6px -34px;}
|
||||
.xubox_botton1:hover{background-position:-6px -72px;}
|
||||
.xubox_botton .xubox_botton2{margin-left:-76px; width:71px; height:29px; line-height:29px; background-position:-5px -114px;}
|
||||
.xubox_botton2:hover{ background-position:-5px -146px;}
|
||||
.xubox_botton .xubox_botton3{width:71px; height:29px; line-height:29px; margin-left:10px; background-position:-81px -114px;}
|
||||
.xubox_botton3:hover{background-position:-81px -146px;}
|
||||
.xubox_tips{position:relative; line-height:20px; min-width: 12px; padding:3px 30px 3px 10px; font-size:12px; _float:left; border-radius:3px; box-shadow: 1px 1px 3px rgba(0,0,0,.3);}
|
||||
.xubox_tips i.layerTipsG{ position:absolute; width:0; height:0; border-width:8px; border-color:transparent; border-style:dashed; *overflow:hidden;}
|
||||
.xubox_tips i.layerTipsT, .xubox_tips i.layerTipsB{left:5px; border-right-style:solid;}
|
||||
.xubox_tips i.layerTipsT{bottom:-8px;}
|
||||
.xubox_tips i.layerTipsB{top:-8px;}
|
||||
.xubox_tips i.layerTipsR, .xubox_tips i.layerTipsL{top:1px; border-bottom-style:solid;}
|
||||
.xubox_tips i.layerTipsR{left:-8px;}
|
||||
.xubox_tips i.layerTipsL{right:-8px;}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
|
||||
@Name: layer拓展样式
|
||||
@Date: 2012.12.13
|
||||
@Author: 贤心
|
||||
@blog: sentsin.com
|
||||
|
||||
**/
|
||||
|
||||
.xubox_iconext{background:url(default/icon_ext.png) no-repeat;}
|
||||
|
||||
/* prompt模式 */
|
||||
.xubox_layer .xubox_form{width:240px; height:30px; line-height:30px; padding: 0 5px; border: 1px solid #ccc; background: url(default/textbg.png) #fff repeat-x; color:#333;}
|
||||
.xubox_layer .xubox_formArea{width:300px; height:100px; line-height:20px;}
|
||||
|
||||
/* tab模式 */
|
||||
.xubox_layer .xubox_tab{position:relative; background-color:#fff; box-shadow:1px 1px 50px rgba(0,0,0,.4)}
|
||||
.xubox_layer .xubox_tabmove{position:absolute; width:600px; height:30px; top:0; left:0;}
|
||||
.xubox_layer .xubox_tabtit{ display:block; height:34px; border-bottom:1px solid #ccc; background-color:#eee;}
|
||||
.xubox_layer .xubox_tabtit span{position:relative; float:left; width:120px; height:34px; line-height:34px; text-align:center; cursor:default;}
|
||||
.xubox_layer .xubox_tabtit span.xubox_tabnow{left:-1px; _top:1px; height:35px; border-left:1px solid #ccc; border-right:1px solid #ccc; background-color:#fff; z-index:10;}
|
||||
.xubox_layer .xubox_tab_main{line-height:24px; clear:both;}
|
||||
.xubox_layer .xubox_tab_main .xubox_tabli{display:none;}
|
||||
.xubox_layer .xubox_tab_main .xubox_tabli.xubox_tab_layer{display:block;}
|
||||
.xubox_layer .xubox_tabclose{position:absolute; right:10px; top:5px; cursor:pointer;}
|
||||
|
||||
/* photo模式 */
|
||||
.xubox_bigimg, .xubox_intro{height:300px}
|
||||
.xubox_bigimg{position:relative; display:block; width:600px; text-align:center; background:url(default/xubox_loading1.gif) center center no-repeat #000; overflow:hidden; }
|
||||
.xubox_bigimg img{position:relative; display:inline-block; visibility: hidden;}
|
||||
.xubox_intro{position:absolute; right:-315px; top:0; width:300px; background-color:#fff; overflow-x:hidden; overflow-y:auto;}
|
||||
.xubox_imgsee{display:none;}
|
||||
.xubox_prev, .xubox_next{position:absolute; top:50%; width:27px; _width:44px; height:44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());}
|
||||
.xubox_prev{left:10px; background-position:-5px -5px; _background-position:-70px -5px;}
|
||||
.xubox_prev:hover{background-position:-33px -5px; _background-position:-120px -5px;}
|
||||
.xubox_next{right:10px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;}
|
||||
.xubox_next:hover{background-position:-33px -50px; _background-position:-120px -50px;}
|
||||
.xubox_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; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
|
||||
.xubox_imgtit{/*position:absolute; left:20px;*/}
|
||||
.xubox_imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;}
|
||||
.xubox_imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;}
|
||||
.xubox_imgtit a:hover{color:#fff; text-decoration:underline;}
|
||||
.xubox_imgtit em{padding-left:10px;}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue