commit ba22da39e9b98e0744749806febb45ceba17e837 Author: sentsin Date: Wed Sep 10 10:34:51 2014 +0800 1.8.5 diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..e17e611 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,20 @@ + + +【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回调函数，用于切换图片时进行相关操作 +* 相册层内部代码优化。 diff --git a/README.md b/README.md new file mode 100644 index 0000000..28af29d --- /dev/null +++ b/README.md @@ -0,0 +1,27 @@ + +## 简要 +layer是一款口碑非常不错的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。 + +在与同类弹出层插件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，皆广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。 + +[文档与演示](http://sentsin.com/jquery/layer/) + +## 愿景 +致力于打造国内最盛行的弹层组件，为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官网展现，也为您的品牌推广尽一些绵薄之力。 + + +## 备注 +[官网](http://sentsin.com/jquery/layer/)、[更新日志](https://github.com/sentsin/layer/blob/master/Update%20Notes.txt)、[Say交流](http://say.sentsin.com/home-48.html) \ No newline at end of file diff --git a/extend/layer.ext.dev.js b/extend/layer.ext.dev.js new file mode 100644 index 0000000..351ebab --- /dev/null +++ b/extend/layer.ext.dev.js @@ -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: '', + 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 = '' + } + 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: '
'; + }() + +'' + +'
' + +function(){ + var len = data.length, ii = 1, str = ''; + if(len > 0){ + str = ''+ data[0].title +''; + for(; ii < len; ii++){ + str += ''+ data[ii].title +''; + } + } + return str; + }() +'
' + +'' + +'X' + +'
' + }, 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: '
'+ (log.name || '') +'
'+ function(){ + if(log.imgLen > 1){ + return '' + } else { + return ''; + } + }() +'
'+ log.imgsname +' '+ log.imgIndex +'/'+ log.imgLen +'
'+ function(){ + if(options.html){ + return '
'+ options.html +'
'; + } 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); + }); + }); +}; diff --git a/extend/layer.ext.js b/extend/layer.ext.js new file mode 100644 index 0000000..c27bf85 --- /dev/null +++ b/extend/layer.ext.js @@ -0,0 +1,2 @@ +/*! layer弹层拓展类 */ +;layer.use("skin/layer.ext.css",function(){layer.ext&&layer.ext()}),layer.prompt=function(a,b,c){var d={},a=a||{},e={area:["auto","auto"],offset:[a.top||"",""],title:a.title||"信息",dialog:{btns:2,type:-1,msg:'',yes:function(c){var e=d.prompt.val();""===e?d.prompt.focus():e.replace(/\s/g,"").length>(a.length||1e3)?layer.tips("最多输入"+(a.length||1e3)+"个字数","#xubox_prompt",2):b&&b(e,c,d.prompt)},no:c},success:function(){d.prompt=$("#xubox_prompt"),d.prompt.focus()}};return 3===a.type&&(e.dialog.msg='"),$.layer(e)},layer.tab=function(a){var a=a||{},b=a.data||[],c={type:1,border:[0],area:["auto","auto"],bgcolor:"",title:!1,shade:a.shade,offset:a.offset,move:".xubox_tabmove",closeBtn:!1,page:{html:'
'}()+'
'+function(){var a=b.length,c=1,d="";if(a>0)for(d=''+b[0].title+"";a>c;c++)d+=""+b[c].title+"";return d}()+'
X
'},success:function(a){var b=$(".xubox_tabtit").children(),c=$(".xubox_tab_main").children(),d=$(".xubox_tabclose");b.on("click",function(){var a=$(this),b=a.index();a.addClass("xubox_tabnow").siblings().removeClass("xubox_tabnow"),c.eq(b).show().siblings().hide()}),d.on("click",function(){layer.close(a.attr("times"))})}};return $.layer(c)},layer.photos=function(a){a=a||{};var b={imgIndex:1,end:null,html:$("html")},c=$(window),d=a.json,e=a.page;if(d){var f=d.data;if(1!==d.status)return void layer.msg("未请求到数据",2,8);if(b.imgLen=f.length,!(f.length>0))return void layer.msg("没有任何图片",2,8);b.thissrc=f[d.start].src,b.pid=f[d.start].pid,b.imgsname=d.title||"",b.name=f[d.start].name,b.imgIndex=d.start+1}else{var g=$(e.parent).find("img"),h=g.eq(e.start);b.thissrc=h.attr("layer-img")||h.attr("src"),b.pid=h.attr("pid"),b.imgLen=g.length,b.imgsname=e.title||"",b.name=h.attr("alt"),b.imgIndex=e.start+1}var i={type:1,border:[0],area:[(a.html?915:600)+"px","auto"],title:!1,shade:[.9,"#000",!0],shadeClose:!0,offset:["25px",""],bgcolor:"",page:{html:'
'+(b.name||
'+function(){return b.imgLen>1?'':""}()+'
'+b.imgsname+" "+b.imgIndex+"/"+b.imgLen+"
"+function(){return a.html?'
'+a.html+"
":""}()},success:function(a){b.bigimg=a.find(".xubox_bigimg"),b.imgsee=b.bigimg.find(".xubox_imgsee"),b.imgbar=b.imgsee.find(".xubox_imgbar"),b.imgtit=b.imgbar.find(".xubox_imgtit"),b.layero=a;var c=b.imgs=b.bigimg.find("img");clearTimeout(b.timerr),b.timerr=setTimeout(function(){$("html").css("overflow","hidden").attr("layer-full",b.index)},10),c.load(function(){b.imgarea=[c.outerWidth(),c.outerHeight()],b.resize(a)}),b.event()},end:function(){layer.closeAll(),b.end=!0}};return b.event=function(){b.bigimg.hover(function(){b.imgsee.show()},function(){b.imgsee.hide()}),i.imgprev=function(){b.imgIndex--,b.imgIndex<1&&(b.imgIndex=b.imgLen),b.tabimg()},b.bigimg.find(".xubox_prev").on("click",function(a){a.preventDefault(),i.imgprev()}),i.imgnext=function(){b.imgIndex++,b.imgIndex>b.imgLen&&(b.imgIndex=1),b.tabimg()},b.bigimg.find(".xubox_next").on("click",function(a){a.preventDefault(),i.imgnext()}),$(document).keyup(function(a){if(!b.end){var c=a.keyCode;a.preventDefault(),37===c?i.imgprev():39===c?i.imgnext():27===c&&layer.close(b.index)}}),b.tabimg=function(){var c,e,h;if(b.imgs.removeAttr("style"),d){var i=f[b.imgIndex-1];c=i.src,e=i.pid,h=i.name}else{var j=g.eq(b.imgIndex-1);c=j.attr("layer-img")||j.attr("src"),e=j.attr("layer-pid")||"",h=j.attr("alt")||""}b.imgs.attr({src:c,"layer-pid":e,alt:h}),b.imgtit.find("em").text(b.imgIndex+"/"+b.imgLen),b.imgsee.show(),a.tab&&a.tab({pid:e,name:h})}},b.resize=function(d){var e={},f=[c.width(),c.height()];e.limit=f[0]-f[0]/f[1]*(60*f[0]/f[1]),e.limit<600&&(e.limit=600);var g=[e.limit,f[1]>400?f[1]-50:400];g[0]=a.html?g[0]:g[0]-300,layer.area(b.index,{width:g[0]+(a.html?15:0),height:g[1]}),e.flwidth=g[0]-(a.html?300:0),b.imgs.css(b.imgarea[0]>e.flwidth?{width:e.flwidth}:{width:b.imgarea[0]}),b.imgs.outerHeight()', + frame = [ + '
'+ ico +'' + dialog.msg + '
', + '
'+ html +'
', + '', + '', + '
'+ config.tips.msg +'
' + ], + 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 = '
'); + + 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 = '
'); + + if(config.maxmin && (config.type === 1 || config.type === 2) && (!/^\d+%$/.test(config.area[0]) || !/^\d+%$/.test(config.area[1]))){ + closebtn = ''; + } + config.closeBtn[1] && (closebtn += ''); + var titype = typeof config.title === 'object'; + config.title && (title = '
' + (titype ? config.title[0] : config.title) + '
'); + return [shade, + '
' + + '
' + + frame[config.type] + + title + + ''+ closebtn + '' + + '' + + '
'+ border + '
' + ]; +}; + +//创建骨架 +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('
'+ page.html +'
'); + body.append($(space[1])); + } else if (page.url !== ''){ + setSpace('
'+ page.html +'
'); + 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(''+ confbtn.btn[0] +''); + break; + case 2: + layerBtn.html(''+ confbtn.btn[0] +'' + ''+ confbtn.btn[1] + ''); + 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('
'); + } + 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'; +}; + +if("function" === typeof define){ + define(function(){ + ready.run(); + return layer; + }); +}else{ + ready.run(); +} + +}(window); \ No newline at end of file diff --git a/layer.min.js b/layer.min.js new file mode 100644 index 0000000..7345a33 --- /dev/null +++ b/layer.min.js @@ -0,0 +1,2 @@ +/*! layer-v1.8.5 弹层组件 2014-09-10 License LGPL http://sentsin.com/jquery/layer/ By 贤心 */ +;!function(a,b){"use strict";var c,d,e="http://res.sentsin.com/lay/lib/layer/",f={getPath:function(){var a=document.scripts,b=a[a.length-1].src;return e?e:b.substring(0,b.lastIndexOf("/")+1)},type:["dialog","page","iframe","loading","tips"]};a.layer={v:"1.8.5",ie6:!!a.ActiveXObject&&!a.XMLHttpRequest,index:0,path:f.getPath(),use:function(a,b){var d=c("head")[0],a=a.replace(/\s/g,""),e=/\.css$/.test(a),f=document.createElement(e?"link":"script"),g=a.replace(/\.|\//g,"");e&&(f.type="text/css",f.rel="stylesheet"),f[e?"href":"src"]=/^http:\/\//.test(a)?a:layer.path+a,f.id=g,c("#"+g)[0]||d.appendChild(f),b&&(document.all?c(f).ready(b):c(f).load(b))},alert:function(a,b,d,e){var f="function"==typeof d,g={dialog:{msg:a,type:b,yes:f?d:e},area:["auto","auto"]};return f||(g.title=d),c.layer(g)},confirm:function(a,b,d,e){var f="function"==typeof d,g={dialog:{msg:a,type:4,btns:2,yes:b,no:f?d:e}};return f||(g.title=d),c.layer(g)},msg:function(a,d,e,f){var g={title:!1,closeBtn:!1,time:d===b?2:d,dialog:{msg:""===a||a===b?" ":a},end:f};return"object"==typeof e?(g.dialog.type=e.type,g.shade=e.shade,g.shift=e.rate):"function"==typeof e?g.end=e:g.dialog.type=e,c.layer(g)},load:function(a,b){return"string"==typeof a?layer.msg(a,b||0,16):c.layer({time:a,loading:{type:b},bgcolor:b?"#fff":"",shade:b?[.1,"#000"]:[0],border:3!==b&&b?[6,.3,"#000"]:[0],type:3,title:["",!1],closeBtn:[0,!1]})},tips:function(a,b,d,e,f,g){var h={type:4,shade:!1,success:function(a){this.closeBtn||a.find(".xubox_tips").css({"padding-right":10})},bgcolor:"",tips:{msg:a,follow:b}};return h.time="object"==typeof d?d.time:0|d,d=d||{},h.closeBtn=d.closeBtn||!1,h.maxWidth=d.maxWidth||e,h.tips.guide=d.guide||f,h.tips.style=d.style||g,h.tips.more=d.more,c.layer(h)}};var g=["xubox_layer","xubox_iframe",".xubox_title",".xubox_text",".xubox_page",".xubox_main"],h=function(a){var b=this,d=b.config;layer.index++,b.index=layer.index,b.config=c.extend({},d,a),b.config.dialog=c.extend({},d.dialog,a.dialog),b.config.page=c.extend({},d.page,a.page),b.config.iframe=c.extend({},d.iframe,a.iframe),b.config.loading=c.extend({},d.loading,a.loading),b.config.tips=c.extend({},d.tips,a.tips),b.creat()};h.pt=h.prototype,h.pt.config={type:0,shade:[.3,"#000"],fix:!0,move:".xubox_title",title:"信息",offset:["","50%"],area:["310px","auto"],closeBtn:[0,!0],time:0,bgcolor:"#fff",border:[6,.3,"#000"],zIndex:19891014,maxWidth:400,dialog:{btns:1,btn:["确定","取消"],type:8,msg:"",yes:function(a){layer.close(a)},no:function(a){layer.close(a)}},page:{dom:"#xulayer",html:"",url:""},iframe:{src:"http://sentsin.com",scrolling:"auto"},loading:{type:0},tips:{msg:"",follow:"",guide:0,isGuide:!0,style:["background-color:#FF9900; color:#fff;","#FF9900"]},success:function(){},close:function(a){layer.close(a)},end:function(){}},h.pt.space=function(a){var b=this,a=a||"",c=b.index,d=b.config,e=d.dialog,f=-1===e.type?"":'',h=['
'+f+''+e.msg+"
",'
'+a+"
",'','','
'+d.tips.msg+'
'],i="",j="",k=d.zIndex+c,l="z-index:"+k+"; background-color:"+d.shade[1]+"; opacity:"+d.shade[0]+"; filter:alpha(opacity="+100*d.shade[0]+");";d.shade[0]&&(i='
'),d.zIndex=k;var m="",n="",o="z-index:"+(k-1)+"; background-color: "+d.border[2]+"; opacity:"+d.border[1]+"; filter:alpha(opacity="+100*d.border[1]+"); top:-"+d.border[0]+"px; left:-"+d.border[0]+"px;";d.border[0]&&(j='
'),!d.maxmin||1!==d.type&&2!==d.type||/^\d+%$/.test(d.area[0])&&/^\d+%$/.test(d.area[1])||(n=''),d.closeBtn[1]&&(n+='');var p="object"==typeof d.title;return d.title&&(m='
'+(p?d.title[0]:d.title)+"
"),[i,'
'+h[d.type]+m+''+n+'
'+j+"
"]},h.pt.creat=function(){var a=this,b="",d=a.config,e=d.dialog,f=a.index,h=d.page,i=c("body"),j=function(d){var d=d||"";b=a.space(d),i.append(c(b[0]))};switch(d.type){case 0:d.title||(d.area=["auto","auto"]),c(".xubox_dialog")[0]&&layer.close(c(".xubox_dialog").parents("."+g[0]).attr("times"));break;case 1:if(""!==h.html)j('
'+h.html+"
"),i.append(c(b[1]));else if(""!==h.url)j('
'+h.html+"
"),i.append(c(b[1])),c.get(h.url,function(a){c("#xuboxPageHtml"+f).html(a.toString()),h.ok&&h.ok(a)});else{if(0!=c(h.dom).parents(g[4]).length)return;j(),c(h.dom).show().wrap(c(b[1]))}break;case 3:d.title=!1,d.area=["auto","auto"],d.closeBtn=["",!1],c(".xubox_loading")[0]&&layer.closeLoad();break;case 4:d.title=!1,d.area=["auto","auto"],d.fix=!1,d.border=[0],d.tips.more||layer.closeTips()}1!==d.type&&(j(),i.append(c(b[1])));var k=a.layerE=c("#"+g[0]+f);if(k.css({width:d.area[0],height:d.area[1]}),d.fix||k.css({position:"absolute"}),d.title&&(3!==d.type||4!==d.type)){var l=0===d.type?e:d,m=k.find(".xubox_botton");switch(l.btn=d.btn||e.btn,l.btns){case 0:m.html("").hide();break;case 1:m.html(''+l.btn[0]+"");break;case 2:m.html(''+l.btn[0]+''+l.btn[1]+"")}}"auto"===k.css("left")?(k.hide(),setTimeout(function(){k.show(),a.set(f)},500)):a.set(f),d.time<=0||a.autoclose(),a.callback()},f.fade=function(a,b,c){a.css({opacity:0}).animate({opacity:c},b)},h.pt.offset=function(){var a=this,b=a.config,c=a.layerE,e=c.outerHeight();a.offsetTop=""===b.offset[0]&&ee.maxWidth&&i.width(e.maxWidth),o.tipColor=e.tips.style[1],m[0]=i.outerWidth(),o.autoLeft=function(){o.left+m[0]-d.width()>0?(o.tipLeft=o.left+o.width-m[0],p.css({right:12,left:"auto"})):o.tipLeft=o.left},o.where=[function(){o.autoLeft(),o.tipTop=o.top-m[1]-10,p.removeClass("layerTipsB").addClass("layerTipsT").css({"border-right-color":o.tipColor})},function(){o.tipLeft=o.left+o.width+10,o.tipTop=o.top,p.removeClass("layerTipsL").addClass("layerTipsR").css({"border-bottom-color":o.tipColor})},function(){o.autoLeft(),o.tipTop=o.top+o.height+10,p.removeClass("layerTipsT").addClass("layerTipsB").css({"border-right-color":o.tipColor})},function(){o.tipLeft=o.left-m[0]+10,o.tipTop=o.top,p.removeClass("layerTipsR").addClass("layerTipsL").css({"border-bottom-color":o.tipColor})}],o.where[e.tips.guide](),0===e.tips.guide?o.top-(d.scrollTop()+m[1]+16)<0&&o.where[2]():1===e.tips.guide?d.width()-(o.left+o.width+m[0]+16)>0||o.where[3]():2===e.tips.guide?o.top-d.scrollTop()+o.height+m[1]+16-d.height()>0&&o.where[0]():3===e.tips.guide?m[0]+16-o.left>0&&o.where[1]():4===e.tips.guide,i.css({left:o.tipLeft,top:o.tipTop})}e.fadeIn&&(f.fade(i,e.fadeIn,1),f.fade(c("#xubox_shade"+a),e.fadeIn,e.shade[0])),e.fix&&""===e.offset[0]&&!e.shift&&d.on("resize",function(){i.css({top:(d.height()-i.outerHeight())/2})}),b.move()},h.pt.shift=function(a,b,c){var e=this,f=e.config,g=e.layerE,h=0,i=d.width(),j=d.height()+(f.fix?0:d.scrollTop());h="50%"==f.offset[1]||""==f.offset[1]?g.outerWidth()/2:g.outerWidth();var k={t:{top:e.offsetTop},b:{top:j-g.outerHeight()-f.border[0]},cl:h+f.border[0],ct:-g.outerHeight(),cr:i-h-f.border[0]};switch(a){case"left-top":g.css({left:k.cl,top:k.ct}).animate(k.t,b);break;case"top":g.css({top:k.ct}).animate(k.t,b);break;case"right-top":g.css({left:k.cr,top:k.ct}).animate(k.t,b);break;case"right-bottom":g.css({left:k.cr,top:j}).animate(c?k.t:k.b,b);break;case"bottom":g.css({top:j}).animate(c?k.t:k.b,b);break;case"left-bottom":g.css({left:k.cl,top:j}).animate(c?k.t:k.b,b);break;case"left":g.css({left:-g.outerWidth()}).animate({left:e.offsetLeft},b)}},h.pt.autoArea=function(a){var b,d=this,a=a||d.index,e=d.config,f=e.page,h=c("#"+g[0]+a),i=h.find(g[2]),j=h.find(g[5]),k=e.title?i.innerHeight():0,l=0;switch("auto"===e.area[0]&&j.outerWidth()>=e.maxWidth&&h.css({width:e.maxWidth}),e.type){case 0:var m=h.find(".xubox_botton>a");b=h.find(g[3]).outerHeight()+20,m.length>0&&(l=m.outerHeight()+20);break;case 1:var n=h.find(g[4]);b=c(f.dom).outerHeight(),"auto"===e.area[0]&&h.css({width:n.outerWidth()}),(""!==f.html||""!==f.url)&&(b=n.outerHeight());break;case 2:h.find("iframe").css({width:h.outerWidth(),height:h.outerHeight()-(e.title?i.innerHeight():0)});break;case 3:var o=h.find(".xubox_loading");b=o.outerHeight(),j.css({width:o.width()})}"auto"===e.area[1]&&j.css({height:k+b+l}),c("#xubox_border"+a).css({width:h.outerWidth()+2*e.border[0],height:h.outerHeight()+2*e.border[0]}),layer.ie6&&"auto"!==e.area[0]&&j.css({width:h.outerWidth()}),h.css("50%"!==e.offset[1]&&""!=e.offset[1]||4===e.type?{marginLeft:0}:{marginLeft:-h.outerWidth()/2})},h.pt.move=function(){var a=this,b=a.config,e={setY:0,moveLayer:function(){if(0==parseInt(e.layerE.css("margin-left")))var a=parseInt(e.move.css("left"));else var a=parseInt(e.move.css("left"))+-parseInt(e.layerE.css("margin-left"));"fixed"!==e.layerE.css("position")&&(a-=e.layerE.parent().offset().left,e.setY=0),e.layerE.css({left:a,top:parseInt(e.move.css("top"))-e.setY})}},f=a.layerE.find(b.move);b.move&&f.attr("move","ok"),f.css(b.move?{cursor:"move"}:{cursor:"auto"}),c(b.move).on("mousedown",function(a){if(a.preventDefault(),"ok"===c(this).attr("move")){e.ismove=!0,e.layerE=c(this).parents("."+g[0]);var f=e.layerE.offset().left,h=e.layerE.offset().top,i=e.layerE.width()-6,j=e.layerE.height()-6;c("#xubox_moves")[0]||c("body").append('
'),e.move=c("#xubox_moves"),b.moveType&&e.move.css({opacity:0}),e.moveX=a.pageX-e.move.position().left,e.moveY=a.pageY-e.move.position().top,"fixed"!==e.layerE.css("position")||(e.setY=d.scrollTop())}}),c(document).mousemove(function(a){if(e.ismove){var c=a.pageX-e.moveX,f=a.pageY-e.moveY;if(a.preventDefault(),!b.moveOut){e.setY=d.scrollTop();var g=d.width()-e.move.outerWidth()-b.border[0],h=b.border[0]+e.setY;cg&&(c=g),h>f&&(f=h),f>d.height()-e.move.outerHeight()-b.border[0]+e.setY&&(f=d.height()-e.move.outerHeight()-b.border[0]+e.setY)}e.move.css({left:c,top:f}),b.moveType&&e.moveLayer(),c=null,f=null,g=null,h=null}}).mouseup(function(){try{e.ismove&&(e.moveLayer(),e.move.remove()),e.ismove=!1}catch(a){e.ismove=!1}b.moveEnd&&b.moveEnd()})},h.pt.autoclose=function(){var a=this,b=a.config.time,c=function(){b--,0===b&&(layer.close(a.index),clearInterval(a.autotime))};a.autotime=setInterval(c,1e3)},f.config={end:{}},h.pt.callback=function(){var a=this,b=a.layerE,d=a.config,e=d.dialog;a.openLayer(),a.config.success(b),layer.ie6&&a.IE6(b),b.find(".xubox_close").on("click",function(){d.close(a.index),layer.close(a.index)}),b.find(".xubox_yes").on("click",function(){d.yes?d.yes(a.index):e.yes(a.index)}),b.find(".xubox_no").on("click",function(){d.no?d.no(a.index):e.no(a.index),layer.close(a.index)}),a.config.shadeClose&&c("#xubox_shade"+a.index).on("click",function(){layer.close(a.index)}),b.find(".xubox_min").on("click",function(){layer.min(a.index,d),d.min&&d.min(b)}),b.find(".xubox_max").on("click",function(){c(this).hasClass("xubox_maxmin")?(layer.restore(a.index),d.restore&&d.restore(b)):(layer.full(a.index,d),d.full&&d.full(b))}),f.config.end[a.index]=d.end},f.reselect=function(){c.each(c("select"),function(){var a=c(this);a.parents("."+g[0])[0]||1==a.attr("layer")&&c("."+g[0]).length<1&&a.removeAttr("layer").show(),a=null})},h.pt.IE6=function(a){var b=this,e=a.offset().top;if(b.config.fix)var f=function(){a.css({top:d.scrollTop()+e})};else var f=function(){a.css({top:e})};f(),d.scroll(f),c.each(c("select"),function(){var a=c(this);a.parents("."+g[0])[0]||"none"==a.css("display")||a.attr({layer:"1"}).hide(),a=null})},h.pt.openLayer=function(){{var a=this;a.layerE}layer.autoArea=function(b){return a.autoArea(b)},layer.shift=function(b,c,d){a.shift(b,c,d)},layer.setMove=function(){return a.move()},layer.zIndex=a.config.zIndex,layer.setTop=function(a){var b=function(){layer.zIndex++,a.css("z-index",layer.zIndex+1)};return layer.zIndex=parseInt(a[0].style.zIndex),a.on("mousedown",b),layer.zIndex}},f.isauto=function(a,b,c){"auto"===b.area[0]&&(b.area[0]=a.outerWidth()),"auto"===b.area[1]&&(b.area[1]=a.outerHeight()),a.attr({area:b.area+","+c}),a.find(".xubox_max").addClass("xubox_maxmin")},f.rescollbar=function(a){g.html.attr("layer-full")==a&&(g.html[0].style.removeProperty?g.html[0].style.removeProperty("overflow"):g.html[0].style.removeAttribute("overflow"),g.html.removeAttr("layer-full"))},layer.getIndex=function(a){return c(a).parents("."+g[0]).attr("times")},layer.getChildFrame=function(a,b){return b=b||c("."+g[1]).parents("."+g[0]).attr("times"),c("#"+g[0]+b).find("."+g[1]).contents().find(a)},layer.getFrameIndex=function(a){return c(a?"#"+a:"."+g[1]).parents("."+g[0]).attr("times")},layer.iframeAuto=function(a){a=a||c("."+g[1]).parents("."+g[0]).attr("times");var b=layer.getChildFrame("body",a).outerHeight(),d=c("#"+g[0]+a),e=d.find(g[2]),f=0;e&&(f=e.height()),d.css({height:b+f});var h=-parseInt(c("#xubox_border"+a).css("top"));c("#xubox_border"+a).css({height:b+2*h+f}),c("#"+g[1]+a).css({height:b})},layer.iframeSrc=function(a,b){c("#"+g[0]+a).find("iframe").attr("src",b)},layer.area=function(a,b){var d=[c("#"+g[0]+a),c("#xubox_border"+a)],e=d[0].attr("type"),h=d[0].find(g[5]),i=d[0].find(g[2]);if(e===f.type[1]||e===f.type[2]){if(d[0].css(b),h.css({width:b.width,height:b.height}),e===f.type[2]){var j=d[0].find("iframe");j.css({width:b.width,height:i?b.height-i.innerHeight():b.height})}"0px"!==d[0].css("margin-left")&&(b.hasOwnProperty("top")&&d[0].css({top:b.top-(d[1][0]?parseFloat(d[1].css("top")):0)}),b.hasOwnProperty("left")&&d[0].css({left:b.left+d[0].outerWidth()/2-(d[1][0]?parseFloat(d[1].css("left")):0)}),d[0].css({marginLeft:-d[0].outerWidth()/2})),d[1][0]&&d[1].css({width:parseFloat(b.width)-2*parseFloat(d[1].css("left")),height:parseFloat(b.height)-2*parseFloat(d[1].css("top"))})}},layer.min=function(a,b){var d=c("#"+g[0]+a),e=[d.position().top,d.position().left+parseFloat(d.css("margin-left"))];f.isauto(d,b,e),layer.area(a,{width:180,height:35}),d.find(".xubox_min").hide(),"page"===d.attr("type")&&d.find(g[4]).hide(),f.rescollbar(a)},layer.restore=function(a){{var b=c("#"+g[0]+a),d=b.attr("area").split(",");b.attr("type")}layer.area(a,{width:parseFloat(d[0]),height:parseFloat(d[1]),top:parseFloat(d[2]),left:parseFloat(d[3])}),b.find(".xubox_max").removeClass("xubox_maxmin"),b.find(".xubox_min").show(),"page"===b.attr("type")&&b.find(g[4]).show(),f.rescollbar(a)},layer.full=function(a,b){var e,h=c("#"+g[0]+a),i=2*b.border[0]||6,j=[h.position().top,h.position().left+parseFloat(h.css("margin-left"))];f.isauto(h,b,j),g.html.attr("layer-full")||g.html.css("overflow","hidden").attr("layer-full",a),clearTimeout(e),e=setTimeout(function(){layer.area(a,{top:"fixed"===h.css("position")?0:d.scrollTop(),left:"fixed"===h.css("position")?0:d.scrollLeft(),width:d.width()-i,height:d.height()-i})},100)},layer.title=function(a,b){var d=c("#"+g[0]+(b||layer.index)).find(".xubox_title>em");d.html(a)},layer.close=function(a){var b=c("#"+g[0]+a),d=b.attr("type"),e=c("#xubox_moves, #xubox_shade"+a);if(b[0]){if(d==f.type[1])if(b.find(".xuboxPageHtml")[0])b[0].innerHTML="",b.remove();else{b.find(".xubox_setwin,.xubox_close,.xubox_botton,.xubox_title,.xubox_border").remove();for(var h=0;3>h;h++)b.find(".layer_pageContent").unwrap().hide()}else b[0].innerHTML="",b.remove();e.remove(),layer.ie6&&f.reselect(),f.rescollbar(a),"function"==typeof f.config.end[a]&&f.config.end[a](),delete f.config.end[a]}},layer.closeLoad=function(){layer.close(c(".xubox_loading").parents("."+g[0]).attr("times"))},layer.closeTips=function(){layer.closeAll("tips")},layer.closeAll=function(a){c.each(c("."+g[0]),function(){var b=c(this),d=a?b.attr("type")===a:1;d&&layer.close(b.attr("times")),d=null})},f.run=function(){c=jQuery,d=c(a),g.html=c("html"),layer.use("skin/layer.css"),c.layer=function(a){var b=new h(a);return b.index},(new Image).src=layer.path+"skin/default/xubox_ico0.png"},"function"==typeof define?define(function(){return f.run(),layer}):f.run()}(window); \ No newline at end of file diff --git a/mobile/README.md b/mobile/README.md new file mode 100644 index 0000000..9d6747e --- /dev/null +++ b/mobile/README.md @@ -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) \ No newline at end of file diff --git a/mobile/layer.m.dev.js b/mobile/layer.m.dev.js new file mode 100644 index 0000000..e6e073f --- /dev/null +++ b/mobile/layer.m.dev.js @@ -0,0 +1,200 @@ +/**************************************** + + @Name：layer v1.1 弹层组件移动版 + @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 = { + type: 0, + shade: true, + shadeClose: true, + fixed: true, + anim: 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 + ? '

'+ (titype ? config.title[0] : config.title) +'

' + : ''; + }()); + + var button = (function(){ + var btns = (config.btn || []).length, btndom; + if(btns === 0 || !config.btn){ + return ''; + } + btndom = ''+ config.btn[0] +'' + if(btns === 2){ + btndom = ''+ config.btn[1] +'' + btndom; + } + return '
'+ btndom + '
'; + }()); + + if(!config.fixed){ + config.top = config.hasOwnProperty('top') ? config.top : 100; + config.style = config.style || ''; + config.style += ' top:'+ ( doc.body.scrollTop + config.top) + 'px'; + } + + if(config.type === 2){ + config.content = '
' + (config.content||'') + '
'; + } + + layerbox.innerHTML = (config.shade ? '
' : '') + +'
' + +'
' + +'
' + + title + +'
'+ config.content +'
' + + button + +'
' + +'
' + +'
'; + + if(!config.type || config.type === 2){ + var dialogs = doc[claname](classs[0] + config.type), dialen = dialogs.length; + if(dialen >= 1){ + layer.close(dialogs[0].getAttribute('index')) + } + } + + document.body.appendChild(layerbox); + + setTimeout(function(){ + try{ + doc[byid](that.id).className = doc[byid](that.id).className + ' 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.1', + 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); \ No newline at end of file diff --git a/mobile/layer.m.js b/mobile/layer.m.js new file mode 100644 index 0000000..a211401 --- /dev/null +++ b/mobile/layer.m.js @@ -0,0 +1,2 @@ +/*! layer mobile-v1.0 弹层组件移动版 2014-09-10 License LGPL http://sentsin.com/layui/layer/ By 贤心 */ +;!function(a){"use strict";function b(a){var b=this;b.config=i.extend(a),b.view()}var c=document.scripts[document.scripts.length-1].src.match(/[\s\S]*\//)[0],d=document,e="createElement",f="getElementById",g="getElementsByClassName";document.head.appendChild(function(){var a=d[e]("link");return a.href=c+"need/layer.css",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}());var h={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:!0},i={extend:function(a){var b=JSON.parse(JSON.stringify(h));for(var c in a)b[c]=a[c];return b},timer:{}},j=0,k=["layermbox"];b.prototype.view=function(){var a=this,b=a.config,c=d[e]("div");a.id=c.id=k[0]+j,c.setAttribute("class",k[0]+" "+k[0]+(b.type||0)),c.setAttribute("index",j);var h=function(){var a="object"==typeof b.title;return b.title?'

'+(a?b.title[0]:b.title)+'

':""}(),i=function(){var a,c=(b.btn||[]).length;return 0!==c&&b.btn?(a=''+b.btn[0]+"",2===c&&(a=''+b.btn[1]+""+a),'
'+a+"
"):""}();if(b.fixed||(b.top=b.hasOwnProperty("top")?b.top:100,b.style=b.style||"",b.style+=" top:"+(d.body.scrollTop+b.top)+"px"),2===b.type&&(b.content='
'+(b.content||"")+"
"),c.innerHTML=(b.shade?'
':"")+'
"+h+'
'+b.content+"
"+i+"
",!b.type||2===b.type){var m=d[g](k[0]+b.type),n=m.length;n>=1&&l.close(m[0].getAttribute("index"))}document.body.appendChild(c),setTimeout(function(){try{d[f](a.id).className=d[f](a.id).className+" layermshow"}catch(c){return}b.success&&b.success(d[f](a.id))},1),a.index=j++,a.action(b)},b.prototype.action=function(a){var b=this;if(a.time&&(i.timer[b.index]=setTimeout(function(){l.close(b.index)},1e3*a.time)),a.title&&(d[f](b.id)[g]("layermend")[0].onclick=function(){a.cancel&&a.cancel(),l.close(b.index,a.end)}),a.btn&&(d[f](b.id)[g]("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){var c=d[f](b.id)[g]("laymshade")[0];c.onclick=function(){l.close(b.index,a.end)},c.ontouchmove=function(){l.close(b.index,a.end)}}};var l={v:"1.1",index:j,open:function(a){var c=new b(a||{});return c.index},close:function(a,b){var c=d[f](k[0]+a);c&&(c.innerHTML="",d.body.removeChild(c),clearTimeout(i.timer[a]),delete i.timer[a],b&&b())},closeAll:function(){for(var a=document.getElementsByClassName(k[0]),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); \ No newline at end of file diff --git a/mobile/need/layer.css b/mobile/need/layer.css new file mode 100644 index 0000000..60b8fce --- /dev/null +++ b/mobile/need/layer.css @@ -0,0 +1,42 @@ +/* layer弹层移动版样式 */ + +.layermbox{position:absolute; left:0; top:0; width:100%; z-index:19891014;} +.layermbox *{margin:0; bottom:0;} +.layermanim{transition: all .18s; -webkit-transition: all .18s;} +.laymshade, +.layermmain{position:fixed; left:0; top:0; width:100%; height:100%;} +.laymshade{background-color:rgba(0,0,0, .5); pointer-events:auto;} +.layermmain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;} +.layermmain section{display:table-cell; vertical-align:middle; text-align:center;} +.layermchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius:6px; border:1px solid #999; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); opacity: 0; transform: scale(0); -webkit-transform: scale(0); pointer-events:auto;} +.layermshow .layermchild{opacity: 1; transform:scale(1); -webkit-transform: scale(1);} +.layermbox0 .layermchild{max-width:260px; min-width:150px;} +.layermbox1 .layermchild{border:none; border-radius:0;} +.layermbox2 .layermchild{width:auto; max-width:260px; min-width:40px; border:none; background-color:rgba(0,0,0,.6); color:#fff;} +.layermchild h3{padding:0 45px 0 10px; height:50px; line-height:50px; border-bottom:1px solid #EBEBEB; font-size:16px; font-weight:400; border-radius:5px 5px 0 0; border-bottom:1px solid #EBEBEB;} +.layermchild h3, +.layermbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} +.layermcont{padding:20px 15px; line-height:20px; border-radius:5px;} +.layermbox1 .layermcont{padding:0;} +.layermbox2 .layermcont{text-align:center; padding:30px 30px 0; line-height: 0;} +.layermbox2 .layermcont i{width:1.5rem; height:1.5rem; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;} +.layermbox2 .layermcont i{-webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} +@-webkit-keyframes bouncedelay{ + 0%,80%,100%{-webkit-transform:scale(0)} + 40%{-webkit-transform:scale(1)} +} +@keyframes bouncedelay{ + 0%,80%,100%{transform:scale(0);-webkit-transform:scale(0)} + 40%{transform:scale(1);-webkit-transform:scale(1)} +} +.layermbox2 .layermcont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;} +.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay: -.16s; animation-delay: -.16s;} +.layermbox2 .layermcont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;} +.layermbtn{position:relative; height:40px; line-height:40px; font-size:0; text-align:center; border-top:1px solid #EBEBEB;} +.layermbtn span{position:relative; display:inline-block; width:50%; text-align:center; font-size:14px; cursor:pointer;} +.layermbtn span:first-child{border:none; background-color:#fff} +.layermbtn:before{content:'\20'; position:absolute; width:1px; height:100%; left:50%; top:0; background-color:#EBEBEB;} +.layermend{position:absolute; right:7px; top:5px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; color:rgba(0,0,0,.2); cursor: pointer; -webkit-appearance: none; font-size:30px;} +.layermend:focus, .layermend:hover{color:rgba(0,0,0,.5); outline: 0;); + + diff --git a/skin/default/icon_ext.png b/skin/default/icon_ext.png new file mode 100644 index 0000000..8baee59 Binary files /dev/null and b/skin/default/icon_ext.png differ diff --git a/skin/default/textbg.png b/skin/default/textbg.png new file mode 100644 index 0000000..ad1040c Binary files /dev/null and b/skin/default/textbg.png differ diff --git a/skin/default/xubox_ico0.png b/skin/default/xubox_ico0.png new file mode 100644 index 0000000..7754a47 Binary files /dev/null and b/skin/default/xubox_ico0.png differ diff --git a/skin/default/xubox_loading0.gif b/skin/default/xubox_loading0.gif new file mode 100644 index 0000000..6f3c953 Binary files /dev/null and b/skin/default/xubox_loading0.gif differ diff --git a/skin/default/xubox_loading1.gif b/skin/default/xubox_loading1.gif new file mode 100644 index 0000000..db3a483 Binary files /dev/null and b/skin/default/xubox_loading1.gif differ diff --git a/skin/default/xubox_loading2.gif b/skin/default/xubox_loading2.gif new file mode 100644 index 0000000..5bb90fd Binary files /dev/null and b/skin/default/xubox_loading2.gif differ diff --git a/skin/default/xubox_loading3.gif b/skin/default/xubox_loading3.gif new file mode 100644 index 0000000..fbe57be Binary files /dev/null and b/skin/default/xubox_loading3.gif differ diff --git a/skin/default/xubox_title0.png b/skin/default/xubox_title0.png new file mode 100644 index 0000000..4ffbe31 Binary files /dev/null and b/skin/default/xubox_title0.png differ diff --git a/skin/layer.css b/skin/layer.css new file mode 100644 index 0000000..4d04643 --- /dev/null +++ b/skin/layer.css @@ -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;} + + + diff --git a/skin/layer.ext.css b/skin/layer.ext.css new file mode 100644 index 0000000..6570a05 --- /dev/null +++ b/skin/layer.ext.css @@ -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;} + + diff --git a/test/demo.html b/test/demo.html new file mode 100644 index 0000000..54a45c4 --- /dev/null +++ b/test/demo.html @@ -0,0 +1,109 @@ + + + +layer-更懂你的web弹窗解决方案 + + + + + + +
+
+ @Name：layer-v 弹层组件说明
+ @Author：贤心
+ @Blog：http://sentsin.com
+ @官网：http://sentsin.com/jquery/layer
+
+
+【注意事项】
+一、使用时，请把文件夹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协议，将永久性提供无偿服务。版权最终解释权：贤心。
+
+
+ +
+

layer1.8相册模块，点击下述图片试试

+
+ layer宣传图 + 我入互联网这五年 + 微摄影 + 三清山 +
+
+ + +
+ 使用文档 + 更新日志 + 交流反馈 +
+ + + + \ No newline at end of file