layerjs-gm-with-css

layer.js 带有css样式

As of 2021-10-27. See the latest version.

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greatest.deepsurf.us/scripts/434540/982902/layerjs-gm-with-css.js

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