layer-更懂你的web弹窗解决方案

commit fdc578ab4402be2cf7c83cd406fe7ae3a994e4ad Author: sentsin Date: Mon Aug 25 12:39:50 2014 +0800 layer1.8.5 - layer mobile 1.0 diff --git a/README.md b/README.md new file mode 100644 index 0000000..452ad4f --- /dev/null +++ b/README.md @@ -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) \ No newline at end of file diff --git a/demo/demo.html b/demo/demo.html new file mode 100644 index 0000000..54a45c4 --- /dev/null +++ b/demo/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相册模块，点击下述图片试试

+ + +

+ 使用文档 + 更新日志 + 交流反馈 +

+ + + + \ No newline at end of file diff --git a/extend/layer.ext.js b/extend/layer.ext.js new file mode 100644 index 0000000..446f35f --- /dev/null +++ b/extend/layer.ext.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; + }() +'

' + +'

'+ (data[0].content || 'content未传入') +'
'+ (data[ii].content || 'content未传入') +'

' + +'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: '

'+ 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/layer.js b/layer.js new file mode 100644 index 0000000..4337b47 --- /dev/null +++ b/layer.js @@ -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 ? '' : '', + 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'; +}; + +var require = '../../init/jquery'; //若采用seajs，需正确配置jquery的相对路径。未用可无视此处。 +if(window.seajs){ + define([require], function(require, exports, module){ + ready.run(); + module.exports = 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..186b2ed --- /dev/null +++ b/layer.min.js @@ -0,0 +1,16 @@ +/**************************************** + + @Name：layer v1.8.5 弹层组件压缩版 + @Author：贤心 + @Date：2014-08-13 + @Blog：http://sentsin.com + @Copyright：Sentsin Xu(贤心) + @官网：http://sentsin.com/jquery/layer + + */ + +;!function(a,b){ +"use strict"; +var d,e,g,h,i, +c="", //组件存放目录，为空表示自动获取(不用填写host，相对站点的根目录即可)。 +f={host:"http://"+location.host,getPath:function(){var a=document.scripts,b=a[a.length-1].src;return c?f.host+c:b.substring(0,b.lastIndexOf("/")+1)},type:["dialog","page","iframe","loading","tips"]};a.layer={v:"1.8.5",ie6:!-[1,]&&!a.XMLHttpRequest,index:0,path:f.getPath(),use:function(a,b){var f,g,h,e=d("head")[0];a=a.replace(/\s/g,""),f=/\.css$/.test(a),g=document.createElement(f?"link":"script"),h=a.replace(/\.|\//g,""),f&&(g.type="text/css",g.rel="stylesheet"),g[f?"href":"src"]=/^http:\/\//.test(a)?a:layer.path+a,g.id=h,d("#"+h)[0]||e.appendChild(g),b&&(document.all?d(g).ready(b):d(g).load(b))},alert:function(a,b,c,e){var f="function"==typeof c,g={dialog:{msg:a,type:b,yes:f?c:e},area:["auto","auto"]};return f||(g.title=c),d.layer(g)},confirm:function(a,b,c,e){var f="function"==typeof c,g={dialog:{msg:a,type:4,btns:2,yes:b,no:f?c:e}};return f||(g.title=c),d.layer(g)},msg:function(a,c,e,f){var g={title:!1,closeBtn:!1,time:c===b?2:c,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,d.layer(g)},load:function(a,b){return"string"==typeof a?layer.msg(a,b||0,16):d.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,c,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 c?c.time:0|c,c=c||{},h.closeBtn=c.closeBtn||!1,h.maxWidth=c.maxWidth||e,h.tips.guide=c.guide||f,h.tips.style=c.style||g,h.tips.more=c.more,d.layer(h)}},g=["xubox_layer","xubox_iframe",".xubox_title",".xubox_text",".xubox_page",".xubox_main"],h=function(a){var b=this,c=b.config;layer.index++,b.index=layer.index,b.config=d.extend({},c,a),b.config.dialog=d.extend({},c.dialog,a.dialog),b.config.page=d.extend({},c.page,a.page),b.config.iframe=d.extend({},c.iframe,a.iframe),b.config.loading=d.extend({},c.loading,a.loading),b.config.tips=d.extend({},c.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 c,d,e,f,h,i,j,k,l,m,n,o,p,b=this;return 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,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+=''),p="object"==typeof d.title,d.title&&(m='

