layer.js 6.7 KB

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