dialog-plus.js 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725
  1. /*! artDialog v6.0.5 | https://github.com/aui/artDialog */
  2. !(function () {
  3. var __modules__ = {};
  4. function require (id) {
  5. var mod = __modules__[id];
  6. var exports = 'exports';
  7. if (typeof mod === 'object') {
  8. return mod;
  9. }
  10. if (!mod[exports]) {
  11. mod[exports] = {};
  12. mod[exports] = mod.call(mod[exports], require, mod[exports], mod) || mod[exports];
  13. }
  14. return mod[exports];
  15. }
  16. function define (path, fn) {
  17. __modules__[path] = fn;
  18. }
  19. define("jquery", function () {
  20. return jQuery;
  21. });
  22. /*!
  23. * PopupJS
  24. * Date: 2014-11-09
  25. * https://github.com/aui/popupjs
  26. * (c) 2009-2014 TangBin, http://www.planeArt.cn
  27. *
  28. * This is licensed under the GNU LGPL, version 2.1 or later.
  29. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html
  30. */
  31. define("popup", function (require) {
  32. var $ = require("jquery");
  33. var _count = 0;
  34. var _isIE6 = !('minWidth' in $('html')[0].style);
  35. var _isFixed = !_isIE6;
  36. function Popup () {
  37. this.destroyed = false;
  38. this.__popup = $('<div />')
  39. /*使用 <dialog /> 元素可能导致 z-index 永远置顶的问题(chrome)*/
  40. .css({
  41. display: 'none',
  42. position: 'absolute',
  43. /*
  44. left: 0,
  45. top: 0,
  46. bottom: 'auto',
  47. right: 'auto',
  48. margin: 0,
  49. padding: 0,
  50. border: '0 none',
  51. background: 'transparent'
  52. */
  53. outline: 0
  54. })
  55. .attr('tabindex', '-1')
  56. .html(this.innerHTML)
  57. .appendTo('body');
  58. this.__backdrop = this.__mask = $('<div />')
  59. .css({
  60. opacity: .7,
  61. background: '#000'
  62. });
  63. // 使用 HTMLElement 作为外部接口使用,而不是 jquery 对象
  64. // 统一的接口利于未来 Popup 移植到其他 DOM 库中
  65. this.node = this.__popup[0];
  66. this.backdrop = this.__backdrop[0];
  67. _count ++;
  68. }
  69. $.extend(Popup.prototype, {
  70. /**
  71. * 初始化完毕事件,在 show()、showModal() 执行
  72. * @name Popup.prototype.onshow
  73. * @event
  74. */
  75. /**
  76. * 关闭事件,在 close() 执行
  77. * @name Popup.prototype.onclose
  78. * @event
  79. */
  80. /**
  81. * 销毁前事件,在 remove() 前执行
  82. * @name Popup.prototype.onbeforeremove
  83. * @event
  84. */
  85. /**
  86. * 销毁事件,在 remove() 执行
  87. * @name Popup.prototype.onremove
  88. * @event
  89. */
  90. /**
  91. * 重置事件,在 reset() 执行
  92. * @name Popup.prototype.onreset
  93. * @event
  94. */
  95. /**
  96. * 焦点事件,在 foucs() 执行
  97. * @name Popup.prototype.onfocus
  98. * @event
  99. */
  100. /**
  101. * 失焦事件,在 blur() 执行
  102. * @name Popup.prototype.onblur
  103. * @event
  104. */
  105. /** 浮层 DOM 素节点[*] */
  106. node: null,
  107. /** 遮罩 DOM 节点[*] */
  108. backdrop: null,
  109. /** 是否开启固定定位[*] */
  110. fixed: true,
  111. /** 判断对话框是否删除[*] */
  112. destroyed: true,
  113. /** 判断对话框是否显示 */
  114. open: false,
  115. /** close 返回值 */
  116. returnValue: '',
  117. /** 是否自动聚焦 */
  118. autofocus: true,
  119. /** 对齐方式[*] */
  120. align: 'bottom left',
  121. /** 内部的 HTML 字符串 */
  122. innerHTML: '',
  123. /** CSS 类名 */
  124. className: 'ui-popup',
  125. /**
  126. * 显示浮层
  127. * @param {HTMLElement, Event} 指定位置(可选)
  128. */
  129. show: function (anchor) {
  130. if (this.destroyed) {
  131. return this;
  132. }
  133. var that = this;
  134. var popup = this.__popup;
  135. var backdrop = this.__backdrop;
  136. this.__activeElement = this.__getActive();
  137. this.open = true;
  138. this.follow = anchor || this.follow;
  139. // 初始化 show 方法
  140. if (!this.__ready) {
  141. popup
  142. .addClass(this.className)
  143. .attr('role', this.modal ? 'alertdialog' : 'dialog')
  144. .css('position', this.fixed ? 'fixed' : 'absolute');
  145. if (!_isIE6) {
  146. $(window).on('resize', $.proxy(this.reset, this));
  147. }
  148. // 模态浮层的遮罩
  149. if (this.modal) {
  150. var backdropCss = {
  151. position: 'fixed',
  152. left: 0,
  153. top: 0,
  154. width: '100%',
  155. height: '100%',
  156. overflow: 'hidden',
  157. userSelect: 'none',
  158. zIndex: this.zIndex || Popup.zIndex
  159. };
  160. popup.addClass(this.className + '-modal');
  161. if (!_isFixed) {
  162. $.extend(backdropCss, {
  163. position: 'absolute',
  164. width: $(window).width() + 'px',
  165. height: $(document).height() + 'px'
  166. });
  167. }
  168. backdrop
  169. .css(backdropCss)
  170. .attr({tabindex: '0'})
  171. .on('focus', $.proxy(this.focus, this));
  172. // 锁定 tab 的焦点操作
  173. this.__mask = backdrop
  174. .clone(true)
  175. .attr('style', '')
  176. .insertAfter(popup);
  177. backdrop
  178. .addClass(this.className + '-backdrop')
  179. .insertBefore(popup);
  180. this.__ready = true;
  181. }
  182. if (!popup.html()) {
  183. popup.html(this.innerHTML);
  184. }
  185. }
  186. popup
  187. .addClass(this.className + '-show')
  188. .show();
  189. backdrop.show();
  190. this.reset().focus();
  191. this.__dispatchEvent('show');
  192. return this;
  193. },
  194. /** 显示模态浮层。参数参见 show() */
  195. showModal: function () {
  196. this.modal = true;
  197. return this.show.apply(this, arguments);
  198. },
  199. /** 关闭浮层 */
  200. close: function (result) {
  201. if (!this.destroyed && this.open) {
  202. if (result !== undefined) {
  203. this.returnValue = result;
  204. }
  205. this.__popup.hide().removeClass(this.className + '-show');
  206. this.__backdrop.hide();
  207. this.open = false;
  208. this.blur();// 恢复焦点,照顾键盘操作的用户
  209. this.__dispatchEvent('close');
  210. }
  211. return this;
  212. },
  213. /** 销毁浮层 */
  214. remove: function () {
  215. if (this.destroyed) {
  216. return this;
  217. }
  218. this.__dispatchEvent('beforeremove');
  219. if (Popup.current === this) {
  220. Popup.current = null;
  221. }
  222. // 从 DOM 中移除节点
  223. this.__popup.remove();
  224. this.__backdrop.remove();
  225. this.__mask.remove();
  226. if (!_isIE6) {
  227. $(window).off('resize', this.reset);
  228. }
  229. this.__dispatchEvent('remove');
  230. for (var i in this) {
  231. delete this[i];
  232. }
  233. return this;
  234. },
  235. /** 重置位置 */
  236. reset: function () {
  237. var elem = this.follow;
  238. if (elem) {
  239. this.__follow(elem);
  240. } else {
  241. this.__center();
  242. }
  243. this.__dispatchEvent('reset');
  244. return this;
  245. },
  246. /** 让浮层获取焦点 */
  247. focus: function () {
  248. var node = this.node;
  249. var popup = this.__popup;
  250. var current = Popup.current;
  251. var index = this.zIndex = Popup.zIndex ++;
  252. if (current && current !== this) {
  253. current.blur(false);
  254. }
  255. // 检查焦点是否在浮层里面
  256. if (!$.contains(node, this.__getActive())) {
  257. var autofocus = popup.find('[autofocus]')[0];
  258. if (!this._autofocus && autofocus) {
  259. this._autofocus = true;
  260. } else {
  261. autofocus = node;
  262. }
  263. this.__focus(autofocus);
  264. }
  265. // 设置叠加高度
  266. popup.css('zIndex', index);
  267. //this.__backdrop.css('zIndex', index);
  268. Popup.current = this;
  269. popup.addClass(this.className + '-focus');
  270. this.__dispatchEvent('focus');
  271. return this;
  272. },
  273. /** 让浮层失去焦点。将焦点退还给之前的元素,照顾视力障碍用户 */
  274. blur: function () {
  275. var activeElement = this.__activeElement;
  276. var isBlur = arguments[0];
  277. if (isBlur !== false) {
  278. this.__focus(activeElement);
  279. }
  280. this._autofocus = false;
  281. this.__popup.removeClass(this.className + '-focus');
  282. this.__dispatchEvent('blur');
  283. return this;
  284. },
  285. /**
  286. * 添加事件
  287. * @param {String} 事件类型
  288. * @param {Function} 监听函数
  289. */
  290. addEventListener: function (type, callback) {
  291. this.__getEventListener(type).push(callback);
  292. return this;
  293. },
  294. /**
  295. * 删除事件
  296. * @param {String} 事件类型
  297. * @param {Function} 监听函数
  298. */
  299. removeEventListener: function (type, callback) {
  300. var listeners = this.__getEventListener(type);
  301. for (var i = 0; i < listeners.length; i ++) {
  302. if (callback === listeners[i]) {
  303. listeners.splice(i--, 1);
  304. }
  305. }
  306. return this;
  307. },
  308. // 获取事件缓存
  309. __getEventListener: function (type) {
  310. var listener = this.__listener;
  311. if (!listener) {
  312. listener = this.__listener = {};
  313. }
  314. if (!listener[type]) {
  315. listener[type] = [];
  316. }
  317. return listener[type];
  318. },
  319. // 派发事件
  320. __dispatchEvent: function (type) {
  321. var listeners = this.__getEventListener(type);
  322. if (this['on' + type]) {
  323. this['on' + type]();
  324. }
  325. for (var i = 0; i < listeners.length; i ++) {
  326. listeners[i].call(this);
  327. }
  328. },
  329. // 对元素安全聚焦
  330. __focus: function (elem) {
  331. // 防止 iframe 跨域无权限报错
  332. // 防止 IE 不可见元素报错
  333. try {
  334. // ie11 bug: iframe 页面点击会跳到顶部
  335. if (this.autofocus && !/^iframe$/i.test(elem.nodeName)) {
  336. elem.focus();
  337. }
  338. } catch (e) {}
  339. },
  340. // 获取当前焦点的元素
  341. __getActive: function () {
  342. try {// try: ie8~9, iframe #26
  343. var activeElement = document.activeElement;
  344. var contentDocument = activeElement.contentDocument;
  345. var elem = contentDocument && contentDocument.activeElement || activeElement;
  346. return elem;
  347. } catch (e) {}
  348. },
  349. // 居中浮层
  350. __center: function () {
  351. var popup = this.__popup;
  352. var $window = $(window);
  353. var $document = $(document);
  354. var fixed = this.fixed;
  355. var dl = fixed ? 0 : $document.scrollLeft();
  356. var dt = fixed ? 0 : $document.scrollTop();
  357. var ww = $window.width();
  358. var wh = $window.height();
  359. var ow = popup.width();
  360. var oh = popup.height();
  361. var left = (ww - ow) / 2 + dl;
  362. var top = (wh - oh) * 382 / 1000 + dt;// 黄金比例
  363. var style = popup[0].style;
  364. style.left = Math.max(parseInt(left), dl) + 'px';
  365. style.top = Math.max(parseInt(top), dt) + 'px';
  366. if(this.__browser.versions.ios){
  367. style.top = '45%';
  368. style.position = 'fixed';
  369. style.marginTop = '-'+(popup.outerHeight(true)/2)+'px';
  370. }
  371. },
  372. __browser : {
  373. versions:function(){
  374. var u = navigator.userAgent, app = navigator.appVersion;
  375. return { //移动终端浏览器版本信息
  376. trident: u.indexOf('Trident') > -1, //IE内核
  377. presto: u.indexOf('Presto') > -1, //opera内核
  378. webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  379. gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
  380. mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
  381. ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
  382. android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
  383. iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
  384. iPad: u.indexOf('iPad') > -1, //是否iPad
  385. webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
  386. };
  387. }(),
  388. language:(navigator.browserLanguage || navigator.language).toLowerCase()
  389. },
  390. // 指定位置 @param {HTMLElement, Event} anchor
  391. __follow: function (anchor) {
  392. var $elem = anchor.parentNode && $(anchor);
  393. var popup = this.__popup;
  394. if (this.__followSkin) {
  395. popup.removeClass(this.__followSkin);
  396. }
  397. // 隐藏元素不可用
  398. if ($elem) {
  399. var o = $elem.offset();
  400. if (o.left * o.top < 0) {
  401. return this.__center();
  402. }
  403. }
  404. var that = this;
  405. var fixed = this.fixed;
  406. var $window = $(window);
  407. var $document = $(document);
  408. var winWidth = $window.width();
  409. var winHeight = $window.height();
  410. var docLeft = $document.scrollLeft();
  411. var docTop = $document.scrollTop();
  412. var popupWidth = popup.width();
  413. var popupHeight = popup.height();
  414. var width = $elem ? $elem.outerWidth() : 0;
  415. var height = $elem ? $elem.outerHeight() : 0;
  416. var offset = this.__offset(anchor);
  417. var x = offset.left;
  418. var y = offset.top;
  419. var left = fixed ? x - docLeft : x;
  420. var top = fixed ? y - docTop : y;
  421. var minLeft = fixed ? 0 : docLeft;
  422. var minTop = fixed ? 0 : docTop;
  423. var maxLeft = minLeft + winWidth - popupWidth;
  424. var maxTop = minTop + winHeight - popupHeight;
  425. var css = {};
  426. var align = this.align.split(' ');
  427. var className = this.className + '-';
  428. var reverse = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'};
  429. var name = {top: 'top', bottom: 'top', left: 'left', right: 'left'};
  430. var temp = [{
  431. top: top - popupHeight,
  432. bottom: top + height,
  433. left: left - popupWidth,
  434. right: left + width
  435. }, {
  436. top: top,
  437. bottom: top - popupHeight + height,
  438. left: left,
  439. right: left - popupWidth + width
  440. }];
  441. var center = {
  442. left: left + width / 2 - popupWidth / 2,
  443. top: top + height / 2 - popupHeight / 2
  444. };
  445. var range = {
  446. left: [minLeft, maxLeft],
  447. top: [minTop, maxTop]
  448. };
  449. // 超出可视区域重新适应位置
  450. $.each(align, function (i, val) {
  451. // 超出右或下边界:使用左或者上边对齐
  452. if (temp[i][val] > range[name[val]][1]) {
  453. val = align[i] = reverse[val];
  454. }
  455. // 超出左或右边界:使用右或者下边对齐
  456. if (temp[i][val] < range[name[val]][0]) {
  457. align[i] = reverse[val];
  458. }
  459. });
  460. // 一个参数的情况
  461. if (!align[1]) {
  462. name[align[1]] = name[align[0]] === 'left' ? 'top' : 'left';
  463. temp[1][align[1]] = center[name[align[1]]];
  464. }
  465. //添加follow的css, 为了给css使用
  466. className += align.join('-') + ' '+ this.className+ '-follow';
  467. that.__followSkin = className;
  468. if ($elem) {
  469. popup.addClass(className);
  470. }
  471. css[name[align[0]]] = parseInt(temp[0][align[0]]);
  472. css[name[align[1]]] = parseInt(temp[1][align[1]]);
  473. popup.css(css);
  474. },
  475. // 获取元素相对于页面的位置(包括iframe内的元素)
  476. // 暂时不支持两层以上的 iframe 套嵌
  477. __offset: function (anchor) {
  478. var isNode = anchor.parentNode;
  479. var offset = isNode ? $(anchor).offset() : {
  480. left: anchor.pageX,
  481. top: anchor.pageY
  482. };
  483. anchor = isNode ? anchor : anchor.target;
  484. var ownerDocument = anchor.ownerDocument;
  485. var defaultView = ownerDocument.defaultView || ownerDocument.parentWindow;
  486. if (defaultView == window) {// IE <= 8 只能使用两个等于号
  487. return offset;
  488. }
  489. // {Element: Ifarme}
  490. var frameElement = defaultView.frameElement;
  491. var $ownerDocument = $(ownerDocument);
  492. var docLeft = $ownerDocument.scrollLeft();
  493. var docTop = $ownerDocument.scrollTop();
  494. var frameOffset = $(frameElement).offset();
  495. var frameLeft = frameOffset.left;
  496. var frameTop = frameOffset.top;
  497. return {
  498. left: offset.left + frameLeft - docLeft,
  499. top: offset.top + frameTop - docTop
  500. };
  501. }
  502. });
  503. /** 当前叠加高度 */
  504. Popup.zIndex = 1024;
  505. /** 顶层浮层的实例 */
  506. Popup.current = null;
  507. return Popup;
  508. });
  509. // artDialog - 默认配置
  510. define("dialog-config", {
  511. /* -----已注释的配置继承自 popup.js,仍可以再这里重新定义它----- */
  512. // 对齐方式
  513. //align: 'bottom left',
  514. // 是否固定定位
  515. fixed: true,
  516. // 对话框叠加高度值(重要:此值不能超过浏览器最大限制)
  517. zIndex: 3000,
  518. // 设置遮罩背景颜色
  519. backdropBackground: '#000',
  520. // 设置遮罩透明度
  521. backdropOpacity: 0.7,
  522. // 消息内容
  523. content: '',
  524. // 消息内容类型
  525. contentType: '', // load, jsonload
  526. // 自动关闭时间
  527. closeTime: 3000,
  528. // 标题
  529. title: '',
  530. // 对话框状态栏区域 HTML 代码
  531. statusbar: '',
  532. // 自定义按钮
  533. button: null,
  534. // 确定按钮回调函数
  535. ok: null,
  536. // 取消按钮回调函数
  537. cancel: null,
  538. // 确定按钮文本
  539. okValue: '\u786e\u5b9a',
  540. // 取消按钮文本
  541. cancelValue: '\u53d6\u6d88',
  542. cancelDisplay: true,
  543. // 内容宽度
  544. width: '',
  545. // 内容高度
  546. height: '',
  547. // 内容与边界填充距离
  548. padding: '',
  549. // 标题填充距离
  550. titlePadding:'',
  551. // 内容为块级元素
  552. contentBlock:false,
  553. // 对话框自定义 className
  554. skin: 'ax-popup',
  555. // 对话框最外层自定义 className
  556. boxSkin: 'ui-popup-full fat-title',
  557. // 是否支持快捷关闭(点击遮罩层自动关闭)
  558. quickClose: false,
  559. // css 文件路径,留空则不会使用 js 自动加载样式
  560. // 注意:css 只允许加载一个
  561. cssUri: '',
  562. // 模板(使用 table 解决 IE7 宽度自适应的 BUG)
  563. // js 使用 i="***" 属性识别结构,其余的均可自定义
  564. innerHTML:
  565. '<div i="dialog" class="ui-dialog">'
  566. + '<div class="ui-dialog-arrow-a"></div>'
  567. + '<div class="ui-dialog-arrow-b"></div>'
  568. + '<table class="ui-dialog-grid">'
  569. + '<tr>'
  570. + '<td i="header" class="ui-dialog-header">'
  571. + '<button i="close" class="ui-dialog-close">&#215;</button>'
  572. + '<div i="title" class="ui-dialog-title"></div>'
  573. + '</td>'
  574. + '</tr>'
  575. + '<tr>'
  576. + '<td i="body" class="ui-dialog-body">'
  577. + '<div i="content" class="ui-dialog-content"></div>'
  578. + '</td>'
  579. + '</tr>'
  580. + '<tr>'
  581. + '<td i="footer" class="ui-dialog-footer">'
  582. + '<div i="statusbar" class="ui-dialog-statusbar"></div>'
  583. + '<div i="button" class="ui-dialog-button"></div>'
  584. + '</td>'
  585. + '</tr>'
  586. + '</table>'
  587. +'</div>'
  588. });
  589. /*!
  590. * artDialog
  591. * Date: 2014-11-09
  592. * https://github.com/aui/artDialog
  593. * (c) 2009-2014 TangBin, http://www.planeArt.cn
  594. *
  595. * This is licensed under the GNU LGPL, version 2.1 or later.
  596. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html
  597. */
  598. define("dialog", function (require) {
  599. var $ = require("jquery");
  600. var Popup = require("popup");
  601. var defaults = require("dialog-config");
  602. var css = defaults.cssUri;
  603. // css loader: RequireJS & SeaJS
  604. if (css) {
  605. var fn = require[require.toUrl ? 'toUrl' : 'resolve'];
  606. if (fn) {
  607. css = fn(css);
  608. css = '<link rel="stylesheet" href="' + css + '" />';
  609. if ($('base')[0]) {
  610. $('base').before(css);
  611. } else {
  612. $('head').append(css);
  613. }
  614. }
  615. }
  616. var _count = 0;
  617. var _expando = new Date() - 0; // Date.now()
  618. var _isIE6 = !('minWidth' in $('html')[0].style);
  619. var _isMobile = 'createTouch' in document && !('onmousemove' in document)
  620. || /(iPhone|iPad|iPod)/i.test(navigator.userAgent);
  621. var _isFixed = !_isIE6 && !_isMobile;
  622. var artDialog = function (options, ok, cancel) {
  623. var originalOptions = options = options || {};
  624. if (typeof options === 'string' || options.nodeType === 1) {
  625. options = {content: options, fixed: !_isMobile};
  626. }
  627. options = $.extend(true, {}, artDialog.defaults, options);
  628. options.original = originalOptions;
  629. var id = options.id = options.id || _expando + _count;
  630. var api = artDialog.get(id);
  631. // 如果存在同名的对话框对象,则直接返回
  632. if (api) {
  633. return api.focus();
  634. }
  635. // 目前主流移动设备对fixed支持不好,禁用此特性
  636. if (!_isFixed) {
  637. options.fixed = false;
  638. }
  639. // 快捷关闭支持:点击对话框外快速关闭对话框
  640. if (options.quickClose) {
  641. options.modal = true;
  642. options.backdropOpacity = .5;
  643. }
  644. // 按钮组
  645. if (!$.isArray(options.button)) {
  646. options.button = [];
  647. }
  648. // 取消按钮
  649. if (cancel !== undefined) {
  650. options.cancel = cancel;
  651. }
  652. if (options.cancel) {
  653. options.button.push({
  654. id: 'cancel',
  655. value: options.cancelValue,
  656. callback: options.cancel,
  657. display: options.cancelDisplay
  658. });
  659. }
  660. // 确定按钮
  661. if (ok !== undefined) {
  662. options.ok = ok;
  663. }
  664. if (options.ok) {
  665. options.button.push({
  666. id: 'ok',
  667. value: options.okValue,
  668. callback: options.ok,
  669. autofocus: true
  670. });
  671. }
  672. return artDialog.list[id] = new artDialog.create(options);
  673. };
  674. var popup = function () {};
  675. popup.prototype = Popup.prototype;
  676. var prototype = artDialog.prototype = new popup();
  677. artDialog.create = function (options) {
  678. var that = this;
  679. $.extend(this, new Popup());
  680. var originalOptions = options.original;
  681. var $popup = $(this.node).html(options.innerHTML);
  682. var $backdrop = $(this.backdrop);
  683. this.options = options;
  684. this._popup = $popup;
  685. $.each(options, function (name, value) {
  686. if (typeof that[name] === 'function') {
  687. that[name](value);
  688. } else {
  689. that[name] = value;
  690. }
  691. });
  692. // 更新 zIndex 全局配置
  693. if (options.zIndex) {
  694. Popup.zIndex = options.zIndex;
  695. }
  696. // 设置 ARIA 信息
  697. $popup.attr({
  698. 'aria-labelledby': this._$('title')
  699. .attr('id', 'title:' + this.id).attr('id'),
  700. 'aria-describedby': this._$('content')
  701. .attr('id', 'content:' + this.id).attr('id')
  702. });
  703. // 关闭按钮
  704. this._$('close')
  705. .css('display', this.cancel === false ? 'none' : '')
  706. .attr('title', this.cancelValue)
  707. .on('click', function (event) {
  708. that._trigger('cancel');
  709. event.preventDefault();
  710. });
  711. // 添加视觉参数
  712. if(this.contentType!=''){
  713. this.boxSkin='';
  714. if(this.skin=="bk-popup"){
  715. this.skin='bk-popup smallTips';
  716. }else{
  717. this.skin='smallTips';
  718. }
  719. }
  720. this._$('dialog').addClass(this.skin);
  721. $popup.addClass(this.boxSkin);
  722. this._$('body').css('padding', this.padding);
  723. this._$('title').css('padding', this.titlePadding);
  724. if(this.contentBlock){
  725. this._$('content').css('display', 'block');
  726. }
  727. // 点击任意空白处关闭对话框
  728. if (options.quickClose) {
  729. $backdrop
  730. .on(
  731. 'onmousedown' in document ? 'mousedown' : 'click',
  732. function () {
  733. that._trigger('cancel');
  734. return false;// 阻止抢夺焦点
  735. });
  736. }
  737. // 遮罩设置
  738. this.addEventListener('show', function () {
  739. $backdrop.css({opacity: options.backdropOpacity,background: options.backdropBackground});
  740. /*$backdrop.css({ 小米4 APP壳不能有动画过程
  741. opacity: 0,
  742. background: options.backdropBackground
  743. }).animate(
  744. {opacity: options.backdropOpacity}
  745. , 150);*/
  746. });
  747. // ESC 快捷键关闭对话框
  748. this._esc = function (event) {
  749. var target = event.target;
  750. var nodeName = target.nodeName;
  751. var rinput = /^input|textarea$/i;
  752. var isTop = Popup.current === that;
  753. var keyCode = event.keyCode;
  754. // 避免输入状态中 ESC 误操作关闭
  755. if (!isTop || rinput.test(nodeName) && target.type !== 'button') {
  756. return;
  757. }
  758. if (keyCode === 27) {
  759. that._trigger('cancel');
  760. }
  761. };
  762. $(document).on('keydown', this._esc);
  763. this.addEventListener('remove', function () {
  764. $(document).off('keydown', this._esc);
  765. delete artDialog.list[this.id];
  766. });
  767. _count ++;
  768. artDialog.oncreate(this);
  769. return this;
  770. };
  771. artDialog.create.prototype = prototype;
  772. $.extend(prototype, {
  773. /**
  774. * 显示对话框
  775. * @name artDialog.prototype.show
  776. * @param {HTMLElement Object, Event Object} 指定位置(可选)
  777. */
  778. /**
  779. * 显示对话框(模态)
  780. * @name artDialog.prototype.showModal
  781. * @param {HTMLElement Object, Event Object} 指定位置(可选)
  782. */
  783. /**
  784. * 关闭对话框
  785. * @name artDialog.prototype.close
  786. * @param {String, Number} 返回值,可被 onclose 事件收取(可选)
  787. */
  788. /**
  789. * 销毁对话框
  790. * @name artDialog.prototype.remove
  791. */
  792. /**
  793. * 重置对话框位置
  794. * @name artDialog.prototype.reset
  795. */
  796. /**
  797. * 让对话框聚焦(同时置顶)
  798. * @name artDialog.prototype.focus
  799. */
  800. /**
  801. * 让对话框失焦(同时置顶)
  802. * @name artDialog.prototype.blur
  803. */
  804. /**
  805. * 添加事件
  806. * @param {String} 事件类型
  807. * @param {Function} 监听函数
  808. * @name artDialog.prototype.addEventListener
  809. */
  810. /**
  811. * 删除事件
  812. * @param {String} 事件类型
  813. * @param {Function} 监听函数
  814. * @name artDialog.prototype.removeEventListener
  815. */
  816. /**
  817. * 对话框显示事件,在 show()、showModal() 执行
  818. * @name artDialog.prototype.onshow
  819. * @event
  820. */
  821. /**
  822. * 关闭事件,在 close() 执行
  823. * @name artDialog.prototype.onclose
  824. * @event
  825. */
  826. /**
  827. * 销毁前事件,在 remove() 前执行
  828. * @name artDialog.prototype.onbeforeremove
  829. * @event
  830. */
  831. /**
  832. * 销毁事件,在 remove() 执行
  833. * @name artDialog.prototype.onremove
  834. * @event
  835. */
  836. /**
  837. * 重置事件,在 reset() 执行
  838. * @name artDialog.prototype.onreset
  839. * @event
  840. */
  841. /**
  842. * 焦点事件,在 foucs() 执行
  843. * @name artDialog.prototype.onfocus
  844. * @event
  845. */
  846. /**
  847. * 失焦事件,在 blur() 执行
  848. * @name artDialog.prototype.onblur
  849. * @event
  850. */
  851. /**
  852. * 设置内容
  853. * @param {String, HTMLElement} 内容
  854. */
  855. content: function (html) {
  856. var $content = this._$('content');
  857. // HTMLElement
  858. if (typeof html === 'object') {
  859. html = $(html);
  860. $content.empty('').append(html.show());
  861. this.addEventListener('beforeremove', function () {
  862. $('body').append(html.hide());
  863. });
  864. // String
  865. } else {
  866. if(this.options.contentType!=''){
  867. switch(this.options.contentType)
  868. {
  869. case 'load':
  870. if(this.options.content==''){
  871. html='<span class="ui-dialog-loading"></span><p style="float:left;">\u52a0\u8f7d\u4e2d\uff0c\u8bf7\u7a0d\u5019...</p>';
  872. }else{
  873. html='<span class="ui-dialog-loading"></span><p style="float:left;">'+this.options.content+'</p>';
  874. }
  875. break;
  876. case 'jsonload':
  877. if(this.options.content==''){
  878. html='<span class="ui-dialog-loading"></span><p style="float:left;">\u6570\u636e\u8f7d\u5165\u4e2d\uff0c\u8bf7\u7a0d\u5019...</p>';
  879. }else{
  880. html='<span class="ui-dialog-loading"></span><p style="float:left;">'+this.options.content+'</p>';
  881. }
  882. break;
  883. case 'tipsbox':
  884. var th=this;
  885. setTimeout(function () {
  886. artDialog.list[th.id].close().remove();
  887. }, this.options.closeTime);
  888. break;
  889. }
  890. }
  891. $content.html(html);
  892. }
  893. return this.reset();
  894. },
  895. /**
  896. * 设置标题
  897. * @param {String} 标题内容
  898. */
  899. title: function (text) {
  900. this._$('title').html(text);
  901. this._$('header')[text ? 'show' : 'hide']();
  902. return this;
  903. },
  904. /** 设置宽度 */
  905. width: function (value) {
  906. this._$('content').css('width', value);
  907. return this.reset();
  908. },
  909. /** 设置高度 */
  910. height: function (value) {
  911. this._$('content').css('height', value);
  912. return this.reset();
  913. },
  914. /**
  915. * 设置按钮组
  916. * @param {Array, String}
  917. * Options: value, callback, autofocus, disabled
  918. */
  919. button: function (args) {
  920. args = args || [];
  921. var that = this;
  922. var html = '';
  923. var number = 0;
  924. this.callbacks = {};
  925. if (typeof args === 'string') {
  926. html = args;
  927. number ++;
  928. } else {
  929. $.each(args, function (i, val) {
  930. var id = val.id = val.id || val.value;
  931. var style = '';
  932. that.callbacks[id] = val.callback;
  933. if (val.display === false) {
  934. style = ' style="display:none"';
  935. } else {
  936. number ++;
  937. }
  938. html +=
  939. '<button'
  940. + ' type="button"'
  941. + ' i-id="' + id + '"'
  942. + style
  943. + (val.disabled ? ' disabled' : '')
  944. + (val.autofocus ? ' autofocus class="ui-dialog-autofocus"' : '')
  945. + '><span>'
  946. + val.value
  947. + '</span></button>';
  948. that._$('button')
  949. .on('click', '[i-id=' + id +']', function (event) {
  950. var $this = $(this);
  951. if (!$this.attr('disabled')) {// IE BUG
  952. that._trigger(id);
  953. }
  954. event.preventDefault();
  955. });
  956. });
  957. }
  958. this._$('button').html(html);
  959. this._$('footer')[number ? 'show' : 'hide']();
  960. return this;
  961. },
  962. statusbar: function (html) {
  963. this._$('statusbar')
  964. .html(html)[html ? 'show' : 'hide']();
  965. return this;
  966. },
  967. _$: function (i) {
  968. return this._popup.find('[i=' + i + ']');
  969. },
  970. // 触发按钮回调函数
  971. _trigger: function (id) {
  972. var fn = this.callbacks[id];
  973. return typeof fn !== 'function' || fn.call(this) !== false ?
  974. this.close().remove() : this;
  975. }
  976. });
  977. artDialog.oncreate = $.noop;
  978. /** 获取最顶层的对话框API */
  979. artDialog.getCurrent = function () {
  980. return Popup.current;
  981. };
  982. /**
  983. * 根据 ID 获取某对话框 API
  984. * @param {String} 对话框 ID
  985. * @return {Object} 对话框 API (实例)
  986. */
  987. artDialog.get = function (id) {
  988. return id === undefined
  989. ? artDialog.list
  990. : artDialog.list[id];
  991. };
  992. artDialog.list = {};
  993. /**
  994. * 默认配置
  995. */
  996. artDialog.defaults = defaults;
  997. return artDialog;
  998. });
  999. /*!
  1000. * drag.js
  1001. * Date: 2013-12-06
  1002. * https://github.com/aui/artDialog
  1003. * (c) 2009-2014 TangBin, http://www.planeArt.cn
  1004. *
  1005. * This is licensed under the GNU LGPL, version 2.1 or later.
  1006. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html
  1007. */
  1008. define("drag", function (require) {
  1009. var $ = require("jquery");
  1010. var $window = $(window);
  1011. var $document = $(document);
  1012. var isTouch = 'createTouch' in document;
  1013. var html = document.documentElement;
  1014. var isIE6 = !('minWidth' in html.style);
  1015. var isLosecapture = !isIE6 && 'onlosecapture' in html;
  1016. var isSetCapture = 'setCapture' in html;
  1017. var types = {
  1018. start: isTouch ? 'touchstart' : 'mousedown',
  1019. over: isTouch ? 'touchmove' : 'mousemove',
  1020. end: isTouch ? 'touchend' : 'mouseup'
  1021. };
  1022. var getEvent = isTouch ? function (event) {
  1023. if (!event.touches) {
  1024. event = event.originalEvent.touches.item(0);
  1025. }
  1026. return event;
  1027. } : function (event) {
  1028. return event;
  1029. };
  1030. var DragEvent = function () {
  1031. this.start = $.proxy(this.start, this);
  1032. this.over = $.proxy(this.over, this);
  1033. this.end = $.proxy(this.end, this);
  1034. this.onstart = this.onover = this.onend = $.noop;
  1035. };
  1036. DragEvent.types = types;
  1037. DragEvent.prototype = {
  1038. start: function (event) {
  1039. event = this.startFix(event);
  1040. $document
  1041. .on(types.over, this.over)
  1042. .on(types.end, this.end);
  1043. this.onstart(event);
  1044. return false;
  1045. },
  1046. over: function (event) {
  1047. event = this.overFix(event);
  1048. this.onover(event);
  1049. return false;
  1050. },
  1051. end: function (event) {
  1052. event = this.endFix(event);
  1053. $document
  1054. .off(types.over, this.over)
  1055. .off(types.end, this.end);
  1056. this.onend(event);
  1057. return false;
  1058. },
  1059. startFix: function (event) {
  1060. event = getEvent(event);
  1061. this.target = $(event.target);
  1062. this.selectstart = function () {
  1063. return false;
  1064. };
  1065. $document
  1066. .on('selectstart', this.selectstart)
  1067. .on('dblclick', this.end);
  1068. if (isLosecapture) {
  1069. this.target.on('losecapture', this.end);
  1070. } else {
  1071. $window.on('blur', this.end);
  1072. }
  1073. if (isSetCapture) {
  1074. this.target[0].setCapture();
  1075. }
  1076. return event;
  1077. },
  1078. overFix: function (event) {
  1079. event = getEvent(event);
  1080. return event;
  1081. },
  1082. endFix: function (event) {
  1083. event = getEvent(event);
  1084. $document
  1085. .off('selectstart', this.selectstart)
  1086. .off('dblclick', this.end);
  1087. if (isLosecapture) {
  1088. this.target.off('losecapture', this.end);
  1089. } else {
  1090. $window.off('blur', this.end);
  1091. }
  1092. if (isSetCapture) {
  1093. this.target[0].releaseCapture();
  1094. }
  1095. return event;
  1096. }
  1097. };
  1098. /**
  1099. * 启动拖拽
  1100. * @param {HTMLElement} 被拖拽的元素
  1101. * @param {Event} 触发拖拽的事件对象。可选,若无则监听 elem 的按下事件启动
  1102. */
  1103. DragEvent.create = function (elem, event) {
  1104. var $elem = $(elem);
  1105. var dragEvent = new DragEvent();
  1106. var startType = DragEvent.types.start;
  1107. var noop = function () {};
  1108. var className = elem.className
  1109. .replace(/^\s|\s.*/g, '') + '-drag-start';
  1110. var minX;
  1111. var minY;
  1112. var maxX;
  1113. var maxY;
  1114. var api = {
  1115. onstart: noop,
  1116. onover: noop,
  1117. onend: noop,
  1118. off: function () {
  1119. $elem.off(startType, dragEvent.start);
  1120. }
  1121. };
  1122. dragEvent.onstart = function (event) {
  1123. var isFixed = $elem.css('position') === 'fixed';
  1124. var dl = $document.scrollLeft();
  1125. var dt = $document.scrollTop();
  1126. var w = $elem.width();
  1127. var h = $elem.height();
  1128. minX = 0;
  1129. minY = 0;
  1130. maxX = isFixed ? $window.width() - w + minX : $document.width() - w;
  1131. maxY = isFixed ? $window.height() - h + minY : $document.height() - h;
  1132. var offset = $elem.offset();
  1133. var left = this.startLeft = isFixed ? offset.left - dl : offset.left;
  1134. var top = this.startTop = isFixed ? offset.top - dt : offset.top;
  1135. this.clientX = event.clientX;
  1136. this.clientY = event.clientY;
  1137. $elem.addClass(className);
  1138. api.onstart.call(elem, event, left, top);
  1139. };
  1140. dragEvent.onover = function (event) {
  1141. var left = event.clientX - this.clientX + this.startLeft;
  1142. var top = event.clientY - this.clientY + this.startTop;
  1143. var style = $elem[0].style;
  1144. left = Math.max(minX, Math.min(maxX, left));
  1145. top = Math.max(minY, Math.min(maxY, top));
  1146. style.left = left + 'px';
  1147. style.top = top + 'px';
  1148. api.onover.call(elem, event, left, top);
  1149. };
  1150. dragEvent.onend = function (event) {
  1151. var position = $elem.position();
  1152. var left = position.left;
  1153. var top = position.top;
  1154. $elem.removeClass(className);
  1155. api.onend.call(elem, event, left, top);
  1156. };
  1157. dragEvent.off = function () {
  1158. $elem.off(startType, dragEvent.start);
  1159. };
  1160. if (event) {
  1161. dragEvent.start(event);
  1162. } else {
  1163. $elem.on(startType, dragEvent.start);
  1164. }
  1165. return api;
  1166. };
  1167. return DragEvent;
  1168. });
  1169. /*!
  1170. * artDialog-plus
  1171. * Date: 2013-11-09
  1172. * https://github.com/aui/artDialog
  1173. * (c) 2009-2014 TangBin, http://www.planeArt.cn
  1174. *
  1175. * This is licensed under the GNU LGPL, version 2.1 or later.
  1176. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html
  1177. */
  1178. define("dialog-plus", function (require) {
  1179. var $ = require("jquery");
  1180. var dialog = require("dialog");
  1181. var drag = require("drag");
  1182. dialog.oncreate = function (api) {
  1183. var options = api.options;
  1184. var originalOptions = options.original;
  1185. // 页面地址
  1186. var url = options.url;
  1187. // 页面加载完毕的事件
  1188. var oniframeload = options.oniframeload;
  1189. var $iframe;
  1190. if (url) {
  1191. this.padding = options.padding = 0;
  1192. $iframe = $('<iframe />');
  1193. $iframe.attr({
  1194. src: url,
  1195. name: api.id,
  1196. width: '100%',
  1197. height: '100%',
  1198. allowtransparency: 'yes',
  1199. frameborder: 'no',
  1200. scrolling: 'no'
  1201. })
  1202. .on('load', function () {
  1203. var test;
  1204. try {
  1205. // 跨域测试
  1206. test = $iframe[0].contentWindow.frameElement;
  1207. } catch (e) {}
  1208. if (test) {
  1209. if (!options.width) {
  1210. api.width($iframe.contents().width());
  1211. }
  1212. if (!options.height) {
  1213. api.height($iframe.contents().height());
  1214. }
  1215. }
  1216. if (oniframeload) {
  1217. oniframeload.call(api);
  1218. }
  1219. });
  1220. api.addEventListener('beforeremove', function () {
  1221. // 重要!需要重置iframe地址,否则下次出现的对话框在IE6、7无法聚焦input
  1222. // IE删除iframe后,iframe仍然会留在内存中出现上述问题,置换src是最容易解决的方法
  1223. $iframe.attr('src', 'about:blank').remove();
  1224. }, false);
  1225. api.content($iframe[0]);
  1226. api.iframeNode = $iframe[0];
  1227. }
  1228. // 对于子页面呼出的对话框特殊处理
  1229. // 如果对话框配置来自 iframe
  1230. if (!(originalOptions instanceof Object)) {
  1231. var un = function () {
  1232. api.close().remove();
  1233. };
  1234. // 找到那个 iframe
  1235. for (var i = 0; i < frames.length; i ++) {
  1236. try {
  1237. if (originalOptions instanceof frames[i].Object) {
  1238. // 让 iframe 刷新的时候也关闭对话框,
  1239. // 防止要执行的对象被强制收回导致 IE 报错:“不能执行已释放 Script 的代码”
  1240. $(frames[i]).one('unload', un);
  1241. break;
  1242. }
  1243. } catch (e) {}
  1244. }
  1245. }
  1246. // 拖拽支持
  1247. $(api.node).on(drag.types.start, '[i=title]', function (event) {
  1248. // 排除气泡类型的对话框
  1249. if (!api.follow) {
  1250. api.focus();
  1251. drag.create(api.node, event);
  1252. }
  1253. });
  1254. };
  1255. dialog.get = function (id) {
  1256. // 从 iframe 传入 window 对象
  1257. if (id && id.frameElement) {
  1258. var iframe = id.frameElement;
  1259. var list = dialog.list;
  1260. var api;
  1261. for (var i in list) {
  1262. api = list[i];
  1263. if (api.node.getElementsByTagName('iframe')[0] === iframe) {
  1264. return api;
  1265. }
  1266. }
  1267. // 直接传入 id 的情况
  1268. } else if (id) {
  1269. return dialog.list[id];
  1270. }
  1271. };
  1272. return dialog;
  1273. });
  1274. window.dialog = require("dialog-plus");
  1275. })();