layer.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. /*!
  2. @Name:layer mobile v2.0 弹层组件移动版
  3. @Author:贤心
  4. @License:MIT
  5. */
  6. ;!function(win){
  7. "use strict";
  8. var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function(s){
  9. return doc[query](s);
  10. };
  11. //默认配置
  12. var config = {
  13. type: 0
  14. ,shade: true
  15. ,shadeClose: true
  16. ,fixed: true
  17. ,anim: 'scale' //默认动画类型
  18. };
  19. var ready = {
  20. extend: function(obj){
  21. var newobj = JSON.parse(JSON.stringify(config));
  22. for(var i in obj){
  23. newobj[i] = obj[i];
  24. }
  25. return newobj;
  26. },
  27. timer: {}, end: {}
  28. };
  29. //点触事件
  30. ready.touch = function(elem, fn){
  31. elem.addEventListener('click', function(e){
  32. fn.call(this, e);
  33. }, false);
  34. };
  35. var index = 0, classs = ['layui-m-layer'], Layer = function(options){
  36. var that = this;
  37. that.config = ready.extend(options);
  38. that.view();
  39. };
  40. Layer.prototype.view = function(){
  41. var that = this, config = that.config, layerbox = doc.createElement('div');
  42. that.id = layerbox.id = classs[0] + index;
  43. layerbox.setAttribute('class', classs[0] + ' ' + classs[0]+(config.type || 0));
  44. layerbox.setAttribute('index', index);
  45. //标题区域
  46. var title = (function(){
  47. var titype = typeof config.title === 'object';
  48. return config.title
  49. ? '<h3 style="'+ (titype ? config.title[1] : '') +'">'+ (titype ? config.title[0] : config.title) +'</h3>'
  50. : '';
  51. }());
  52. //按钮区域
  53. var button = (function(){
  54. typeof config.btn === 'string' && (config.btn = [config.btn]);
  55. var btns = (config.btn || []).length, btndom;
  56. if(btns === 0 || !config.btn){
  57. return '';
  58. }
  59. btndom = '<span yes type="1">'+ config.btn[0] +'</span>'
  60. if(btns === 2){
  61. btndom = '<span no type="0">'+ config.btn[1] +'</span>' + btndom;
  62. }
  63. return '<div class="layui-m-layerbtn">'+ btndom + '</div>';
  64. }());
  65. if(!config.fixed){
  66. config.top = config.hasOwnProperty('top') ? config.top : 100;
  67. config.style = config.style || '';
  68. config.style += ' top:'+ ( doc.body.scrollTop + config.top) + 'px';
  69. }
  70. if(config.type === 2){
  71. config.content = '<i></i><i class="layui-m-layerload"></i><i></i><p>'+ (config.content||'') +'</p>';
  72. }
  73. if(config.skin) config.anim = 'up';
  74. if(config.skin === 'msg') config.shade = false;
  75. layerbox.innerHTML = (config.shade ? '<div '+ (typeof config.shade === 'string' ? 'style="'+ config.shade +'"' : '') +' class="layui-m-layershade"></div>' : '')
  76. +'<div class="layui-m-layermain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
  77. +'<div class="layui-m-layersection">'
  78. +'<div class="layui-m-layerchild '+ (config.skin ? 'layui-m-layer-' + config.skin + ' ' : '') + (config.className ? config.className : '') + ' ' + (config.anim ? 'layui-m-anim-' + config.anim : '') +'" ' + ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
  79. + title
  80. +'<div class="layui-m-layercont">'+ config.content +'</div>'
  81. + button
  82. +'</div>'
  83. +'</div>'
  84. +'</div>';
  85. if(!config.type || config.type === 2){
  86. var dialogs = doc[claname](classs[0] + config.type), dialen = dialogs.length;
  87. if(dialen >= 1){
  88. layer.close(dialogs[0].getAttribute('index'))
  89. }
  90. }
  91. document.body.appendChild(layerbox);
  92. var elem = that.elem = S('#'+that.id)[0];
  93. config.success && config.success(elem);
  94. that.index = index++;
  95. that.action(config, elem);
  96. };
  97. Layer.prototype.action = function(config, elem){
  98. var that = this;
  99. //自动关闭
  100. if(config.time){
  101. ready.timer[that.index] = setTimeout(function(){
  102. layer.close(that.index);
  103. }, config.time*1000);
  104. }
  105. //确认取消
  106. var btn = function(){
  107. var type = this.getAttribute('type');
  108. if(type == 0){
  109. config.no && config.no();
  110. layer.close(that.index);
  111. } else {
  112. config.yes ? config.yes(that.index) : layer.close(that.index);
  113. }
  114. };
  115. if(config.btn){
  116. var btns = elem[claname]('layui-m-layerbtn')[0].children, btnlen = btns.length;
  117. for(var ii = 0; ii < btnlen; ii++){
  118. ready.touch(btns[ii], btn);
  119. }
  120. }
  121. //点遮罩关闭
  122. if(config.shade && config.shadeClose){
  123. var shade = elem[claname]('layui-m-layershade')[0];
  124. ready.touch(shade, function(){
  125. layer.close(that.index, config.end);
  126. });
  127. }
  128. config.end && (ready.end[that.index] = config.end);
  129. };
  130. win.layer = {
  131. v: '2.0',
  132. index: index,
  133. //核心方法
  134. open: function(options){
  135. var o = new Layer(options || {});
  136. return o.index;
  137. },
  138. close: function(index){
  139. var ibox = S('#'+classs[0]+index)[0];
  140. if(!ibox) return;
  141. ibox.innerHTML = '';
  142. doc.body.removeChild(ibox);
  143. clearTimeout(ready.timer[index]);
  144. delete ready.timer[index];
  145. typeof ready.end[index] === 'function' && ready.end[index]();
  146. delete ready.end[index];
  147. },
  148. //关闭所有layer层
  149. closeAll: function(){
  150. var boxs = doc[claname](classs[0]);
  151. for(var i = 0, len = boxs.length; i < len; i++){
  152. layer.close((boxs[0].getAttribute('index')|0));
  153. }
  154. }
  155. };
  156. 'function' == typeof define ? define(function() {
  157. return layer;
  158. }) : function(){
  159. var js = document.scripts, script = js[js.length - 1], jsPath = script.src;
  160. var path = jsPath.substring(0, jsPath.lastIndexOf("/") + 1);
  161. //如果合并方式,则需要单独引入layer.css
  162. if(script.getAttribute('merge')) return;
  163. document.head.appendChild(function(){
  164. var link = doc.createElement('link');
  165. link.href = path + 'need/layer.css?2.0';
  166. link.type = 'text/css';
  167. link.rel = 'styleSheet'
  168. link.id = 'layermcss';
  169. return link;
  170. }());
  171. }();
  172. }(window);