'+(p?d.title[0]:d.title)+"

"),[i,'

'+'

'+h[d.type]+m+''+n+""+''+"

"+j+"

"]},h.pt.creat=function(){var k,l,m,a=this,b="",c=a.config,e=c.dialog,f=a.index,h=c.page,i=d("body"),j=function(c){var c=c||"";b=a.space(c),i.append(d(b[0]))};switch(c.type){case 0:c.title||(c.area=["auto","auto"]),d(".xubox_dialog")[0]&&layer.close(d(".xubox_dialog").parents("."+g[0]).attr("times"));break;case 1:if(""!==h.html)j('

'+h.html+"

"),i.append(d(b[1]));else if(""!==h.url)j('

'+h.html+"

"),i.append(d(b[1])),d.get(h.url,function(a){d("#xuboxPageHtml"+f).html(a.toString()),h.ok&&h.ok(a)});else{if(0!=d(h.dom).parents(g[4]).length)return;j(),d(h.dom).show().wrap(d(b[1]))}break;case 3:c.title=!1,c.area=["auto","auto"],c.closeBtn=["",!1],d(".xubox_loading")[0]&&layer.closeLoad();break;case 4:c.title=!1,c.area=["auto","auto"],c.fix=!1,c.border=[0],c.tips.more||layer.closeTips()}if(1!==c.type&&(j(),i.append(d(b[1]))),k=a.layerE=d("#"+g[0]+f),k.css({width:c.area[0],height:c.area[1]}),c.fix||k.css({position:"absolute"}),c.title&&(3!==c.type||4!==c.type))switch(l=0===c.type?e:c,m=k.find(".xubox_botton"),l.btn=c.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),c.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,d=c.outerHeight();a.offsetTop=""===b.offset[0]&&dc.maxWidth&&k.width(c.maxWidth),q.tipColor=c.tips.style[1],o[0]=k.outerWidth(),q.autoLeft=function(){q.left+o[0]-e.width()>0?(q.tipLeft=q.left+q.width-o[0],r.css({right:12,left:"auto"})):q.tipLeft=q.left},q.where=[function(){q.autoLeft(),q.tipTop=q.top-o[1]-10,r.removeClass("layerTipsB").addClass("layerTipsT").css({"border-right-color":q.tipColor})},function(){q.tipLeft=q.left+q.width+10,q.tipTop=q.top,r.removeClass("layerTipsL").addClass("layerTipsR").css({"border-bottom-color":q.tipColor})},function(){q.autoLeft(),q.tipTop=q.top+q.height+10,r.removeClass("layerTipsT").addClass("layerTipsB").css({"border-right-color":q.tipColor})},function(){q.tipLeft=q.left-o[0]+10,q.tipTop=q.top,r.removeClass("layerTipsR").addClass("layerTipsL").css({"border-bottom-color":q.tipColor})}],q.where[c.tips.guide](),0===c.tips.guide?q.top-(e.scrollTop()+o[1]+16)<0&&q.where[2]():1===c.tips.guide?e.width()-(q.left+q.width+o[0]+16)>0||q.where[3]():2===c.tips.guide?q.top-e.scrollTop()+q.height+o[1]+16-e.height()>0&&q.where[0]():3===c.tips.guide?o[0]+16-q.left>0&&q.where[1]():4===c.tips.guide,k.css({left:q.tipLeft,top:q.tipTop})}c.fadeIn&&(f.fade(k,c.fadeIn,1),f.fade(d("#xubox_shade"+a),c.fadeIn,c.shade[0])),c.fix&&""===c.offset[0]&&!c.shift&&e.on("resize",function(){k.css({top:(e.height()-k.outerHeight())/2})}),b.move()},h.pt.shift=function(a,b,c){var k,d=this,f=d.config,g=d.layerE,h=0,i=e.width(),j=e.height()+(f.fix?0:e.scrollTop());switch(h="50%"==f.offset[1]||""==f.offset[1]?g.outerWidth()/2:g.outerWidth(),k={t:{top:d.offsetTop},b:{top:j-g.outerHeight()-f.border[0]},cl:h+f.border[0],ct:-g.outerHeight(),cr:i-h-f.border[0]},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:d.offsetLeft},b)}},h.pt.autoArea=function(a){var c,e,f,h,i,k,j,l,m,n,o,b=this;switch(a=a||b.index,c=b.config,e=c.page,f=d("#"+g[0]+a),h=f.find(g[2]),i=f.find(g[5]),j=c.title?h.innerHeight():0,l=0,"auto"===c.area[0]&&i.outerWidth()>=c.maxWidth&&f.css({width:c.maxWidth}),c.type){case 0:m=f.find(".xubox_botton>a"),k=f.find(g[3]).outerHeight()+20,m.length>0&&(l=m.outerHeight()+20);break;case 1:n=f.find(g[4]),k=d(e.dom).outerHeight(),"auto"===c.area[0]&&f.css({width:n.outerWidth()}),(""!==e.html||""!==e.url)&&(k=n.outerHeight());break;case 2:f.find("iframe").css({width:f.outerWidth(),height:f.outerHeight()-(c.title?h.innerHeight():0)});break;case 3:o=f.find(".xubox_loading"),k=o.outerHeight(),i.css({width:o.width()})}"auto"===c.area[1]&&i.css({height:j+k+l}),d("#xubox_border"+a).css({width:f.outerWidth()+2*c.border[0],height:f.outerHeight()+2*c.border[0]}),layer.ie6&&"auto"!==c.area[0]&&i.css({width:f.outerWidth()}),"50%"!==c.offset[1]&&""!=c.offset[1]||4===c.type?f.css({marginLeft:0}):f.css({marginLeft:-f.outerWidth()/2})},h.pt.move=function(){var a=this,b=a.config,c={setY:0,moveLayer:function(){var a;a=0==parseInt(c.layerE.css("margin-left"))?parseInt(c.move.css("left")):parseInt(c.move.css("left"))+-parseInt(c.layerE.css("margin-left")),"fixed"!==c.layerE.css("position")&&(a-=c.layerE.parent().offset().left,c.setY=0),c.layerE.css({left:a,top:parseInt(c.move.css("top"))-c.setY})}},f=a.layerE.find(b.move);b.move&&f.attr("move","ok"),b.move?f.css({cursor:"move"}):f.css({cursor:"auto"}),d(b.move).on("mousedown",function(a){if(a.preventDefault(),"ok"===d(this).attr("move")){c.ismove=!0,c.layerE=d(this).parents("."+g[0]);var f=c.layerE.offset().left,h=c.layerE.offset().top,i=c.layerE.width()-6,j=c.layerE.height()-6;d("#xubox_moves")[0]||d("body").append('

