1. 下载源码:点击下载
  1. ;!function(window, undefined){
  2. "use strict";
  3.  
  4. var pathType = true, //是否采用自动获取绝对路径。false:将采用下述变量中的配置
  5. pathUrl = 'lily/lib/layer/', //上述变量为false才有效,当前layerjs所在目录(不用填写host,相对站点的根目录即可)。
  6.  
  7. $, win, ready = {
  8. hosts: (function(){
  9. var dk = location.href.match(/\:\d /);
  10. dk = dk ? dk[0] : '';
  11. return 'http://' document.domain dk '/';
  12. }()),
  13.  
  14. getPath: function(){
  15. var js = document.scripts || $('script'), jsPath = js[js.length - 1].src;
  16. if(pathType){
  17. return jsPath.substring(0, jsPath.lastIndexOf("/") 1);
  18. } else {
  19. return this.hosts pathUrl;
  20. }
  21. }
  22. };
  23.  
  24. //默认内置方法。
  25. window.layer = {
  26. v : '1.7.0', //版本号
  27. ie6: !-[1,] && !window.XMLHttpRequest,
  28. index: 0,
  29. path: ready.getPath(),
  30.  
  31. //载入模块
  32. use: function(module, callback){
  33. var i = 0, head = $('head')[0];
  34. var module = module.replace(/\s/g, '');
  35. var iscss = /\.css$/.test(module);
  36. var node = document.createElement(iscss ? 'link' : 'script');
  37. var id = module.replace(/\.|\//g, '');
  38. if(iscss){
  39. node.setAttribute('type', 'text/css');
  40. node.setAttribute('rel', 'stylesheet');
  41. }
  42. node.setAttribute((iscss ? 'href' : 'src'), layer.path module);
  43. node.setAttribute('id', id);
  44. if(!$('#' id)[0]){
  45. head.appendChild(node);
  46. }
  47. $(node).ready(function(){
  48. callback && callback();
  49. });
  50. },
  51.  
  52. ready: function(callback){
  53. return layer.use('skin/layer.css', callback);
  54. },
  55.  
  56. //普通对话框,类似系统默认的alert()
  57. alert: function(alertMsg, alertType, alertTit, alertYes){
  58. return $.layer({
  59. dialog : {msg : alertMsg, type : alertType, yes : alertYes},
  60. title : alertTit,
  61. area: ['auto', 'auto']
  62. });
  63. },
  64.  
  65. //询问框,类似系统默认的confirm()
  66. confirm: function(conMsg, conYes, conTit, conNo){
  67. return $.layer({
  68. dialog : {msg : conMsg, type : 4, btns : 2, yes : conYes, no : conNo},
  69. title : conTit
  70. });
  71. },
  72.  
  73. //普通消息框,一般用于行为成功后的提醒,默认两秒自动关闭
  74. msg: function(msgText, msgTime, parme, callback){
  75. var icon, conf = {title: false, closeBtn: false};
  76. (msgText == '' || msgText == undefined) && (msgText = ' ');
  77. msgTime === undefined && (msgTime = 2);
  78. if(typeof parme === 'number'){
  79. icon = parme;
  80. } else {
  81. parme = parme || {};
  82. icon = parme.type;
  83. conf.success = function(){layer.shift(parme.rate)};
  84. conf.shade = parme.shade;
  85. }
  86. conf.time = msgTime;
  87. conf.dialog = {msg: msgText, type: icon};
  88. conf.end = typeof parme === 'function' ? parme : callback;
  89. return $.layer(conf);
  90. },
  91.  
  92. //加载层快捷引用
  93. load: function(parme, loadIcon){
  94. if(typeof parme === 'string'){
  95. return this.msg(parme, 0, 16);
  96. } else {
  97. return $.layer({
  98. time: parme,
  99. loading: {type : loadIcon},
  100. bgcolor: !loadIcon ? '' : '#fff',
  101. shade: [0.1, '#000', !loadIcon ? false : true],
  102. border :[7,0.3, '#000', (loadIcon === 3 || !loadIcon) ? false : true],
  103. type : 3,
  104. title : ['',false],
  105. closeBtn : [0 , false]
  106. });
  107. }
  108. },
  109.  
  110. //tips层快捷引用
  111. tips: function(html, follow, parme, maxWidth, guide, style){
  112. var conf = {type: 4, shade: false, success: function(layerE){
  113. if(!this.closeBtn){
  114. layerE.find('.xubox_tips').css({'padding-right': 10});
  115. }
  116. }, bgcolor:'', tips:{msg: html, follow: follow}};
  117. parme = parme || {};
  118. conf.time = parme.time || parme;
  119. conf.closeBtn = parme.closeBtn || false
  120. conf.maxWidth = parme.maxWidth || maxWidth;
  121. conf.tips.guide = parme.guide || guide;
  122. conf.tips.style = parme.style || style;
  123. return $.layer(conf);
  124. }
  125. };
  126.  
  127. var Class = function(setings){
  128. var config = this.config;
  129. layer.index ;
  130. this.index = layer.index;
  131. this.config = $.extend({} , config , setings);
  132. this.config.dialog = $.extend({}, config.dialog , setings.dialog);
  133. this.config.page = $.extend({}, config.page , setings.page);
  134. this.config.iframe = $.extend({}, config.iframe , setings.iframe);
  135. this.config.loading = $.extend({}, config.loading , setings.loading);
  136. this.config.tips = $.extend({}, config.tips , setings.tips);
  137. this.creat();
  138. };
  139.  
  140. Class.pt = Class.prototype;
  141.  
  142. //默认配置
  143. Class.pt.config = {
  144. type: 0,
  145. shade: [0.3 , '#000' , true],
  146. shadeClose: false,
  147. fix: true,
  148. move: ['.xubox_title' , true],
  149. moveOut: false,
  150. title: ['信息' , true],
  151. offset: ['200px' , '50%'],
  152. area: ['310px' , 'auto'],
  153. closeBtn: [0 , true],
  154. time: 0,
  155. bgcolor: '#fff',
  156. border: [8 , 0.3 , '#000', true],
  157. zIndex: 19891014,
  158. maxWidth: 400,
  159. dialog: {btns : 1, btn : ['确定','取消'], type : 3, msg : '', yes : function(index){ layer.close(index);}, no : function(index){ layer.close(index);}
  160. },
  161. page: {dom: '#xulayer', html: '', url: ''},
  162. iframe: {src: 'http://sentsin.com'},
  163. loading: {type: 0},
  164. tips: {msg: '', follow: '', guide: 0, isGuide: true, style: ['background-color:#FF9900; color:#fff;', '#FF9900']},
  165. success: function(layer){}, //创建成功后的回调
  166. close: function(index){ layer.close(index);}, //右上角关闭回调
  167. end: function(){} //终极销毁回调
  168. };
  169.  
  170. Class.pt.type = ['dialog', 'page', 'iframe', 'loading', 'tips'];
  171.  
  172. //容器
  173. Class.pt.space = function(html){
  174. var html = html || '', times = this.index, config = this.config, dialog = config.dialog, dom = this.dom,
  175. ico = dialog.type === -1 ? '' : '<span class="xubox_msg xulayer_png32 xubox_msgico xubox_msgtype' dialog.type '"></span>',
  176. frame = [
  177. '<div class="xubox_dialog">' ico '<span class="xubox_msg xubox_text" style="' (ico ? '' : 'padding-left:20px') '">' dialog.msg '</span></div>',
  178. '<div class="xubox_page">' html '</div>',
  179. '<iframe allowtransparency="true" id="' dom.ifr '' times '" name="' dom.ifr '' times '" onload="$(this).removeClass(\'xubox_load\');" class="' dom.ifr '" frameborder="0" src="' config.iframe.src '"></iframe>',
  180. '<span class="xubox_loading xubox_loading_' config.loading.type '"></span>',
  181. '<div class="xubox_tips" style="' config.tips.style[0] '"><div class="xubox_tipsMsg">' config.tips.msg '</div><i class="layerTipsG"></i></div>'
  182. ],
  183. shade = '' , border = '', zIndex = config.zIndex times,
  184. shadeStyle = 'z-index:' zIndex '; background-color:' config.shade[1] '; opacity:' config.shade[0] '; filter:alpha(opacity=' config.shade[0]*100 ');';
  185.  
  186. config.shade[2] && (shade = '<div times="' times '" id="xubox_shade' times '" class="xubox_shade" style="' shadeStyle '"></div>');
  187.  
  188. config.zIndex = zIndex;
  189. 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;";
  190.  
  191. config.border[3] && (border = '<div id="xubox_border' times '" class="xubox_border" style="' borderStyle '"></div>');
  192. config.closeBtn[1] && (closebtn = '<a class="xubox_close xulayer_png32 xubox_close' config.closeBtn[0] '" href="javascript:;"></a>');
  193. config.title[1] && (title = '<h2 class="xubox_title"><em>' config.title[0] '</em></h2>')
  194. var boxhtml = '<div times="' times '" showtime="' config.time '" style="z-index:' zIndex '" id="' dom.lay '' times
  195. '" class="' dom.lay '">'
  196. '<div style="background-color:' config.bgcolor '; z-index:' zIndex '" class="xubox_main">'
  197. frame[config.type]
  198. title
  199. closebtn
  200. '<span class="xubox_botton"></span>'
  201. '</div>' border '</div>';
  202. return [shade , boxhtml];
  203. };
  204.  
  205. //缓存字符
  206. Class.pt.dom = {
  207. lay: 'xubox_layer',
  208. ifr: 'xubox_iframe'
  209. };
  210.  
  211. //创建骨架
  212. Class.pt.creat = function(){
  213. var that = this , space = '', config = this.config, dialog = config.dialog, title = that.config.title, dom = that.dom, times = that.index;;
  214.  
  215. title.constructor === Array || (that.config.title = [title, true]);
  216. title === false && (that.config.title = [title, false]);
  217.  
  218. var page = config.page, body = $("body"), setSpace = function(html){
  219. var html = html || ''
  220. space = that.space(html);
  221. body.append(space[0]);
  222. };
  223.  
  224. switch(config.type){
  225. case 1:
  226. if(page.html !== ''){
  227. setSpace('<div class="xuboxPageHtml">' page.html '</div>');
  228. body.append(space[1]);
  229. }else if(page.url !== ''){
  230. setSpace('<div class="xuboxPageHtml" id="xuboxPageHtml' times '">' page.html '</div>');
  231. body.append(space[1]);
  232. $.get(page.url, function(datas){
  233. $('#xuboxPageHtml' times).html(datas);
  234. page.ok && page.ok(datas);
  235. });
  236. }else{
  237. if($(page.dom).parents('.xubox_page').length == 0){
  238. setSpace();
  239. $(page.dom).show().wrap(space[1]);
  240. }else{
  241. return;
  242. }
  243. }
  244. break;
  245. case 2:
  246. setSpace();
  247. body.append(space[1]);
  248. break;
  249. case 3:
  250. config.title = ['', false];
  251. config.area = ['auto', 'auto'];
  252. config.closeBtn = ['', false];
  253. $('.xubox_loading')[0] && layer.close($('.xubox_loading').parents('.' dom.lay).attr('times'));
  254. setSpace();
  255. body.append(space[1]);
  256. break;
  257. case 4:
  258. config.title = ['', false];
  259. config.area = ['auto', 'auto'];
  260. config.fix = false;
  261. config.border = false;
  262. $('.xubox_tips')[0] && layer.close($('.xubox_tips').parents('.' dom.lay).attr('times'));
  263. setSpace();
  264. body.append(space[1]);
  265. $('#' dom.lay times).find('.xubox_close').css({top: 6, right: 7});
  266. break;
  267. default:
  268. config.title[1] || (config.area = ['auto','auto']);
  269. $('.xubox_dialog')[0] && layer.close($('.xubox_dialog').parents('.' dom.lay).attr('times'));
  270. setSpace();
  271. body.append(space[1]);
  272. break;
  273. };
  274.  
  275. this.layerS = $('#xubox_shade' times);
  276. this.layerB = $('#xubox_border' times);
  277. this.layerE = $('#' dom.lay times);
  278.  
  279. var layerE = this.layerE;
  280. this.layerMian = layerE.find('.xubox_main');
  281. this.layerTitle = layerE.find('.xubox_title');
  282. this.layerText = layerE.find('.xubox_text');
  283. this.layerPage = layerE.find('.xubox_page');
  284. this.layerBtn = layerE.find('.xubox_botton');
  285.  
  286. //设置layer面积坐标等数据
  287. if(config.offset[1].indexOf("px") != -1){
  288. var _left = parseInt(config.offset[1]);
  289. }else{
  290. if(config.offset[1] == '50%'){
  291. var _left = config.offset[1];
  292. }else{
  293. var _left = parseInt(config.offset[1])/100 * win.width();
  294. }
  295. };
  296. layerE.css({left: _left config.border[0], width: config.area[0], height: config.area[1]});
  297. config.fix ? layerE.css({top: parseInt(config.offset[0]) config.border[0]}) : layerE.css({top: parseInt(config.offset[0]) win.scrollTop() config.border[0], position: 'absolute'});
  298.  
  299. //配置按钮 对话层形式专有
  300. if(config.type == 0 && config.title[1]){
  301. switch(dialog.btns){
  302. case 0:
  303. that.layerBtn.html('').hide();
  304. break;
  305. case 2:
  306. that.layerBtn.html('<a href="javascript:;" class="xubox_yes xubox_botton2">' dialog.btn[0] '</a>' '<a href="javascript:;" class="xubox_no xubox_botton3">' dialog.btn[1] '</a>');
  307. break;
  308. default:
  309. that.layerBtn.html('<a href="javascript:;" class="xubox_yes xubox_botton1">' dialog.btn[0] '</a>');
  310. }
  311. };
  312.  
  313. if(layerE.css('left') === 'auto'){
  314. layerE.hide();
  315. setTimeout(function(){
  316. layerE.show();
  317. that.set(times);
  318. }, 500);
  319. }else{
  320. that.set(times);
  321. }
  322. config.time <= 0 || that.autoclose();
  323. this.callback();
  324. };
  325.  
  326. //初始化骨架
  327. Class.pt.set = function(times){
  328. var that = this, layerE = that.layerE, config = that.config, dialog = config.dialog, page = config.page, loading = config.loading, dom = that.dom;
  329. that.autoArea(times);
  330. if(config.title[1]){
  331. layer.ie6 && that.layerTitle.css({width : layerE.outerWidth()});
  332. }else{
  333. config.type != 4 && layerE.find('.xubox_close').addClass('xubox_close1');
  334. };
  335.  
  336. layerE.attr({'type' : that.type[config.type]});
  337.  
  338. switch(config.type){
  339. case 1:
  340. layerE.find(page.dom).addClass('layer_pageContent');
  341. config.shade[2] && layerE.css({zIndex: config.zIndex 1});
  342. config.title[1] && that.layerPage.css({top: that.layerTitle.outerHeight()});
  343. break;
  344.  
  345. case 2:
  346. var iframe = layerE.find('.' dom.ifr), heg = layerE.height();
  347. iframe.addClass('xubox_load').css({width: layerE.width()});
  348. config.title[1] ? iframe.css({top: that.layerTitle.height(), height: heg - that.layerTitle.height()}) : iframe.css({top: 0, height : heg});
  349. layer.ie6 && iframe.attr('src', config.iframe.src);
  350. break;
  351.  
  352. case 3:
  353. break;
  354. case 4 :
  355. var layArea = [0, layerE.outerHeight()], fow = $(config.tips.follow), fowo = {
  356. width: fow.outerWidth(),
  357. height: fow.outerHeight(),
  358. top: fow.offset().top,
  359. left: fow.offset().left
  360. }, tipsG = layerE.find('.layerTipsG');
  361.  
  362. config.tips.isGuide || tipsG.remove();
  363. fowo.width > config.maxWidth && layerE.width(config.maxWidth);
  364.  
  365. fowo.tipColor = config.tips.style[1];
  366. layArea[0] = layerE.outerWidth();
  367.  
  368. //辨别tips的方位
  369. fowo.where = [function(){ //上
  370. fowo.tipLeft = fowo.left;
  371. fowo.tipTop = fowo.top - layArea[1] - 10;
  372. tipsG.removeClass('layerTipsB').addClass('layerTipsT').css({'border-right-color': fowo.tipColor});
  373. }, function(){ //右
  374. fowo.tipLeft = fowo.left fowo.width 10;
  375. fowo.tipTop = fowo.top;
  376. tipsG.removeClass('layerTipsL').addClass('layerTipsR').css({'border-bottom-color': fowo.tipColor});
  377. }, function(){ //下
  378. fowo.tipLeft = fowo.left;
  379. fowo.tipTop = fowo.top fowo.height 10;
  380. tipsG.removeClass('layerTipsT').addClass('layerTipsB').css({'border-right-color': fowo.tipColor});
  381. }, function(){ //左
  382. fowo.tipLeft = fowo.left - layArea[0] 10;
  383. fowo.tipTop = fowo.top;
  384. tipsG.removeClass('layerTipsR').addClass('layerTipsL').css({'border-bottom-color': fowo.tipColor});
  385. }];
  386. fowo.where[config.tips.guide]();
  387.  
  388. /* 8*2为小三角形占据的空间 */
  389. if(config.tips.guide === 0){
  390. fowo.top - (win.scrollTop() layArea[1] 8*2) < 0 && fowo.where[2]();
  391. } else if (config.tips.guide === 1){
  392. win.width() - (fowo.left fowo.width layArea[0] 8*2) > 0 || fowo.where[3]()
  393. } else if (config.tips.guide === 2){
  394. (fowo.top - win.scrollTop() fowo.height layArea[1] 8*2) - win.height() > 0 && fowo.where[0]();
  395. } else if (config.tips.guide === 3){
  396. layArea[0] 8*2 - fowo.left > 0 && fowo.where[1]()
  397. }
  398. layerE.css({left: fowo.tipLeft, top: fowo.tipTop});
  399. break;
  400.  
  401. default:
  402. that.layerMian.css({'background-color': '#fff'});
  403. if(config.title[1]){
  404. that.layerText.css({paddingTop: 18 that.layerTitle.outerHeight()});
  405. }else{
  406. layerE.find('.xubox_msgico').css({top: 8});
  407. that.layerText.css({marginTop : 11});
  408. }
  409. break;
  410. };
  411.  
  412. config.fadeIn && layerE.css({opacity: 0}).animate({opacity: 1}, config.fadeIn);
  413. that.move();
  414. };
  415.  
  416. //自适应宽高
  417. Class.pt.autoArea = function(times){
  418.  
  419. var that = this, layerE = that.layerE, config = that.config, page = config.page,
  420. layerMian = that.layerMian, layerBtn = that.layerBtn, layerText = that.layerText,
  421. layerPage = that.layerPage, layerB = that.layerB, titHeight, outHeight, btnHeight = 0,
  422. load = $(".xubox_loading");
  423. if(config.area[0] === 'auto' && layerMian.outerWidth() >= config.maxWidth){
  424. layerE.css({width : config.maxWidth});
  425. }
  426. config.title[1] ? titHeight = that.layerTitle.innerHeight() : titHeight = 0;
  427. switch(config.type){
  428. case 0:
  429. var aBtn = layerBtn.find('a');
  430. outHeight = layerText.outerHeight() 20;
  431. if(aBtn.length > 0){
  432. btnHeight = aBtn.outerHeight() 20;
  433. }
  434. break;
  435. case 1:
  436. outHeight = $(page.dom).outerHeight();
  437. config.area[0] === 'auto' && layerE.css({width : layerPage.outerWidth()});
  438. if(page.html !== '' || page.url !== ''){
  439. outHeight = layerPage.outerHeight();
  440. }
  441. break;
  442. case 3:
  443. outHeight = load.outerHeight();
  444. layerMian.css({width: load.width()});
  445. break;
  446. };
  447. (config.area[1] === 'auto') && layerMian.css({height: titHeight outHeight btnHeight});
  448. layerB.css({width: layerE.outerWidth() 2*config.border[0] , height: layerE.outerHeight() 2*config.border[0]});
  449. (layer.ie6 && config.area[0] != 'auto') && layerMian.css({width : layerE.outerWidth()});
  450. (config.offset[1] === '50%' || config.offset[1] == '') && (config.type !== 4) ? layerE.css({marginLeft : -layerE.outerWidth()/2}) : layerE.css({marginLeft : 0});
  451. };
  452.  
  453. //拖拽层
  454. Class.pt.move = function(){
  455. var that = this, config = this.config, dom = that.dom, conf = {
  456. setY: 0,
  457. moveLayer: function(){
  458. if(parseInt(conf.layerE.css('margin-left')) == 0){
  459. var lefts = parseInt(conf.move.css('left'));
  460. }else{
  461. var lefts = parseInt(conf.move.css('left')) (-parseInt(conf.layerE.css('margin-left')))
  462. }
  463. if(conf.layerE.css('position') !== 'fixed'){
  464. lefts = lefts - conf.layerE.parent().offset().left;
  465. conf.setY = 0
  466. }
  467. conf.layerE.css({left: lefts, top: parseInt(conf.move.css('top')) - conf.setY});
  468. }
  469. };
  470.  
  471. config.move[1] && that.layerE.find(config.move[0]).attr('move','ok');
  472. config.move[1] ? that.layerE.find(config.move[0]).css({cursor: 'move'}) : that.layerE.find(config.move[0]).css({cursor: 'auto'});
  473.  
  474. $(config.move[0]).on('mousedown', function(M){
  475. M.preventDefault();
  476. if($(this).attr('move') === 'ok'){
  477. conf.ismove = true;
  478. conf.layerE = $(this).parents('.' dom.lay);
  479. var xx = conf.layerE.offset().left, yy = conf.layerE.offset().top, ww = conf.layerE.width() - 6, hh = conf.layerE.height() - 6;
  480. if(!$('#xubox_moves')[0]){
  481. $('body').append('<div id="xubox_moves" class="xubox_moves" style="left:' xx 'px; top:' yy 'px; width:' ww 'px; height:' hh 'px; z-index:2147483584"></div>');
  482. }
  483. conf.move = $('#xubox_moves');
  484. config.moveType && conf.move.css({opacity: 0});
  485.  
  486. conf.moveX = M.pageX - conf.move.position().left;
  487. conf.moveY = M.pageY - conf.move.position().top;
  488. conf.layerE.css('position') !== 'fixed' || (conf.setY = win.scrollTop());
  489. }
  490. });
  491.  
  492. $(document).mousemove(function(M){
  493. if(conf.ismove){
  494. var offsetX = M.pageX - conf.moveX, offsetY = M.pageY - conf.moveY;
  495. M.preventDefault();
  496.  
  497. //控制元素不被拖出窗口外
  498. if(!config.moveOut){
  499. conf.setY = win.scrollTop();
  500. var setRig = win.width() - conf.move.outerWidth() - config.border[0], setTop = config.border[0] conf.setY;
  501. offsetX < config.border[0] && (offsetX = config.border[0]);
  502. offsetX > setRig && (offsetX = setRig);
  503. offsetY < setTop && (offsetY = setTop);
  504. offsetY > win.height() - conf.move.outerHeight() - config.border[0] conf.setY && (offsetY = win.height() - conf.move.outerHeight() - config.border[0] conf.setY);
  505. }
  506.  
  507. conf.move.css({left: offsetX, top: offsetY});
  508. config.moveType && conf.moveLayer();
  509.  
  510. offsetX = null;
  511. offsetY = null;
  512. setRig = null;
  513. setTop = null
  514. }
  515. }).mouseup(function(){
  516. try{
  517. if(conf.ismove){
  518. conf.moveLayer();
  519. conf.move.remove();
  520. }
  521. conf.ismove = false;
  522. }catch(e){
  523. conf.ismove = false;
  524. }
  525. config.moveEnd && config.moveEnd();
  526. });
  527. };
  528.  
  529. //自动关闭layer
  530. Class.pt.autoclose = function(){
  531. var that = this, time = this.config.time, maxLoad = function(){
  532. time--;
  533. if(time === 0){
  534. layer.close(that.index);
  535. clearInterval(that.autotime);
  536. }
  537. };
  538. this.autotime = setInterval(maxLoad , 1000);
  539. };
  540.  
  541. ready.config = {
  542. end : {}
  543. };
  544.  
  545. Class.pt.callback = function(){
  546. var that = this, layerE = that.layerE, config = that.config, dialog = config.dialog;
  547. that.openLayer();
  548. that.config.success(layerE);
  549. layer.ie6 && that.IE6();
  550.  
  551. layerE.find('.xubox_close').off('click').on('click', function(e){
  552. e.preventDefault();
  553. config.close(that.index);
  554. });
  555.  
  556. layerE.find('.xubox_yes').off('click').on('click',function(e){
  557. e.preventDefault();
  558. dialog.yes(that.index);
  559. });
  560.  
  561. layerE.find('.xubox_no').off('click').on('click',function(e){
  562. e.preventDefault();
  563. dialog.no(that.index);
  564. });
  565.  
  566. this.layerS.off('click').on('click', function(e){
  567. e.preventDefault();
  568. that.config.shadeClose && layer.close(that.index);
  569. });
  570.  
  571. ready.config.end[that.index] = config.end;
  572. };
  573.  
  574. Class.pt.IE6 = function(){
  575. var that = this, layerE = that.layerE, select = $('select'), dom = that.dom;
  576. var _ieTop = layerE.offset().top;
  577. //ie6的固定与相对定位
  578. if(that.config.fix){
  579. var ie6Fix = function(){
  580. layerE.css({top : $(document).scrollTop() _ieTop});
  581. };
  582. }else{
  583. var ie6Fix = function(){
  584. layerE.css({top : _ieTop});
  585. };
  586. }
  587. ie6Fix();
  588. win.scroll(ie6Fix);
  589.  
  590. //隐藏select
  591. $.each(select, function(index , value){
  592. var sthis = $(this);
  593. if(!sthis.parents('.' dom.lay)[0]){
  594. sthis.css('display') == 'none' || sthis.attr({'layer' : '1'}).hide();
  595. }
  596. sthis = null;
  597. });
  598.  
  599. //恢复select
  600. that.reselect = function(){
  601. $.each(select, function(index , value){
  602. var sthis = $(this);
  603. if(!sthis.parents('.' dom.lay)[0]){
  604. (sthis.attr('layer') == 1 && $('.' dom.lay).length < 1) && sthis.removeAttr('layer').show();
  605. }
  606. sthis = null;
  607. });
  608. };
  609. };
  610.  
  611. //给layer对象拓展方法
  612. Class.pt.openLayer = function(){
  613. var that = this, dom = that.dom;
  614.  
  615. //自适应宽高
  616. layer.autoArea = function(index){
  617. return that.autoArea(index);
  618. };
  619.  
  620. //获取layer当前索引
  621. layer.getIndex = function(selector){
  622. return $(selector).parents('.' dom.lay).attr('times');
  623. };
  624.  
  625. //获取子iframe的DOM
  626. layer.getChildFrame = function(selector, index){
  627. index = index || $('.' dom.ifr).parents('.' dom.lay).attr('times');
  628. return $('#' dom.lay index).find('.' dom.ifr).contents().find(selector);
  629. };
  630.  
  631. //得到当前iframe层的索引,子iframe时使用
  632. layer.getFrameIndex = function(name){
  633. return $(name ? '#' name : '.' dom.ifr).parents('.' dom.lay).attr('times');
  634. };
  635.  
  636. //iframe层自适应宽高
  637. layer.iframeAuto = function(index){
  638. index = index || $('.' dom.ifr).parents('.' dom.lay).attr('times');
  639. var heg = this.getChildFrame('body', index).outerHeight(),
  640. lbox = $('#' dom.lay index), tit = lbox.find('.xubox_title'), titHt = 0;
  641. !tit || (titHt = tit.height());
  642. lbox.css({height: heg titHt});
  643. var bs = -parseInt($('#xubox_border' index).css('top'));
  644. $('#xubox_border' index).css({height: heg 2*bs titHt});
  645. $('#' dom.ifr index).css({height: heg});
  646. };
  647.  
  648. //关闭layer
  649. layer.close = function(index){
  650. var layerNow = $('#' dom.lay index), shadeNow = $('#xubox_moves, #xubox_shade' index);
  651. if(layerNow.attr('type') == that.type[1]){
  652. if(layerNow.find('.xuboxPageHtml')[0]){
  653. layerNow.remove();
  654. }else{
  655. layerNow.find('.xubox_close,.xubox_botton,.xubox_title,.xubox_border').remove();
  656. for(var i = 0 ; i < 3 ; i ){
  657. layerNow.find('.layer_pageContent').unwrap().hide();
  658. }
  659. }
  660. }else{
  661. document.all && layerNow.find('#' dom.ifr index).remove();
  662. layerNow.remove();
  663. }
  664. shadeNow.remove();
  665. layer.ie6 && that.reselect();
  666. typeof ready.config.end[index] === 'function' && ready.config.end[index]();
  667. delete ready.config.end[index];
  668. };
  669.  
  670. //关闭加载层
  671. layer.loadClose = function(){
  672. var parent = $('.xubox_loading').parents('.' dom.lay),
  673. index = parent.attr('times');
  674. layer.close(index);
  675. };
  676.  
  677. //出场内置动画
  678. layer.shift = function(type, rate){
  679. var config = that.config, iE6 = layer.ie6, layerE = that.layerE, cutWth = 0, ww = win.width(), wh = win.height();
  680. (config.offset[1] == '50%' || config.offset[1] == '') ? cutWth = layerE.outerWidth()/2 : cutWth = layerE.outerWidth();
  681. var anim = {
  682. t: {top : config.border[0]},
  683. b: {top : wh - layerE.outerHeight() - config.border[0]},
  684. cl: cutWth config.border[0],
  685. ct: -layerE.outerHeight(),
  686. cr: ww - cutWth - config.border[0],
  687. fn: function(){
  688. iE6 && that.IE6();
  689. }
  690. };
  691. switch(type){
  692. case 'left-top':
  693. layerE.css({left: anim.cl, top: anim.ct}).animate(anim.t, rate, anim.fn);
  694. break;
  695. case 'top':
  696. layerE.css({top: anim.ct}).animate(anim.t, rate, anim.fn);
  697. break;
  698. case 'right-top':
  699. layerE.css({left: anim.cr, top: anim.ct}).animate(anim.t, rate, anim.fn);
  700. break;
  701. case 'right-bottom':
  702. layerE.css({left: anim.cr, top: wh}).animate(anim.b, rate, anim.fn);
  703. break;
  704. case 'bottom':
  705. layerE.css({top: wh}).animate(anim.b, rate, anim.fn);
  706. break;
  707. case 'left-bottom':
  708. layerE.css({left: anim.cl, top: wh}).animate(anim.b, rate, anim.fn);
  709. break;
  710. case 'left':
  711. layerE.css({left: -layerE.outerWidth(), marginLeft:0}).animate({left:anim.t.top}, rate, anim.fn);
  712. break;
  713.  
  714. };
  715. };
  716.  
  717. //初始化拖拽元素
  718. layer.setMove = function(){
  719. return that.move();
  720. };
  721.  
  722. //给指定层重置属性
  723. layer.area = function(index, options){
  724. var nowobect = [$('#' dom.lay index), $('#xubox_border' index)],
  725. type = nowobect[0].attr('type'), main = nowobect[0].find('.xubox_main'),
  726. title = nowobect[0].find('.xubox_title');
  727. if(type === that.type[1] || type === that.type[2]){
  728. nowobect[0].css(options);
  729. if(nowobect[1][0]){
  730. nowobect[1].css({
  731. width: options.width - 2*parseInt(nowobect[1].css('left')),
  732. height: options.height - 2*parseInt(nowobect[1].css('top'))
  733. });
  734. }
  735. main.css({height: options.height});
  736. if(type === that.type[2]){
  737. var iframe = nowobect[0].find('iframe');
  738. iframe.css({width: options.width, height: title ? options.height - title.outerHeight() : options.height});
  739. }
  740. if(nowobect[0].css('margin-left') !== '0px') {
  741. options.hasOwnProperty('top') && nowobect[0].css({top: options.top - (nowobect[1][0] && parseInt(nowobect[1].css('top')))});
  742. options.hasOwnProperty('left') && nowobect[0].css({left: options.left nowobect[0].outerWidth()/2 - (nowobect[1][0] && parseInt(nowobect[1].css('left')))})
  743. nowobect[0].css({marginLeft : -nowobect[0].outerWidth()/2});
  744. }
  745. }
  746. };
  747.  
  748. //关闭所有层
  749. layer.closeAll = function(){
  750. var layerObj = $('.' dom.lay);
  751. $.each(layerObj, function(){
  752. var i = $(this).attr('times');
  753. layer.close(i);
  754. });
  755. };
  756.  
  757. //置顶当前窗口
  758. layer.zIndex = that.config.zIndex;
  759. layer.setTop = function(layerNow){
  760. var setZindex = function(){
  761. layer.zIndex ;
  762. layerNow.css('z-index', layer.zIndex 1);
  763. };
  764. layer.zIndex = parseInt(layerNow[0].style.zIndex);
  765. layerNow.on('mousedown', setZindex);
  766. return layer.zIndex;
  767. };
  768. };
  769.  
  770. //主入口
  771. ready.run = function(){
  772. $ = jQuery;
  773. win = $(window);
  774. layer.use('skin/layer.css');
  775. $.layer = function(deliver){
  776. var o = new Class(deliver);
  777. return o.index;
  778. };
  779. };
  780.  
  781. //为支持CMD规范的模块加载器
  782. var require = '../../init/jquery'; //若采用seajs,需正确配置jquery的相对路径。未用可无视此处。
  783. if(window.seajs){
  784. define([require], function(require, exports, module){
  785. ready.run();
  786. exports.layer = [window.layer, window['$'].layer];
  787. });
  788. }else{
  789. ready.run();
  790. }
  791.  
  792. }(window);
  1. 下载源码:点击下载

layer弹出层 layer源码的更多相关文章

  1. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  2. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  3. layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  4. layer弹出层

    最近因为项目要求做了一个layer弹出层demo,先看效果图 好了,现在开始上代码 index.jsp <%@ page language="java" import=&qu ...

  5. Layer弹出层销毁问题

    Layer弹出层销毁问题 最近开发时有个问题记录一下 点击按钮显示相应的图表信息,当时自己点感觉没问题,谁知到测试手里多次点击就会有后续打开的窗口无法渲染问题,看了半天才发现是调用layer.clos ...

  6. layer 弹出层 回调函数调用 弹出层页面 函数

    1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...

  7. layer 弹出层 不居中

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  8. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  9. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

随机推荐

  1. JavaScript自运行函数(function(){})()的理解

    今天打开JQuery源文件(jquery-1.8.3), 看到JQuery的初始化过程是这样的 (function( window, undefined ) { // .... })( window ...

  2. c# 集合

    集合适用于元素个数是动态的情况. 当使用默认的构造函数创建一个空列表后(未指定容量),集合的容量为0:当往集合内添加元素,容量将变为4*2^n(n为0或正整数).当指定集合的大小为size后,容量将变 ...

  3. HTML5图形图像处理技术研究

    摘要:图形图像处理平台大部分是传统的C/S架构的桌面应用程序,维护困难,共享性差,而B/S架构的Web程序具有易维护.易共享的优点.本文研究了基于HTML5的Web图形图像处理技术,用HTML5实现了 ...

  4. Leetcode 39. Combination Sum

    Given a set of candidate numbers (C) (without duplicates) and a target number (T), find all unique c ...

  5. CIDR详解和ip最长地址前缀匹配

    1.CIDR是什么 无类域间路由(CIDR)编址方案 摒弃传统的基于类的地址分配方式,允许使用任意长度的地址前缀,有效提高地址空间的利用率. 就是一个ip加一个网络掩码,不过这个掩码不是之前只有3个值 ...

  6. debian下NTFS分区无法访问解决

    打开终端 # ntfsfix /dev/sda3 (/dev/sda3是上图中划红框的部分,根据实际情况替换) 如果这个磁盘可以正常挂载,说明问题已经解决了,其他磁盘在重启后也可以挂载了 如果不想重启 ...

  7. 苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑

    问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...

  8. 深入理解javascript原型和闭包(9)——简述【执行上下文】下

    继续上一篇文章(http://www.cnblogs.com/wangfupeng1988/p/3986420.html)的内容. 上一篇我们讲到在全局环境下的代码段中,执行上下文环境中有如何数据: ...

  9. git版本控制管理实践-2

    给网站设置一个 "根目录下的logo.ico", 还是很有必要的,比如赶集网,这时在 "历史"搜索时, 就可以根据 网站的 logo.ico 很轻松的就能够找到 ...

  10. multiple merge document

    http://www.aspose.com/docs/display/wordsnet/How+to++produce+multiple+documents+during+mail+merge