layer.js 42 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429
  1. /*!
  2. * layer - 通用 Web 弹出层组件
  3. * MIT Licensed
  4. */
  5. ;!function(window, undefined){
  6. "use strict";
  7. var isLayui = window.layui && layui.define, $, win, ready = {
  8. getPath: function(){
  9. var jsPath = document.currentScript ? document.currentScript.src : function(){
  10. var js = document.scripts
  11. ,last = js.length - 1
  12. ,src;
  13. for(var i = last; i > 0; i--){
  14. if(js[i].readyState === 'interactive'){
  15. src = js[i].src;
  16. break;
  17. }
  18. }
  19. return src || js[last].src;
  20. }()
  21. ,GLOBAL = window.LAYUI_GLOBAL || {};
  22. return GLOBAL.layer_dir || jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
  23. }(),
  24. config: {}, end: {}, minIndex: 0, minLeft: [],
  25. btn: ['确定', '取消'],
  26. //五种原始层模式
  27. type: ['dialog', 'page', 'iframe', 'loading', 'tips'],
  28. //获取节点的style属性值
  29. getStyle: function(node, name){
  30. var style = node.currentStyle ? node.currentStyle : window.getComputedStyle(node, null);
  31. return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
  32. },
  33. //载入 CSS 依赖
  34. link: function(href, fn, cssname){
  35. //未设置路径,则不主动加载css
  36. if(!layer.path) return;
  37. var head = document.getElementsByTagName("head")[0]
  38. ,link = document.createElement('link');
  39. if(typeof fn === 'string') cssname = fn;
  40. var app = (cssname || href).replace(/\.|\//g, '');
  41. var id = 'layuicss-'+ app
  42. ,STAUTS_NAME = 'creating'
  43. ,timeout = 0;
  44. link.rel = 'stylesheet';
  45. link.href = layer.path + href;
  46. link.id = id;
  47. if(!document.getElementById(id)){
  48. head.appendChild(link);
  49. }
  50. if(typeof fn !== 'function') return;
  51. //轮询 css 是否加载完毕
  52. (function poll(status) {
  53. var delay = 100
  54. ,getLinkElem = document.getElementById(id); //获取动态插入的 link 元素
  55. //如果轮询超过指定秒数,则视为请求文件失败或 css 文件不符合规范
  56. if(++timeout > 10 * 1000 / delay){
  57. return window.console && console.error(app +'.css: Invalid');
  58. };
  59. //css 加载就绪
  60. if(parseInt(ready.getStyle(getLinkElem, 'width')) === 1989){
  61. //如果参数来自于初始轮询(即未加载就绪时的),则移除 link 标签状态
  62. if(status === STAUTS_NAME) getLinkElem.removeAttribute('lay-status');
  63. //如果 link 标签的状态仍为「创建中」,则继续进入轮询,直到状态改变,则执行回调
  64. getLinkElem.getAttribute('lay-status') === STAUTS_NAME ? setTimeout(poll, delay) : fn();
  65. } else {
  66. getLinkElem.setAttribute('lay-status', STAUTS_NAME);
  67. setTimeout(function(){
  68. poll(STAUTS_NAME);
  69. }, delay);
  70. }
  71. //parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 1000);
  72. }());
  73. }
  74. };
  75. //默认内置方法。
  76. var layer = {
  77. v: '3.5.2',
  78. ie: function(){ //ie版本
  79. var agent = navigator.userAgent.toLowerCase();
  80. return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
  81. (agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于ie11并没有msie的标识
  82. ) : false;
  83. }(),
  84. index: (window.layer && window.layer.v) ? 100000 : 0,
  85. path: ready.getPath,
  86. config: function(options, fn){
  87. options = options || {};
  88. cache = layer.cache = ready.config = $.extend({}, ready.config, options);
  89. layer.path = ready.config.path || layer.path;
  90. typeof options.extend === 'string' && (options.extend = [options.extend]);
  91. //如果设置了路径,则加载样式
  92. if(ready.config.path) layer.ready();
  93. if(!options.extend) return this;
  94. isLayui
  95. ? layui.addcss('modules/layer/' + options.extend)
  96. : ready.link('theme/' + options.extend);
  97. return this;
  98. },
  99. //主体CSS等待事件
  100. ready: function(callback){
  101. var cssname = 'layer', ver = ''
  102. ,path = (isLayui ? 'modules/layer/' : 'theme/') + 'default/layer.css?v='+ layer.v + ver;
  103. isLayui ? layui.addcss(path, callback, cssname) : ready.link(path, callback, cssname);
  104. return this;
  105. },
  106. //各种快捷引用
  107. alert: function(content, options, yes){
  108. var type = typeof options === 'function';
  109. if(type) yes = options;
  110. return layer.open($.extend({
  111. content: content,
  112. yes: yes
  113. }, type ? {} : options));
  114. },
  115. confirm: function(content, options, yes, cancel){
  116. var type = typeof options === 'function';
  117. if(type){
  118. cancel = yes;
  119. yes = options;
  120. }
  121. return layer.open($.extend({
  122. content: content,
  123. btn: ready.btn,
  124. yes: yes,
  125. btn2: cancel
  126. }, type ? {} : options));
  127. },
  128. msg: function(content, options, end){ //最常用提示层
  129. var type = typeof options === 'function', rskin = ready.config.skin;
  130. var skin = (rskin ? rskin + ' ' + rskin + '-msg' : '')||'layui-layer-msg';
  131. var anim = doms.anim.length - 1;
  132. if(type) end = options;
  133. return layer.open($.extend({
  134. content: content,
  135. time: 3000,
  136. shade: false,
  137. skin: skin,
  138. title: false,
  139. closeBtn: false,
  140. btn: false,
  141. resize: false,
  142. end: end
  143. }, (type && !ready.config.skin) ? {
  144. skin: skin + ' layui-layer-hui',
  145. anim: anim
  146. } : function(){
  147. options = options || {};
  148. if(options.icon === -1 || options.icon === undefined){
  149. options.skin = skin + ' ' + (options.skin||'layui-layer-hui');
  150. }
  151. return options;
  152. }()));
  153. },
  154. load: function(icon, options){
  155. return layer.open($.extend({
  156. type: 3,
  157. icon: icon || 0,
  158. resize: false,
  159. shade: 0.01
  160. }, options));
  161. },
  162. tips: function(content, follow, options){
  163. return layer.open($.extend({
  164. type: 4,
  165. content: [content, follow],
  166. closeBtn: false,
  167. time: 3000,
  168. shade: false,
  169. resize: false,
  170. fixed: false,
  171. maxWidth: 260
  172. }, options));
  173. }
  174. };
  175. var Class = function(setings){
  176. var that = this, creat = function(){
  177. that.creat();
  178. };
  179. that.index = ++layer.index;
  180. // that.config.maxWidth = $(win).width() - 15*2; //初始最大宽度:当前屏幕宽,左右留 15px 边距
  181. that.config = $.extend({}, that.config, ready.config, setings);
  182. document.body ? creat() : setTimeout(function(){
  183. creat();
  184. }, 30);
  185. };
  186. Class.pt = Class.prototype;
  187. //缓存常用字符
  188. var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close'];
  189. doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06'];
  190. doms.SHADE = 'layui-layer-shade';
  191. doms.MOVE = 'layui-layer-move';
  192. //默认配置
  193. Class.pt.config = {
  194. type: 0,
  195. shade: 0.3,
  196. fixed: true,
  197. move: doms[1],
  198. title: '信息',
  199. offset: 'auto',
  200. area: 'auto',
  201. closeBtn: 1,
  202. time: 0, //0表示不自动关闭
  203. zIndex: 19891014,
  204. maxWidth: 360,
  205. anim: 0,
  206. isOutAnim: true, //退出动画
  207. minStack: true, //最小化堆叠
  208. focusBtn: 0,
  209. icon: -1,
  210. moveType: 1,
  211. resize: true,
  212. scrollbar: true, //是否允许浏览器滚动条
  213. tips: 2
  214. };
  215. //容器
  216. Class.pt.vessel = function(conType, callback){
  217. var that = this, times = that.index, config = that.config;
  218. var zIndex = config.zIndex + times, titype = typeof config.title === 'object';
  219. var ismax = config.maxmin && (config.type === 1 || config.type === 2);
  220. var titleHTML = (config.title ? '<div class="layui-layer-title" style="'+ (titype ? config.title[1] : '') +'">'
  221. + (titype ? config.title[0] : config.title)
  222. + '</div>' : '');
  223. config.zIndex = zIndex;
  224. callback([
  225. //遮罩
  226. config.shade ? ('<div class="'+ doms.SHADE +'" id="'+ doms.SHADE + times +'" times="'+ times +'" style="'+ ('z-index:'+ (zIndex-1) +'; ') +'"></div>') : '',
  227. //主体
  228. '<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + ';position:'+ (config.fixed ? 'fixed;' : 'absolute;') +'">'
  229. + (conType && config.type != 2 ? '' : titleHTML)
  230. + '<div id="'+ (config.id||'') +'" class="layui-layer-content'+ ((config.type == 0 && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
  231. + (config.type == 0 && config.icon !== -1 ? '<i class="layui-layer-ico layui-layer-ico'+ config.icon +'"></i>' : '')
  232. + (config.type == 1 && conType ? '' : (config.content||''))
  233. + '</div>'
  234. + '<span class="layui-layer-setwin">'+ function(){
  235. var closebtn = ismax ? '<a class="layui-layer-min" href="javascript:;"><cite></cite></a><a class="layui-layer-ico layui-layer-max" href="javascript:;"></a>' : '';
  236. config.closeBtn && (closebtn += '<a class="layui-layer-ico '+ doms[7] +' '+ doms[7] + (config.title ? config.closeBtn : (config.type == 4 ? '1' : '2')) +'" href="javascript:;"></a>');
  237. return closebtn;
  238. }() + '</span>'
  239. + (config.btn ? function(){
  240. var button = '';
  241. typeof config.btn === 'string' && (config.btn = [config.btn]);
  242. for(var i = 0, len = config.btn.length; i < len; i++){
  243. button += '<a class="'+ doms[6] +''+ i +'" href="javascript:">'+ config.btn[i] +'</a>'
  244. }
  245. return '<div class="'+ doms[6] +' layui-layer-btn-'+ (config.btnAlign||'') +'">'+ button +'</div>'
  246. }() : '')
  247. + (config.resize ? '<span class="layui-layer-resize"></span>' : '')
  248. + '</div>'
  249. ], titleHTML, $('<div class="'+ doms.MOVE +'" id="'+ doms.MOVE +'"></div>'));
  250. return that;
  251. };
  252. //创建骨架
  253. Class.pt.creat = function(){
  254. var that = this
  255. ,config = that.config
  256. ,times = that.index, nodeIndex
  257. ,content = config.content
  258. ,conType = typeof content === 'object'
  259. ,body = $('body');
  260. if(config.id && $('#'+config.id)[0]) return;
  261. if(typeof config.area === 'string'){
  262. config.area = config.area === 'auto' ? ['', ''] : [config.area, ''];
  263. }
  264. //anim兼容旧版shift
  265. if(config.shift){
  266. config.anim = config.shift;
  267. }
  268. if(layer.ie == 6){
  269. config.fixed = false;
  270. }
  271. switch(config.type){
  272. case 0:
  273. config.btn = ('btn' in config) ? config.btn : ready.btn[0];
  274. layer.closeAll('dialog');
  275. break;
  276. case 2:
  277. var content = config.content = conType ? config.content : [config.content||'', 'auto'];
  278. config.content = '<iframe scrolling="'+ (config.content[1]||'auto') +'" allowtransparency="true" id="'+ doms[4] +''+ times +'" name="'+ doms[4] +''+ times +'" onload="this.className=\'\';" class="layui-layer-load" frameborder="0" src="' + config.content[0] + '"></iframe>';
  279. break;
  280. case 3:
  281. delete config.title;
  282. delete config.closeBtn;
  283. config.icon === -1 && (config.icon === 0);
  284. layer.closeAll('loading');
  285. break;
  286. case 4:
  287. conType || (config.content = [config.content, 'body']);
  288. config.follow = config.content[1];
  289. config.content = config.content[0] + '<i class="layui-layer-TipsG"></i>';
  290. delete config.title;
  291. config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true];
  292. config.tipsMore || layer.closeAll('tips');
  293. break;
  294. }
  295. //建立容器
  296. that.vessel(conType, function(html, titleHTML, moveElem){
  297. body.append(html[0]);
  298. conType ? function(){
  299. (config.type == 2 || config.type == 4) ? function(){
  300. $('body').append(html[1]);
  301. }() : function(){
  302. if(!content.parents('.'+doms[0])[0]){
  303. content.data('display', content.css('display')).show().addClass('layui-layer-wrap').wrap(html[1]);
  304. $('#'+ doms[0] + times).find('.'+doms[5]).before(titleHTML);
  305. }
  306. }();
  307. }() : body.append(html[1]);
  308. $('#'+ doms.MOVE)[0] || body.append(ready.moveElem = moveElem);
  309. that.layero = $('#'+ doms[0] + times);
  310. that.shadeo = $('#'+ doms.SHADE + times);
  311. config.scrollbar || doms.html.css('overflow', 'hidden').attr('layer-full', times);
  312. }).auto(times);
  313. //遮罩
  314. that.shadeo.css({
  315. 'background-color': config.shade[1] || '#000'
  316. ,'opacity': config.shade[0] || config.shade
  317. });
  318. config.type == 2 && layer.ie == 6 && that.layero.find('iframe').attr('src', content[0]);
  319. //坐标自适应浏览器窗口尺寸
  320. config.type == 4 ? that.tips() : function(){
  321. that.offset()
  322. //首次弹出时,若 css 尚未加载,则等待 css 加载完毕后,重新设定尺寸
  323. parseInt(ready.getStyle(document.getElementById(doms.MOVE), 'z-index')) || function(){
  324. that.layero.css('visibility', 'hidden');
  325. layer.ready(function(){
  326. that.offset();
  327. that.layero.css('visibility', 'visible');
  328. });
  329. }();
  330. }();
  331. //如果是固定定位
  332. if(config.fixed){
  333. win.on('resize', function(){
  334. that.offset();
  335. (/^\d+%$/.test(config.area[0]) || /^\d+%$/.test(config.area[1])) && that.auto(times);
  336. config.type == 4 && that.tips();
  337. });
  338. }
  339. config.time <= 0 || setTimeout(function(){
  340. layer.close(that.index);
  341. }, config.time);
  342. that.move().callback();
  343. //为兼容jQuery3.0的css动画影响元素尺寸计算
  344. if(doms.anim[config.anim]){
  345. var animClass = 'layer-anim '+ doms.anim[config.anim];
  346. that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  347. $(this).removeClass(animClass);
  348. });
  349. };
  350. //记录关闭动画
  351. if(config.isOutAnim){
  352. that.layero.data('isOutAnim', true);
  353. }
  354. };
  355. //自适应
  356. Class.pt.auto = function(index){
  357. var that = this, config = that.config, layero = $('#'+ doms[0] + index);
  358. if(config.area[0] === '' && config.maxWidth > 0){
  359. //为了修复IE7下一个让人难以理解的bug
  360. if(layer.ie && layer.ie < 8 && config.btn){
  361. layero.width(layero.innerWidth());
  362. }
  363. layero.outerWidth() > config.maxWidth && layero.width(config.maxWidth);
  364. }
  365. var area = [layero.innerWidth(), layero.innerHeight()]
  366. ,titHeight = layero.find(doms[1]).outerHeight() || 0
  367. ,btnHeight = layero.find('.'+doms[6]).outerHeight() || 0
  368. ,setHeight = function(elem){
  369. elem = layero.find(elem);
  370. elem.height(area[1] - titHeight - btnHeight - 2*(parseFloat(elem.css('padding-top'))|0));
  371. };
  372. switch(config.type){
  373. case 2:
  374. setHeight('iframe');
  375. break;
  376. default:
  377. if(config.area[1] === ''){
  378. if(config.maxHeight > 0 && layero.outerHeight() > config.maxHeight){
  379. area[1] = config.maxHeight;
  380. setHeight('.'+doms[5]);
  381. } else if(config.fixed && area[1] >= win.height()){
  382. area[1] = win.height();
  383. setHeight('.'+doms[5]);
  384. }
  385. } else {
  386. setHeight('.'+doms[5]);
  387. }
  388. break;
  389. };
  390. return that;
  391. };
  392. //计算坐标
  393. Class.pt.offset = function(){
  394. var that = this, config = that.config, layero = that.layero;
  395. var area = [layero.outerWidth(), layero.outerHeight()];
  396. var type = typeof config.offset === 'object';
  397. that.offsetTop = (win.height() - area[1])/2;
  398. that.offsetLeft = (win.width() - area[0])/2;
  399. if(type){
  400. that.offsetTop = config.offset[0];
  401. that.offsetLeft = config.offset[1]||that.offsetLeft;
  402. } else if(config.offset !== 'auto'){
  403. if(config.offset === 't'){ //上
  404. that.offsetTop = 0;
  405. } else if(config.offset === 'r'){ //右
  406. that.offsetLeft = win.width() - area[0];
  407. } else if(config.offset === 'b'){ //下
  408. that.offsetTop = win.height() - area[1];
  409. } else if(config.offset === 'l'){ //左
  410. that.offsetLeft = 0;
  411. } else if(config.offset === 'lt'){ //左上角
  412. that.offsetTop = 0;
  413. that.offsetLeft = 0;
  414. } else if(config.offset === 'lb'){ //左下角
  415. that.offsetTop = win.height() - area[1];
  416. that.offsetLeft = 0;
  417. } else if(config.offset === 'rt'){ //右上角
  418. that.offsetTop = 0;
  419. that.offsetLeft = win.width() - area[0];
  420. } else if(config.offset === 'rb'){ //右下角
  421. that.offsetTop = win.height() - area[1];
  422. that.offsetLeft = win.width() - area[0];
  423. } else {
  424. that.offsetTop = config.offset;
  425. }
  426. }
  427. if(!config.fixed){
  428. that.offsetTop = /%$/.test(that.offsetTop) ?
  429. win.height()*parseFloat(that.offsetTop)/100
  430. : parseFloat(that.offsetTop);
  431. that.offsetLeft = /%$/.test(that.offsetLeft) ?
  432. win.width()*parseFloat(that.offsetLeft)/100
  433. : parseFloat(that.offsetLeft);
  434. that.offsetTop += win.scrollTop();
  435. that.offsetLeft += win.scrollLeft();
  436. }
  437. if(layero.attr('minLeft')){
  438. that.offsetTop = win.height() - (layero.find(doms[1]).outerHeight() || 0);
  439. that.offsetLeft = layero.css('left');
  440. }
  441. layero.css({top: that.offsetTop, left: that.offsetLeft});
  442. };
  443. //Tips
  444. Class.pt.tips = function(){
  445. var that = this, config = that.config, layero = that.layero;
  446. var layArea = [layero.outerWidth(), layero.outerHeight()], follow = $(config.follow);
  447. if(!follow[0]) follow = $('body');
  448. var goal = {
  449. width: follow.outerWidth(),
  450. height: follow.outerHeight(),
  451. top: follow.offset().top,
  452. left: follow.offset().left
  453. }, tipsG = layero.find('.layui-layer-TipsG');
  454. var guide = config.tips[0];
  455. config.tips[1] || tipsG.remove();
  456. goal.autoLeft = function(){
  457. if(goal.left + layArea[0] - win.width() > 0){
  458. goal.tipLeft = goal.left + goal.width - layArea[0];
  459. tipsG.css({right: 12, left: 'auto'});
  460. } else {
  461. goal.tipLeft = goal.left;
  462. };
  463. };
  464. //辨别tips的方位
  465. goal.where = [function(){ //上
  466. goal.autoLeft();
  467. goal.tipTop = goal.top - layArea[1] - 10;
  468. tipsG.removeClass('layui-layer-TipsB').addClass('layui-layer-TipsT').css('border-right-color', config.tips[1]);
  469. }, function(){ //右
  470. goal.tipLeft = goal.left + goal.width + 10;
  471. goal.tipTop = goal.top;
  472. tipsG.removeClass('layui-layer-TipsL').addClass('layui-layer-TipsR').css('border-bottom-color', config.tips[1]);
  473. }, function(){ //下
  474. goal.autoLeft();
  475. goal.tipTop = goal.top + goal.height + 10;
  476. tipsG.removeClass('layui-layer-TipsT').addClass('layui-layer-TipsB').css('border-right-color', config.tips[1]);
  477. }, function(){ //左
  478. goal.tipLeft = goal.left - layArea[0] - 10;
  479. goal.tipTop = goal.top;
  480. tipsG.removeClass('layui-layer-TipsR').addClass('layui-layer-TipsL').css('border-bottom-color', config.tips[1]);
  481. }];
  482. goal.where[guide-1]();
  483. /* 8*2为小三角形占据的空间 */
  484. if(guide === 1){
  485. goal.top - (win.scrollTop() + layArea[1] + 8*2) < 0 && goal.where[2]();
  486. } else if(guide === 2){
  487. win.width() - (goal.left + goal.width + layArea[0] + 8*2) > 0 || goal.where[3]()
  488. } else if(guide === 3){
  489. (goal.top - win.scrollTop() + goal.height + layArea[1] + 8*2) - win.height() > 0 && goal.where[0]();
  490. } else if(guide === 4){
  491. layArea[0] + 8*2 - goal.left > 0 && goal.where[1]()
  492. }
  493. layero.find('.'+doms[5]).css({
  494. 'background-color': config.tips[1],
  495. 'padding-right': (config.closeBtn ? '30px' : '')
  496. });
  497. layero.css({
  498. left: goal.tipLeft - (config.fixed ? win.scrollLeft() : 0),
  499. top: goal.tipTop - (config.fixed ? win.scrollTop() : 0)
  500. });
  501. }
  502. //拖拽层
  503. Class.pt.move = function(){
  504. var that = this
  505. ,config = that.config
  506. ,_DOC = $(document)
  507. ,layero = that.layero
  508. ,moveElem = layero.find(config.move)
  509. ,resizeElem = layero.find('.layui-layer-resize')
  510. ,dict = {};
  511. if(config.move){
  512. moveElem.css('cursor', 'move');
  513. }
  514. moveElem.on('mousedown', function(e){
  515. e.preventDefault();
  516. if(config.move){
  517. dict.moveStart = true;
  518. dict.offset = [
  519. e.clientX - parseFloat(layero.css('left'))
  520. ,e.clientY - parseFloat(layero.css('top'))
  521. ];
  522. ready.moveElem.css('cursor', 'move').show();
  523. }
  524. });
  525. resizeElem.on('mousedown', function(e){
  526. e.preventDefault();
  527. dict.resizeStart = true;
  528. dict.offset = [e.clientX, e.clientY];
  529. dict.area = [
  530. layero.outerWidth()
  531. ,layero.outerHeight()
  532. ];
  533. ready.moveElem.css('cursor', 'se-resize').show();
  534. });
  535. _DOC.on('mousemove', function(e){
  536. //拖拽移动
  537. if(dict.moveStart){
  538. var X = e.clientX - dict.offset[0]
  539. ,Y = e.clientY - dict.offset[1]
  540. ,fixed = layero.css('position') === 'fixed';
  541. e.preventDefault();
  542. dict.stX = fixed ? 0 : win.scrollLeft();
  543. dict.stY = fixed ? 0 : win.scrollTop();
  544. //控制元素不被拖出窗口外
  545. if(!config.moveOut){
  546. var setRig = win.width() - layero.outerWidth() + dict.stX
  547. ,setBot = win.height() - layero.outerHeight() + dict.stY;
  548. X < dict.stX && (X = dict.stX);
  549. X > setRig && (X = setRig);
  550. Y < dict.stY && (Y = dict.stY);
  551. Y > setBot && (Y = setBot);
  552. }
  553. layero.css({
  554. left: X
  555. ,top: Y
  556. });
  557. }
  558. //Resize
  559. if(config.resize && dict.resizeStart){
  560. var X = e.clientX - dict.offset[0]
  561. ,Y = e.clientY - dict.offset[1];
  562. e.preventDefault();
  563. layer.style(that.index, {
  564. width: dict.area[0] + X
  565. ,height: dict.area[1] + Y
  566. })
  567. dict.isResize = true;
  568. config.resizing && config.resizing(layero);
  569. }
  570. }).on('mouseup', function(e){
  571. if(dict.moveStart){
  572. delete dict.moveStart;
  573. ready.moveElem.hide();
  574. config.moveEnd && config.moveEnd(layero);
  575. }
  576. if(dict.resizeStart){
  577. delete dict.resizeStart;
  578. ready.moveElem.hide();
  579. }
  580. });
  581. return that;
  582. };
  583. Class.pt.callback = function(){
  584. var that = this, layero = that.layero, config = that.config;
  585. that.openLayer();
  586. if(config.success){
  587. if(config.type == 2){
  588. layero.find('iframe').on('load', function(){
  589. config.success(layero, that.index);
  590. });
  591. } else {
  592. config.success(layero, that.index);
  593. }
  594. }
  595. layer.ie == 6 && that.IE6(layero);
  596. //按钮
  597. layero.find('.'+ doms[6]).children('a').on('click', function(){
  598. var index = $(this).index();
  599. if(index === 0){
  600. if(config.yes){
  601. config.yes(that.index, layero)
  602. } else if(config['btn1']){
  603. config['btn1'](that.index, layero)
  604. } else {
  605. layer.close(that.index);
  606. }
  607. } else {
  608. var close = config['btn'+(index+1)] && config['btn'+(index+1)](that.index, layero);
  609. close === false || layer.close(that.index);
  610. }
  611. });
  612. //按钮焦点
  613. if (typeof config.focusBtn === 'number') {
  614. layero.find('.' + doms[6]).children('a').each(function () {
  615. var currentBtn = $(this);
  616. var confirmBtn = $("<button type='button' />").addClass("layui-layer-confirm");
  617. currentBtn.css("position", "relative").attr("tabindex", -1).append(confirmBtn);
  618. confirmBtn.click(function () {
  619. currentBtn.trigger("click");
  620. return false;
  621. })
  622. });
  623. var focusBtn = layero.find('.' + doms[6]).find('button.layui-layer-confirm').eq(config.focusBtn);
  624. if (focusBtn.length > 0) {
  625. focusBtn.focus();
  626. }
  627. }
  628. //取消
  629. function cancel() {
  630. var close = config.cancel && config.cancel(that.index, layero);
  631. close === false || layer.close(that.index);
  632. }
  633. //右上角关闭回调
  634. layero.find('.'+ doms[7]).on('click', cancel);
  635. //点遮罩关闭
  636. if(config.shadeClose){
  637. that.shadeo.on('click', function(){
  638. layer.close(that.index);
  639. });
  640. }
  641. //最小化
  642. layero.find('.layui-layer-min').on('click', function(){
  643. var min = config.min && config.min(layero, that.index);
  644. min === false || layer.min(that.index, config);
  645. });
  646. //全屏/还原
  647. layero.find('.layui-layer-max').on('click', function(){
  648. if($(this).hasClass('layui-layer-maxmin')){
  649. layer.restore(that.index);
  650. config.restore && config.restore(layero, that.index);
  651. } else {
  652. layer.full(that.index, config);
  653. setTimeout(function(){
  654. config.full && config.full(layero, that.index);
  655. }, 100);
  656. }
  657. });
  658. config.end && (ready.end[that.index] = config.end);
  659. };
  660. //for ie6 恢复select
  661. ready.reselect = function(){
  662. $.each($('select'), function(index , value){
  663. var sthis = $(this);
  664. if(!sthis.parents('.'+doms[0])[0]){
  665. (sthis.attr('layer') == 1 && $('.'+doms[0]).length < 1) && sthis.removeAttr('layer').show();
  666. }
  667. sthis = null;
  668. });
  669. };
  670. Class.pt.IE6 = function(layero){
  671. //隐藏select
  672. $('select').each(function(index , value){
  673. var sthis = $(this);
  674. if(!sthis.parents('.'+doms[0])[0]){
  675. sthis.css('display') === 'none' || sthis.attr({'layer' : '1'}).hide();
  676. }
  677. sthis = null;
  678. });
  679. };
  680. //需依赖原型的对外方法
  681. Class.pt.openLayer = function(){
  682. var that = this;
  683. //置顶当前窗口
  684. layer.zIndex = that.config.zIndex;
  685. layer.setTop = function(layero){
  686. var setZindex = function(){
  687. layer.zIndex++;
  688. layero.css('z-index', layer.zIndex + 1);
  689. };
  690. layer.zIndex = parseInt(layero[0].style.zIndex);
  691. layero.on('mousedown', setZindex);
  692. return layer.zIndex;
  693. };
  694. };
  695. //记录宽高坐标,用于还原
  696. ready.record = function(layero){
  697. var area = [
  698. layero.width(),
  699. layero.height(),
  700. layero.position().top,
  701. layero.position().left + parseFloat(layero.css('margin-left'))
  702. ];
  703. layero.find('.layui-layer-max').addClass('layui-layer-maxmin');
  704. layero.attr({area: area});
  705. };
  706. ready.rescollbar = function(index){
  707. if(doms.html.attr('layer-full') == index){
  708. if(doms.html[0].style.removeProperty){
  709. doms.html[0].style.removeProperty('overflow');
  710. } else {
  711. doms.html[0].style.removeAttribute('overflow');
  712. }
  713. doms.html.removeAttr('layer-full');
  714. }
  715. };
  716. /** 内置成员 */
  717. window.layer = layer;
  718. //获取子iframe的DOM
  719. layer.getChildFrame = function(selector, index){
  720. index = index || $('.'+doms[4]).attr('times');
  721. return $('#'+ doms[0] + index).find('iframe').contents().find(selector);
  722. };
  723. //得到当前iframe层的索引,子iframe时使用
  724. layer.getFrameIndex = function(name){
  725. return $('#'+ name).parents('.'+doms[4]).attr('times');
  726. };
  727. //iframe层自适应宽高
  728. layer.iframeAuto = function(index){
  729. if(!index) return;
  730. var heg = layer.getChildFrame('html', index).outerHeight();
  731. var layero = $('#'+ doms[0] + index);
  732. var titHeight = layero.find(doms[1]).outerHeight() || 0;
  733. var btnHeight = layero.find('.'+doms[6]).outerHeight() || 0;
  734. layero.css({height: heg + titHeight + btnHeight});
  735. layero.find('iframe').css({height: heg});
  736. };
  737. //重置iframe url
  738. layer.iframeSrc = function(index, url){
  739. $('#'+ doms[0] + index).find('iframe').attr('src', url);
  740. };
  741. //设定层的样式
  742. layer.style = function(index, options, limit){
  743. var layero = $('#'+ doms[0] + index)
  744. ,contElem = layero.find('.layui-layer-content')
  745. ,type = layero.attr('type')
  746. ,titHeight = layero.find(doms[1]).outerHeight() || 0
  747. ,btnHeight = layero.find('.'+doms[6]).outerHeight() || 0
  748. ,minLeft = layero.attr('minLeft');
  749. if(type === ready.type[3] || type === ready.type[4]){
  750. return;
  751. }
  752. if(!limit){
  753. if(parseFloat(options.width) <= 260){
  754. options.width = 260;
  755. };
  756. if(parseFloat(options.height) - titHeight - btnHeight <= 64){
  757. options.height = 64 + titHeight + btnHeight;
  758. };
  759. }
  760. layero.css(options);
  761. btnHeight = layero.find('.'+doms[6]).outerHeight() || 0;
  762. if(type === ready.type[2]){
  763. layero.find('iframe').css({
  764. height: parseFloat(options.height) - titHeight - btnHeight
  765. });
  766. } else {
  767. var isBorderBox = contElem.css("box-sizing") == 'border-box' ? true : false;
  768. contElem.css({
  769. height: parseFloat(options.height) - titHeight - btnHeight
  770. - parseFloat(isBorderBox ? 0 : contElem.css('padding-top'))
  771. - parseFloat(isBorderBox ? 0 : contElem.css('padding-bottom'))
  772. })
  773. }
  774. };
  775. //最小化
  776. layer.min = function(index, options){
  777. options = options || {};
  778. var layero = $('#'+ doms[0] + index)
  779. ,shadeo = $('#'+ doms.SHADE + index)
  780. ,titHeight = layero.find(doms[1]).outerHeight() || 0
  781. ,left = layero.attr('minLeft') || (181*ready.minIndex)+'px'
  782. ,position = layero.css('position')
  783. ,settings = {
  784. width: 180
  785. ,height: titHeight
  786. ,position: 'fixed'
  787. ,overflow: 'hidden'
  788. };
  789. //记录宽高坐标,用于还原
  790. ready.record(layero);
  791. if(ready.minLeft[0]){
  792. left = ready.minLeft[0];
  793. ready.minLeft.shift();
  794. }
  795. //是否堆叠在左下角
  796. if(options.minStack){
  797. settings.left = left;
  798. settings.top = win.height() - titHeight;
  799. layero.attr('minLeft') || ready.minIndex++; //初次执行,最小化操作索引自增
  800. layero.attr('minLeft', left);
  801. }
  802. layero.attr('position', position);
  803. layer.style(index, settings, true);
  804. layero.find('.layui-layer-min').hide();
  805. layero.attr('type') === 'page' && layero.find(doms[4]).hide();
  806. ready.rescollbar(index);
  807. //隐藏遮罩
  808. shadeo.hide();
  809. };
  810. //还原
  811. layer.restore = function(index){
  812. var layero = $('#'+ doms[0] + index)
  813. ,shadeo = $('#'+ doms.SHADE + index)
  814. ,area = layero.attr('area').split(',')
  815. ,type = layero.attr('type');
  816. //恢复原来尺寸
  817. layer.style(index, {
  818. width: parseFloat(area[0]),
  819. height: parseFloat(area[1]),
  820. top: parseFloat(area[2]),
  821. left: parseFloat(area[3]),
  822. position: layero.attr('position'),
  823. overflow: 'visible'
  824. }, true);
  825. layero.find('.layui-layer-max').removeClass('layui-layer-maxmin');
  826. layero.find('.layui-layer-min').show();
  827. layero.attr('type') === 'page' && layero.find(doms[4]).show();
  828. ready.rescollbar(index);
  829. //恢复遮罩
  830. shadeo.show();
  831. };
  832. //全屏
  833. layer.full = function(index){
  834. var layero = $('#'+ doms[0] + index), timer;
  835. ready.record(layero);
  836. if(!doms.html.attr('layer-full')){
  837. doms.html.css('overflow','hidden').attr('layer-full', index);
  838. }
  839. clearTimeout(timer);
  840. timer = setTimeout(function(){
  841. var isfix = layero.css('position') === 'fixed';
  842. layer.style(index, {
  843. top: isfix ? 0 : win.scrollTop(),
  844. left: isfix ? 0 : win.scrollLeft(),
  845. width: win.width(),
  846. height: win.height()
  847. }, true);
  848. layero.find('.layui-layer-min').hide();
  849. }, 100);
  850. };
  851. //改变title
  852. layer.title = function(name, index){
  853. var title = $('#'+ doms[0] + (index||layer.index)).find(doms[1]);
  854. title.html(name);
  855. };
  856. //关闭layer总方法
  857. layer.close = function(index, callback){
  858. var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
  859. if(!layero[0]) return;
  860. var WRAP = 'layui-layer-wrap', remove = function(){
  861. if(type === ready.type[1] && layero.attr('conType') === 'object'){
  862. layero.children(':not(.'+ doms[5] +')').remove();
  863. var wrap = layero.find('.'+WRAP);
  864. for(var i = 0; i < 2; i++){
  865. wrap.unwrap();
  866. }
  867. wrap.css('display', wrap.data('display')).removeClass(WRAP);
  868. } else {
  869. //低版本IE 回收 iframe
  870. if(type === ready.type[2]){
  871. try {
  872. var iframe = $('#'+doms[4]+index)[0];
  873. iframe.contentWindow.document.write('');
  874. iframe.contentWindow.close();
  875. layero.find('.'+doms[5])[0].removeChild(iframe);
  876. } catch(e){}
  877. }
  878. layero[0].innerHTML = '';
  879. layero.remove();
  880. }
  881. typeof ready.end[index] === 'function' && ready.end[index]();
  882. delete ready.end[index];
  883. typeof callback === 'function' && callback();
  884. };
  885. if(layero.data('isOutAnim')){
  886. layero.addClass('layer-anim '+ closeAnim);
  887. }
  888. $('#layui-layer-moves, #'+ doms.SHADE + index).remove();
  889. layer.ie == 6 && ready.reselect();
  890. ready.rescollbar(index);
  891. if(layero.attr('minLeft')){
  892. ready.minIndex--;
  893. ready.minLeft.push(layero.attr('minLeft'));
  894. }
  895. if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){
  896. remove()
  897. } else {
  898. setTimeout(function(){
  899. remove();
  900. }, 200);
  901. }
  902. };
  903. //关闭所有层
  904. layer.closeAll = function(type, callback){
  905. if(typeof type === 'function'){
  906. callback = type;
  907. type = null;
  908. };
  909. var domsElem = $('.'+doms[0]);
  910. $.each(domsElem, function(_index){
  911. var othis = $(this);
  912. var is = type ? (othis.attr('type') === type) : 1;
  913. is && layer.close(othis.attr('times'), _index === domsElem.length - 1 ? callback : null);
  914. is = null;
  915. });
  916. if(domsElem.length === 0) typeof callback === 'function' && callback();
  917. };
  918. /**
  919. 拓展模块,layui 开始合并在一起
  920. */
  921. var cache = layer.cache||{}, skin = function(type){
  922. return (cache.skin ? (' ' + cache.skin + ' ' + cache.skin + '-'+type) : '');
  923. };
  924. //仿系统prompt
  925. layer.prompt = function(options, yes){
  926. var style = '';
  927. options = options || {};
  928. if(typeof options === 'function') yes = options;
  929. if(options.area){
  930. var area = options.area;
  931. style = 'style="width: '+ area[0] +'; height: '+ area[1] + ';"';
  932. delete options.area;
  933. }
  934. var prompt, content = options.formType == 2 ? '<textarea class="layui-layer-input"' + style +'></textarea>' : function(){
  935. return '<input type="'+ (options.formType == 1 ? 'password' : 'text') +'" class="layui-layer-input">';
  936. }();
  937. var success = options.success;
  938. delete options.success;
  939. return layer.open($.extend({
  940. type: 1
  941. ,btn: ['&#x786E;&#x5B9A;','&#x53D6;&#x6D88;']
  942. ,content: content
  943. ,skin: 'layui-layer-prompt' + skin('prompt')
  944. ,maxWidth: win.width()
  945. ,success: function(layero){
  946. prompt = layero.find('.layui-layer-input');
  947. prompt.val(options.value || '').focus();
  948. typeof success === 'function' && success(layero);
  949. }
  950. ,resize: false
  951. ,yes: function(index){
  952. var value = prompt.val();
  953. if(value === ''){
  954. prompt.focus();
  955. } else if(value.length > (options.maxlength||500)) {
  956. layer.tips('&#x6700;&#x591A;&#x8F93;&#x5165;'+ (options.maxlength || 500) +'&#x4E2A;&#x5B57;&#x6570;', prompt, {tips: 1});
  957. } else {
  958. yes && yes(value, index, prompt);
  959. }
  960. }
  961. }, options));
  962. };
  963. //tab层
  964. layer.tab = function(options){
  965. options = options || {};
  966. var tab = options.tab || {}
  967. ,THIS = 'layui-this'
  968. ,success = options.success;
  969. delete options.success;
  970. return layer.open($.extend({
  971. type: 1,
  972. skin: 'layui-layer-tab' + skin('tab'),
  973. resize: false,
  974. title: function(){
  975. var len = tab.length, ii = 1, str = '';
  976. if(len > 0){
  977. str = '<span class="'+ THIS +'">'+ tab[0].title +'</span>';
  978. for(; ii < len; ii++){
  979. str += '<span>'+ tab[ii].title +'</span>';
  980. }
  981. }
  982. return str;
  983. }(),
  984. content: '<ul class="layui-layer-tabmain">'+ function(){
  985. var len = tab.length, ii = 1, str = '';
  986. if(len > 0){
  987. str = '<li class="layui-layer-tabli '+ THIS +'">'+ (tab[0].content || 'no content') +'</li>';
  988. for(; ii < len; ii++){
  989. str += '<li class="layui-layer-tabli">'+ (tab[ii].content || 'no content') +'</li>';
  990. }
  991. }
  992. return str;
  993. }() +'</ul>',
  994. success: function(layero){
  995. var btn = layero.find('.layui-layer-title').children();
  996. var main = layero.find('.layui-layer-tabmain').children();
  997. btn.on('mousedown', function(e){
  998. e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
  999. var othis = $(this), index = othis.index();
  1000. othis.addClass(THIS).siblings().removeClass(THIS);
  1001. main.eq(index).show().siblings().hide();
  1002. typeof options.change === 'function' && options.change(index);
  1003. });
  1004. typeof success === 'function' && success(layero);
  1005. }
  1006. }, options));
  1007. };
  1008. //相册层
  1009. layer.photos = function(options, loop, key){
  1010. var dict = {};
  1011. options = options || {};
  1012. if(!options.photos) return;
  1013. options.zoom = typeof options.zoom === 'undefined' ? true : !!options.zoom;
  1014. //若 photos 并非选择器或 jQuery 对象,则为普通 object
  1015. var isObject = !(typeof options.photos === 'string' || options.photos instanceof $)
  1016. ,photos = isObject ? options.photos : {}
  1017. ,data = photos.data || []
  1018. ,start = photos.start || 0;
  1019. dict.imgIndex = (start|0) + 1;
  1020. options.img = options.img || 'img';
  1021. var success = options.success;
  1022. delete options.success;
  1023. //如果 options.photos 不是一个对象
  1024. if(!isObject){ //页面直接获取
  1025. var parent = $(options.photos), pushData = function(){
  1026. data = [];
  1027. parent.find(options.img).each(function(index){
  1028. var othis = $(this);
  1029. othis.attr('layer-index', index);
  1030. data.push({
  1031. alt: othis.attr('alt'),
  1032. pid: othis.attr('layer-pid'),
  1033. src: othis.attr('layer-src') || othis.attr('src'),
  1034. thumb: othis.attr('src')
  1035. });
  1036. });
  1037. };
  1038. pushData();
  1039. if (data.length === 0) return;
  1040. loop || parent.on('click', options.img, function(){
  1041. pushData();
  1042. var othis = $(this), index = othis.attr('layer-index');
  1043. layer.photos($.extend(options, {
  1044. photos: {
  1045. start: index,
  1046. data: data,
  1047. tab: options.tab
  1048. },
  1049. full: options.full
  1050. }), true);
  1051. });
  1052. //不直接弹出
  1053. if(!loop) return;
  1054. } else if (data.length === 0){
  1055. return layer.msg('&#x6CA1;&#x6709;&#x56FE;&#x7247;');
  1056. }
  1057. //上一张
  1058. dict.imgprev = function(key){
  1059. dict.imgIndex--;
  1060. if(dict.imgIndex < 1){
  1061. dict.imgIndex = data.length;
  1062. }
  1063. dict.tabimg(key);
  1064. };
  1065. //下一张
  1066. dict.imgnext = function(key,errorMsg){
  1067. dict.imgIndex++;
  1068. if(dict.imgIndex > data.length){
  1069. dict.imgIndex = 1;
  1070. if (errorMsg) {return};
  1071. }
  1072. dict.tabimg(key)
  1073. };
  1074. //方向键
  1075. dict.keyup = function(event){
  1076. if(!dict.end){
  1077. var code = event.keyCode;
  1078. event.preventDefault();
  1079. if(code === 37){
  1080. dict.imgprev(true);
  1081. } else if(code === 39) {
  1082. dict.imgnext(true);
  1083. } else if(code === 27) {
  1084. layer.close(dict.index);
  1085. }
  1086. }
  1087. }
  1088. //切换
  1089. dict.tabimg = function(key){
  1090. if(data.length <= 1) return;
  1091. photos.start = dict.imgIndex - 1;
  1092. layer.close(dict.index);
  1093. return layer.photos(options, true, key);
  1094. setTimeout(function(){
  1095. layer.photos(options, true, key);
  1096. }, 200);
  1097. }
  1098. //一些动作
  1099. dict.event = function(){
  1100. /*
  1101. dict.bigimg.hover(function(){
  1102. dict.imgsee.show();
  1103. }, function(){
  1104. dict.imgsee.hide();
  1105. });
  1106. */
  1107. dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){
  1108. event.preventDefault();
  1109. dict.imgprev(true);
  1110. });
  1111. dict.bigimg.find('.layui-layer-imgnext').on('click', function(event){
  1112. event.preventDefault();
  1113. dict.imgnext(true);
  1114. });
  1115. $(document).on('keyup', dict.keyup);
  1116. //鼠标滚轮缩放图片
  1117. if(options.zoom){
  1118. dict.bigimg.on('wheel mousewheel', $(">img", dict.bigimg), function(event) {
  1119. var offset = $(this).offset(),
  1120. zoomIn = event.originalEvent.wheelDelta>0,
  1121. operator = zoomIn ? '+=' : '-=',
  1122. distance = 24,
  1123. value = Math.floor(distance / 2) ;
  1124. if(!zoomIn && ($(this).width()<50 || $(this).height()<50)){
  1125. return false;
  1126. }
  1127. $(this).width(operator + distance).height(operator + distance).offset({
  1128. 'left': zoomIn ? offset.left - value : offset.left + value,
  1129. 'top': zoomIn ? offset.top - value : offset.top + value
  1130. });
  1131. return false;
  1132. });
  1133. }
  1134. };
  1135. //图片预加载
  1136. function loadImage(url, callback, error) {
  1137. var img = new Image();
  1138. img.src = url;
  1139. if(img.complete){
  1140. return callback(img);
  1141. }
  1142. img.onload = function(){
  1143. img.onload = null;
  1144. callback(img);
  1145. };
  1146. img.onerror = function(e){
  1147. img.onerror = null;
  1148. error(e);
  1149. };
  1150. };
  1151. dict.loadi = layer.load(1, {
  1152. shade: 'shade' in options ? false : 0.9,
  1153. scrollbar: false
  1154. });
  1155. loadImage(data[start].src, function(img){
  1156. layer.close(dict.loadi);
  1157. //切换图片时不出现动画
  1158. if(key) options.anim = -1;
  1159. //弹出图片层
  1160. dict.index = layer.open($.extend({
  1161. type: 1,
  1162. id: 'layui-layer-photos',
  1163. area: function(){
  1164. var imgarea = [img.width, img.height];
  1165. var winarea = [$(window).width() - 100, $(window).height() - 100];
  1166. //如果 实际图片的宽或者高比 屏幕大(那么进行缩放)
  1167. if(!options.full && (imgarea[0]>winarea[0]||imgarea[1]>winarea[1])){
  1168. var wh = [imgarea[0]/winarea[0],imgarea[1]/winarea[1]];//取宽度缩放比例、高度缩放比例
  1169. if(wh[0] > wh[1]){//取缩放比例最大的进行缩放
  1170. imgarea[0] = imgarea[0]/wh[0];
  1171. imgarea[1] = imgarea[1]/wh[0];
  1172. } else if(wh[0] < wh[1]){
  1173. imgarea[0] = imgarea[0]/wh[1];
  1174. imgarea[1] = imgarea[1]/wh[1];
  1175. }
  1176. }
  1177. return [imgarea[0]+'px', imgarea[1]+'px'];
  1178. }(),
  1179. title: false,
  1180. shade: 0.9,
  1181. shadeClose: true,
  1182. closeBtn: false,
  1183. move: '.layui-layer-phimg img',
  1184. moveType: 1,
  1185. scrollbar: false,
  1186. moveOut: true,
  1187. anim: 5,
  1188. isOutAnim: false,
  1189. skin: 'layui-layer-photos' + skin('photos'),
  1190. content: '<div class="layui-layer-phimg">'
  1191. +'<img src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'
  1192. +function(){
  1193. if(data.length > 1){
  1194. return '<div class="layui-layer-imgsee">'
  1195. +'<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>'
  1196. +'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="javascript:;">'+ (data[start].alt || '') +'</a><em>'+ dict.imgIndex +' / '+ data.length +'</em></span></div>'
  1197. +'</div>'
  1198. }
  1199. return '';
  1200. }()
  1201. +'</div>',
  1202. success: function(layero, index){
  1203. dict.bigimg = layero.find('.layui-layer-phimg');
  1204. dict.imgsee = layero.find('.layui-layer-imgbar');
  1205. dict.event(layero);
  1206. options.tab && options.tab(data[start], layero);
  1207. typeof success === 'function' && success(layero);
  1208. }, end: function(){
  1209. dict.end = true;
  1210. $(document).off('keyup', dict.keyup);
  1211. }
  1212. }, options));
  1213. }, function(){
  1214. layer.close(dict.loadi);
  1215. layer.msg('&#x5F53;&#x524D;&#x56FE;&#x7247;&#x5730;&#x5740;&#x5F02;&#x5E38;<br>&#x662F;&#x5426;&#x7EE7;&#x7EED;&#x67E5;&#x770B;&#x4E0B;&#x4E00;&#x5F20;&#xFF1F;', {
  1216. time: 30000,
  1217. btn: ['&#x4E0B;&#x4E00;&#x5F20;', '&#x4E0D;&#x770B;&#x4E86;'],
  1218. yes: function(){
  1219. data.length > 1 && dict.imgnext(true,true);
  1220. }
  1221. });
  1222. });
  1223. };
  1224. //主入口
  1225. ready.run = function(_$){
  1226. $ = _$;
  1227. win = $(window);
  1228. doms.html = $('html');
  1229. layer.open = function(deliver){
  1230. var o = new Class(deliver);
  1231. return o.index;
  1232. };
  1233. };
  1234. //加载方式
  1235. window.layui && layui.define ? (
  1236. layer.ready()
  1237. ,layui.define('jquery', function(exports){ //layui 加载
  1238. layer.path = layui.cache.dir;
  1239. ready.run(layui.$);
  1240. //暴露模块
  1241. window.layer = layer;
  1242. exports('layer', layer);
  1243. })
  1244. ) : (
  1245. (typeof define === 'function' && define.amd) ? define(['jquery'], function(){ //requirejs 加载
  1246. ready.run(window.jQuery);
  1247. return layer;
  1248. }) : function(){ //普通 script 标签加载
  1249. layer.ready();
  1250. ready.run(window.jQuery);
  1251. }()
  1252. );
  1253. }(window);