'),c.move=d("#xubox_moves"),b.moveType&&c.move.css({opacity:0}),c.moveX=a.pageX-c.move.position().left,c.moveY=a.pageY-c.move.position().top,"fixed"!==c.layerE.css("position")||(c.setY=e.scrollTop())}}),d(document).mousemove(function(a){var d,f,g,h;c.ismove&&(d=a.pageX-c.moveX,f=a.pageY-c.moveY,a.preventDefault(),b.moveOut||(c.setY=e.scrollTop(),g=e.width()-c.move.outerWidth()-b.border[0],h=b.border[0]+c.setY,dg&&(d=g),h>f&&(f=h),f>e.height()-c.move.outerHeight()-b.border[0]+c.setY&&(f=e.height()-c.move.outerHeight()-b.border[0]+c.setY)),c.move.css({left:d,top:f}),b.moveType&&c.moveLayer(),d=null,f=null,g=null,h=null)}).mouseup(function(){try{c.ismove&&(c.moveLayer(),c.move.remove()),c.ismove=!1}catch(a){c.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,c=a.config,e=c.dialog;a.openLayer(),a.config.success(b),layer.ie6&&a.IE6(b),b.find(".xubox_close").on("click",function(){c.close(a.index),layer.close(a.index)}),b.find(".xubox_yes").on("click",function(){c.yes?c.yes(a.index):e.yes(a.index)}),b.find(".xubox_no").on("click",function(){c.no?c.no(a.index):e.no(a.index),layer.close(a.index)}),a.config.shadeClose&&d("#xubox_shade"+a.index).on("click",function(){layer.close(a.index)}),b.find(".xubox_min").on("click",function(){layer.min(a.index,c),c.min&&c.min(b)}),b.find(".xubox_max").on("click",function(){d(this).hasClass("xubox_maxmin")?(layer.restore(a.index),c.restore&&c.restore(b)):(layer.full(a.index,c),c.full&&c.full(b))}),f.config.end[a.index]=c.end},f.reselect=function(){d.each(d("select"),function(){var c=d(this);c.parents("."+g[0])[0]||1==c.attr("layer")&&d("."+g[0]).length<1&&c.removeAttr("layer").show(),c=null})},h.pt.IE6=function(a){var f,b=this,c=a.offset().top;f=b.config.fix?function(){a.css({top:e.scrollTop()+c})}:function(){a.css({top:c})},f(),e.scroll(f),d.each(d("select"),function(){var c=d(this);c.parents("."+g[0])[0]||"none"==c.css("display")||c.attr({layer:"1"}).hide(),c=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 d(a).parents("."+g[0]).attr("times")},layer.getChildFrame=function(a,b){return b=b||d("."+g[1]).parents("."+g[0]).attr("times"),d("#"+g[0]+b).find("."+g[1]).contents().find(a)},layer.getFrameIndex=function(a){return d(a?"#"+a:"."+g[1]).parents("."+g[0]).attr("times")},layer.iframeAuto=function(a){var b,c,e,f,h;a=a||d("."+g[1]).parents("."+g[0]).attr("times"),b=layer.getChildFrame("body",a).outerHeight(),c=d("#"+g[0]+a),e=c.find(g[2]),f=0,e&&(f=e.height()),c.css({height:b+f}),h=-parseInt(d("#xubox_border"+a).css("top")),d("#xubox_border"+a).css({height:b+2*h+f}),d("#"+g[1]+a).css({height:b})},layer.iframeSrc=function(a,b){d("#"+g[0]+a).find("iframe").attr("src",b)},layer.area=function(a,b){var j,c=[d("#"+g[0]+a),d("#xubox_border"+a)],e=c[0].attr("type"),h=c[0].find(g[5]),i=c[0].find(g[2]);(e===f.type[1]||e===f.type[2])&&(c[0].css(b),h.css({width:b.width,height:b.height}),e===f.type[2]&&(j=c[0].find("iframe"),j.css({width:b.width,height:i?b.height-i.innerHeight():b.height})),"0px"!==c[0].css("margin-left")&&(b.hasOwnProperty("top")&&c[0].css({top:b.top-(c[1][0]?parseFloat(c[1].css("top")):0)}),b.hasOwnProperty("left")&&c[0].css({left:b.left+c[0].outerWidth()/2-(c[1][0]?parseFloat(c[1].css("left")):0)}),c[0].css({marginLeft:-c[0].outerWidth()/2})),c[1][0]&&c[1].css({width:parseFloat(b.width)-2*parseFloat(c[1].css("left")),height:parseFloat(b.height)-2*parseFloat(c[1].css("top"))}))},layer.min=function(a,b){var c=d("#"+g[0]+a),e=[c.position().top,c.position().left+parseFloat(c.css("margin-left"))];f.isauto(c,b,e),layer.area(a,{width:180,height:35}),c.find(".xubox_min").hide(),"page"===c.attr("type")&&c.find(g[4]).hide(),f.rescollbar(a)},layer.restore=function(a){var b=d("#"+g[0]+a),c=b.attr("area").split(",");b.attr("type"),layer.area(a,{width:parseFloat(c[0]),height:parseFloat(c[1]),top:parseFloat(c[2]),left:parseFloat(c[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 i,c=d("#"+g[0]+a),h=2*b.border[0]||6,j=[c.position().top,c.position().left+parseFloat(c.css("margin-left"))];f.isauto(c,b,j),g.html.attr("layer-full")||g.html.css("overflow","hidden").attr("layer-full",a),clearTimeout(i),i=setTimeout(function(){layer.area(a,{top:"fixed"===c.css("position")?0:e.scrollTop(),left:"fixed"===c.css("position")?0:e.scrollLeft(),width:e.width()-h,height:e.height()-h})},100)},layer.title=function(a,b){var c=d("#"+g[0]+(b||layer.index)).find(".xubox_title>em");c.html(a)},layer.close=function(a){var h,b=d("#"+g[0]+a),c=b.attr("type"),e=d("#xubox_moves, #xubox_shade"+a);if(b[0]){if(c==f.type[1])if(b.find(".xuboxPageHtml")[0])b[0].innerHTML="",b.remove();else for(b.find(".xubox_setwin,.xubox_close,.xubox_botton,.xubox_title,.xubox_border").remove(),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(d(".xubox_loading").parents("."+g[0]).attr("times"))},layer.closeTips=function(){layer.closeAll("tips")},layer.closeAll=function(a){d.each(d("."+g[0]),function(){var b=d(this),c=a?b.attr("type")===a:1;c&&layer.close(b.attr("times")),c=null})},f.run=function(){d=jQuery,e=d(a),g.html=d("html"),layer.use("skin/layer.css"),d.layer=function(a){var b=new h(a);return b.index},(new Image).src=layer.path+"skin/default/xubox_ico0.png"},i="../../init/jquery",a.seajs?define([i],function(a,b,c){f.run(),c.exports=layer}):f.run()}(window); \ No newline at end of file diff --git a/m/README.md b/m/README.md new file mode 100644 index 0000000..9d6747e --- /dev/null +++ b/m/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/m/layer.m.dev.js b/m/layer.m.dev.js new file mode 100644 index 0000000..a599c74 --- /dev/null +++ b/m/layer.m.dev.js @@ -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 + ? '

'+ (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'; + } + + layerbox.innerHTML = (config.shade ? '

' : '') + +'

' + +'

' + + title + +'

'+ (config.content||' ') +'

' + + button + +'

' + +'

'; + + 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); \ No newline at end of file diff --git a/m/layer.m.js b/m/layer.m.js new file mode 100644 index 0000000..8080f81 --- /dev/null +++ b/m/layer.m.js @@ -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?'

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

':""}(),k=function(){var c,a=(b.btn||[]).length;return 0!==a&&b.btn?(c=''+b.btn[0]+"",2===a&&(c=''+b.btn[1]+""+c),'

'+c+"

"):""}(),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?'

':"")+'

"+"

"+'

"+h+'

'+(b.content||" ")+"

"+k+"

"+"

",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); \ No newline at end of file diff --git a/m/need/layer.css b/m/need/layer.css new file mode 100644 index 0000000..d9212e1 --- /dev/null +++ b/m/need/layer.css @@ -0,0 +1,29 @@ +/* layer弹层移动版样式 */ + +.layermbox{position:absolute; left:0; top:0; width:100%; z-index:19891014;} +.layermbox *{margin:0; bottom:0;} +.layermchild{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;} +.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{padding-left:50px; background: url(data:image/gif;base64,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) no-repeat 20px 18px;} +.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:7px; 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;} + +