jquery.artDialog.source.js 33 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262
  1. /*!
  2. * artDialog 4.1.7
  3. * Date: 2013-03-03 08:04
  4. * http://code.google.com/p/artdialog/
  5. * (c) 2009-2012 TangBin, http://www.planeArt.cn
  6. *
  7. * This is licensed under the GNU LGPL, version 2.1 or later.
  8. * For details, see: http://creativecommons.org/licenses/LGPL/2.1/
  9. */
  10. //------------------------------------------------
  11. // 对话框模块
  12. //------------------------------------------------
  13. ;(function ($, window, undefined) {
  14. $.noop = $.noop || function () {}; // jQuery 1.3.2
  15. var _box, _thisScript, _skin, _path,
  16. _count = 0,
  17. _$window = $(window),
  18. _$document = $(document),
  19. _$html = $('html'),
  20. _elem = document.documentElement,
  21. _isIE6 = window.VBArray && !window.XMLHttpRequest,
  22. _isMobile = 'createTouch' in document && !('onmousemove' in _elem)
  23. || /(iPhone|iPad|iPod)/i.test(navigator.userAgent),
  24. _expando = 'artDialog' + + new Date;
  25. var artDialog = function (config, ok, cancel) {
  26. config = config || {};
  27. if (typeof config === 'string' || config.nodeType === 1) {
  28. config = {content: config, fixed: !_isMobile};
  29. };
  30. var api,
  31. defaults = artDialog.defaults,
  32. elem = config.follow = this.nodeType === 1 && this || config.follow;
  33. // 合并默认配置
  34. for (var i in defaults) {
  35. if (config[i] === undefined) config[i] = defaults[i];
  36. };
  37. // 兼容v4.1.0之前的参数,未来版本将删除此
  38. $.each({ok:"yesFn",cancel:"noFn",close:"closeFn",init:"initFn",okVal:"yesText",cancelVal:"noText"},
  39. function(i,o){config[i]=config[i]!==undefined?config[i]:config[o]});
  40. // 返回跟随模式或重复定义的ID
  41. if (typeof elem === 'string') elem = $(elem)[0];
  42. config.id = elem && elem[_expando + 'follow'] || config.id || _expando + _count;
  43. api = artDialog.list[config.id];
  44. if (elem && api) return api.follow(elem).zIndex().focus();
  45. if (api) return api.zIndex().focus();
  46. // 目前主流移动设备对fixed支持不好
  47. if (_isMobile) config.fixed = false;
  48. // 按钮队列
  49. if (!$.isArray(config.button)) {
  50. config.button = config.button ? [config.button] : [];
  51. };
  52. if (ok !== undefined) config.ok = ok;
  53. if (cancel !== undefined) config.cancel = cancel;
  54. config.ok && config.button.push({
  55. name: config.okVal,
  56. callback: config.ok,
  57. focus: true
  58. });
  59. config.cancel && config.button.push({
  60. name: config.cancelVal,
  61. callback: config.cancel
  62. });
  63. // zIndex全局配置
  64. artDialog.defaults.zIndex = config.zIndex;
  65. _count ++;
  66. return artDialog.list[config.id] = _box ?
  67. _box._init(config) : new artDialog.fn._init(config);
  68. };
  69. artDialog.fn = artDialog.prototype = {
  70. version: '4.1.7',
  71. closed: true,
  72. _init: function (config) {
  73. var that = this, DOM,
  74. icon = config.icon,
  75. iconBg = icon && (_isIE6 ? {png: 'icons/' + icon + '.png'}
  76. : {backgroundImage: 'url(\'' + config.path + '/skins/icons/' + icon + '.png\')'});
  77. that.closed = false;
  78. that.config = config;
  79. that.DOM = DOM = that.DOM || that._getDOM();
  80. DOM.wrap.addClass(config.skin);
  81. DOM.close[config.cancel === false ? 'hide' : 'show']();
  82. DOM.icon[0].style.display = icon ? '' : 'none';
  83. DOM.iconBg.css(iconBg || {background: 'none'});
  84. DOM.se.css('cursor', config.resize ? 'se-resize' : 'auto');
  85. DOM.title.css('cursor', config.drag ? 'move' : 'auto');
  86. DOM.content.css('padding', config.padding);
  87. that[config.show ? 'show' : 'hide'](true)
  88. that.button(config.button)
  89. .title(config.title)
  90. .content(config.content, true)
  91. .size(config.width, config.height)
  92. .time(config.time);
  93. config.follow
  94. ? that.follow(config.follow)
  95. : that.position(config.left, config.top);
  96. that.zIndex().focus();
  97. config.lock && that.lock();
  98. that._addEvent();
  99. that._ie6PngFix();
  100. _box = null;
  101. config.init && config.init.call(that, window);
  102. return that;
  103. },
  104. /**
  105. * 设置内容
  106. * @param {String, HTMLElement} 内容 (可选)
  107. * @return {this, HTMLElement} 如果无参数则返回内容容器DOM对象
  108. */
  109. content: function (msg) {
  110. var prev, next, parent, display,
  111. that = this,
  112. DOM = that.DOM,
  113. wrap = DOM.wrap[0],
  114. width = wrap.offsetWidth,
  115. height = wrap.offsetHeight,
  116. left = parseInt(wrap.style.left),
  117. top = parseInt(wrap.style.top),
  118. cssWidth = wrap.style.width,
  119. $content = DOM.content,
  120. content = $content[0];
  121. that._elemBack && that._elemBack();
  122. wrap.style.width = 'auto';
  123. if (msg === undefined) return content;
  124. if (typeof msg === 'string') {
  125. $content.html(msg);
  126. } else if (msg && msg.nodeType === 1) {
  127. // 让传入的元素在对话框关闭后可以返回到原来的地方
  128. display = msg.style.display;
  129. prev = msg.previousSibling;
  130. next = msg.nextSibling;
  131. parent = msg.parentNode;
  132. that._elemBack = function () {
  133. if (prev && prev.parentNode) {
  134. prev.parentNode.insertBefore(msg, prev.nextSibling);
  135. } else if (next && next.parentNode) {
  136. next.parentNode.insertBefore(msg, next);
  137. } else if (parent) {
  138. parent.appendChild(msg);
  139. };
  140. msg.style.display = display;
  141. that._elemBack = null;
  142. };
  143. $content.html('');
  144. content.appendChild(msg);
  145. msg.style.display = 'block';
  146. };
  147. // 新增内容后调整位置
  148. if (!arguments[1]) {
  149. if (that.config.follow) {
  150. that.follow(that.config.follow);
  151. } else {
  152. width = wrap.offsetWidth - width;
  153. height = wrap.offsetHeight - height;
  154. left = left - width / 2;
  155. top = top - height / 2;
  156. wrap.style.left = Math.max(left, 0) + 'px';
  157. wrap.style.top = Math.max(top, 0) + 'px';
  158. };
  159. if (cssWidth && cssWidth !== 'auto') {
  160. wrap.style.width = wrap.offsetWidth + 'px';
  161. };
  162. that._autoPositionType();
  163. };
  164. that._ie6SelectFix();
  165. that._runScript(content);
  166. return that;
  167. },
  168. /**
  169. * 设置标题
  170. * @param {String, Boolean} 标题内容. 为false则隐藏标题栏
  171. * @return {this, HTMLElement} 如果无参数则返回内容器DOM对象
  172. */
  173. title: function (text) {
  174. var DOM = this.DOM,
  175. wrap = DOM.wrap,
  176. title = DOM.title,
  177. className = 'aui_state_noTitle';
  178. if (text === undefined) return title[0];
  179. if (text === false) {
  180. title.hide().html('');
  181. wrap.addClass(className);
  182. } else {
  183. title.show().html(text || '');
  184. wrap.removeClass(className);
  185. };
  186. return this;
  187. },
  188. /**
  189. * 位置(相对于可视区域)
  190. * @param {Number, String}
  191. * @param {Number, String}
  192. */
  193. position: function (left, top) {
  194. var that = this,
  195. config = that.config,
  196. wrap = that.DOM.wrap[0],
  197. isFixed = _isIE6 ? false : config.fixed,
  198. ie6Fixed = _isIE6 && that.config.fixed,
  199. docLeft = _$document.scrollLeft(),
  200. docTop = _$document.scrollTop(),
  201. dl = isFixed ? 0 : docLeft,
  202. dt = isFixed ? 0 : docTop,
  203. ww = _$window.width(),
  204. wh = _$window.height(),
  205. ow = wrap.offsetWidth,
  206. oh = wrap.offsetHeight,
  207. style = wrap.style;
  208. if (left || left === 0) {
  209. that._left = left.toString().indexOf('%') !== -1 ? left : null;
  210. left = that._toNumber(left, ww - ow);
  211. if (typeof left === 'number') {
  212. left = ie6Fixed ? (left += docLeft) : left + dl;
  213. style.left = Math.max(left, dl) + 'px';
  214. } else if (typeof left === 'string') {
  215. style.left = left;
  216. };
  217. };
  218. if (top || top === 0) {
  219. that._top = top.toString().indexOf('%') !== -1 ? top : null;
  220. top = that._toNumber(top, wh - oh);
  221. if (typeof top === 'number') {
  222. top = ie6Fixed ? (top += docTop) : top + dt;
  223. style.top = Math.max(top, dt) + 'px';
  224. } else if (typeof top === 'string') {
  225. style.top = top;
  226. };
  227. };
  228. if (left !== undefined && top !== undefined) {
  229. that._follow = null;
  230. that._autoPositionType();
  231. };
  232. return that;
  233. },
  234. /**
  235. * 尺寸
  236. * @param {Number, String} 宽度
  237. * @param {Number, String} 高度
  238. */
  239. size: function (width, height) {
  240. var maxWidth, maxHeight, scaleWidth, scaleHeight,
  241. that = this,
  242. config = that.config,
  243. DOM = that.DOM,
  244. wrap = DOM.wrap,
  245. main = DOM.main,
  246. wrapStyle = wrap[0].style,
  247. style = main[0].style;
  248. if (width) {
  249. that._width = width.toString().indexOf('%') !== -1 ? width : null;
  250. maxWidth = _$window.width() - wrap[0].offsetWidth + main[0].offsetWidth;
  251. scaleWidth = that._toNumber(width, maxWidth);
  252. width = scaleWidth;
  253. if (typeof width === 'number') {
  254. wrapStyle.width = 'auto';
  255. style.width = Math.max(that.config.minWidth, width) + 'px';
  256. wrapStyle.width = wrap[0].offsetWidth + 'px'; // 防止未定义宽度的表格遇到浏览器右边边界伸缩
  257. } else if (typeof width === 'string') {
  258. style.width = width;
  259. width === 'auto' && wrap.css('width', 'auto');
  260. };
  261. };
  262. if (height) {
  263. that._height = height.toString().indexOf('%') !== -1 ? height : null;
  264. maxHeight = _$window.height() - wrap[0].offsetHeight + main[0].offsetHeight;
  265. scaleHeight = that._toNumber(height, maxHeight);
  266. height = scaleHeight;
  267. if (typeof height === 'number') {
  268. style.height = Math.max(that.config.minHeight, height) + 'px';
  269. } else if (typeof height === 'string') {
  270. style.height = height;
  271. };
  272. };
  273. that._ie6SelectFix();
  274. return that;
  275. },
  276. /**
  277. * 跟随元素
  278. * @param {HTMLElement, String}
  279. */
  280. follow: function (elem) {
  281. var $elem, that = this, config = that.config;
  282. if (typeof elem === 'string' || elem && elem.nodeType === 1) {
  283. $elem = $(elem);
  284. elem = $elem[0];
  285. };
  286. // 隐藏元素不可用
  287. if (!elem || !elem.offsetWidth && !elem.offsetHeight) {
  288. return that.position(that._left, that._top);
  289. };
  290. var expando = _expando + 'follow',
  291. winWidth = _$window.width(),
  292. winHeight = _$window.height(),
  293. docLeft = _$document.scrollLeft(),
  294. docTop = _$document.scrollTop(),
  295. offset = $elem.offset(),
  296. width = elem.offsetWidth,
  297. height = elem.offsetHeight,
  298. isFixed = _isIE6 ? false : config.fixed,
  299. left = isFixed ? offset.left - docLeft : offset.left,
  300. top = isFixed ? offset.top - docTop : offset.top,
  301. wrap = that.DOM.wrap[0],
  302. style = wrap.style,
  303. wrapWidth = wrap.offsetWidth,
  304. wrapHeight = wrap.offsetHeight,
  305. setLeft = left - (wrapWidth - width) / 2,
  306. setTop = top + height,
  307. dl = isFixed ? 0 : docLeft,
  308. dt = isFixed ? 0 : docTop;
  309. setLeft = setLeft < dl ? left :
  310. (setLeft + wrapWidth > winWidth) && (left - wrapWidth > dl)
  311. ? left - wrapWidth + width
  312. : setLeft;
  313. setTop = (setTop + wrapHeight > winHeight + dt)
  314. && (top - wrapHeight > dt)
  315. ? top - wrapHeight
  316. : setTop;
  317. style.left = setLeft + 'px';
  318. style.top = setTop + 'px';
  319. that._follow && that._follow.removeAttribute(expando);
  320. that._follow = elem;
  321. elem[expando] = config.id;
  322. that._autoPositionType();
  323. return that;
  324. },
  325. /**
  326. * 自定义按钮
  327. * @example
  328. button({
  329. name: 'login',
  330. callback: function () {},
  331. disabled: false,
  332. focus: true
  333. }, .., ..)
  334. */
  335. button: function () {
  336. var that = this,
  337. ags = arguments,
  338. DOM = that.DOM,
  339. buttons = DOM.buttons,
  340. elem = buttons[0],
  341. strongButton = 'aui_state_highlight',
  342. listeners = that._listeners = that._listeners || {},
  343. list = $.isArray(ags[0]) ? ags[0] : [].slice.call(ags);
  344. if (ags[0] === undefined) return elem;
  345. $.each(list, function (i, val) {
  346. var name = val.name,
  347. isNewButton = !listeners[name],
  348. button = !isNewButton ?
  349. listeners[name].elem :
  350. document.createElement('button');
  351. if (!listeners[name]) listeners[name] = {};
  352. if (val.callback) listeners[name].callback = val.callback;
  353. if (val.className) button.className = val.className;
  354. if (val.focus) {
  355. that._focus && that._focus.removeClass(strongButton);
  356. that._focus = $(button).addClass(strongButton);
  357. that.focus();
  358. };
  359. // Internet Explorer 的默认类型是 "button",
  360. // 而其他浏览器中(包括 W3C 规范)的默认值是 "submit"
  361. // @see http://www.w3school.com.cn/tags/att_button_type.asp
  362. button.setAttribute('type', 'button');
  363. button[_expando + 'callback'] = name;
  364. button.disabled = !!val.disabled;
  365. if (isNewButton) {
  366. button.innerHTML = name;
  367. listeners[name].elem = button;
  368. elem.appendChild(button);
  369. };
  370. });
  371. buttons[0].style.display = list.length ? '' : 'none';
  372. that._ie6SelectFix();
  373. return that;
  374. },
  375. /** 显示对话框 */
  376. show: function () {
  377. this.DOM.wrap.show();
  378. !arguments[0] && this._lockMaskWrap && this._lockMaskWrap.show();
  379. return this;
  380. },
  381. /** 隐藏对话框 */
  382. hide: function () {
  383. this.DOM.wrap.hide();
  384. !arguments[0] && this._lockMaskWrap && this._lockMaskWrap.hide();
  385. return this;
  386. },
  387. /** 关闭对话框 */
  388. close: function () {
  389. if (this.closed) return this;
  390. var that = this,
  391. DOM = that.DOM,
  392. wrap = DOM.wrap,
  393. list = artDialog.list,
  394. fn = that.config.close,
  395. follow = that.config.follow;
  396. that.time();
  397. if (typeof fn === 'function' && fn.call(that, window) === false) {
  398. return that;
  399. };
  400. that.unlock();
  401. // 置空内容
  402. that._elemBack && that._elemBack();
  403. wrap[0].className = wrap[0].style.cssText = '';
  404. DOM.title.html('');
  405. DOM.content.html('');
  406. DOM.buttons.html('');
  407. if (artDialog.focus === that) artDialog.focus = null;
  408. if (follow) follow.removeAttribute(_expando + 'follow');
  409. delete list[that.config.id];
  410. that._removeEvent();
  411. that.hide(true)._setAbsolute();
  412. // 清空除this.DOM之外临时对象,恢复到初始状态,以便使用单例模式
  413. for (var i in that) {
  414. if (that.hasOwnProperty(i) && i !== 'DOM') delete that[i];
  415. };
  416. // 移除HTMLElement或重用
  417. _box ? wrap.remove() : _box = that;
  418. return that;
  419. },
  420. /**
  421. * 定时关闭
  422. * @param {Number} 单位为秒, 无参数则停止计时器
  423. */
  424. time: function (second) {
  425. var that = this,
  426. cancel = that.config.cancelVal,
  427. timer = that._timer;
  428. timer && clearTimeout(timer);
  429. if (second) {
  430. that._timer = setTimeout(function(){
  431. that._click(cancel);
  432. }, 1000 * second);
  433. };
  434. return that;
  435. },
  436. /** 设置焦点 */
  437. focus: function () {
  438. try {
  439. if (this.config.focus) {
  440. var elem = this._focus && this._focus[0] || this.DOM.close[0];
  441. elem && elem.focus();
  442. }
  443. } catch (e) {}; // IE对不可见元素设置焦点会报错
  444. return this;
  445. },
  446. /** 置顶对话框 */
  447. zIndex: function () {
  448. var that = this,
  449. DOM = that.DOM,
  450. wrap = DOM.wrap,
  451. top = artDialog.focus,
  452. index = artDialog.defaults.zIndex ++;
  453. // 设置叠加高度
  454. wrap.css('zIndex', index);
  455. that._lockMask && that._lockMask.css('zIndex', index - 1);
  456. // 设置最高层的样式
  457. top && top.DOM.wrap.removeClass('aui_state_focus');
  458. artDialog.focus = that;
  459. wrap.addClass('aui_state_focus');
  460. return that;
  461. },
  462. /** 设置屏锁 */
  463. lock: function () {
  464. if (this._lock) return this;
  465. var that = this,
  466. index = artDialog.defaults.zIndex - 1,
  467. wrap = that.DOM.wrap,
  468. config = that.config,
  469. docWidth = _$document.width(),
  470. docHeight = _$document.height(),
  471. lockMaskWrap = that._lockMaskWrap || $(document.body.appendChild(document.createElement('div'))),
  472. lockMask = that._lockMask || $(lockMaskWrap[0].appendChild(document.createElement('div'))),
  473. domTxt = '(document).documentElement',
  474. sizeCss = _isMobile ? 'width:' + docWidth + 'px;height:' + docHeight
  475. + 'px' : 'width:100%;height:100%',
  476. ie6Css = _isIE6 ?
  477. 'position:absolute;left:expression(' + domTxt + '.scrollLeft);top:expression('
  478. + domTxt + '.scrollTop);width:expression(' + domTxt
  479. + '.clientWidth);height:expression(' + domTxt + '.clientHeight)'
  480. : '';
  481. that.zIndex();
  482. wrap.addClass('aui_state_lock');
  483. lockMaskWrap[0].style.cssText = sizeCss + ';position:fixed;z-index:'
  484. + index + ';top:0;left:0;overflow:hidden;' + ie6Css;
  485. lockMask[0].style.cssText = 'height:100%;background:' + config.background
  486. + ';filter:alpha(opacity=0);opacity:0';
  487. // 让IE6锁屏遮罩能够盖住下拉控件
  488. if (_isIE6) lockMask.html(
  489. '<iframe src="about:blank" style="width:100%;height:100%;position:absolute;' +
  490. 'top:0;left:0;z-index:-1;filter:alpha(opacity=0)"></iframe>');
  491. lockMask.stop();
  492. lockMask.bind('click', function () {
  493. that._reset();
  494. }).bind('dblclick', function () {
  495. that._click(that.config.cancelVal);
  496. });
  497. if (config.duration === 0) {
  498. lockMask.css({opacity: config.opacity});
  499. } else {
  500. lockMask.animate({opacity: config.opacity}, config.duration);
  501. };
  502. that._lockMaskWrap = lockMaskWrap;
  503. that._lockMask = lockMask;
  504. that._lock = true;
  505. return that;
  506. },
  507. /** 解开屏锁 */
  508. unlock: function () {
  509. var that = this,
  510. lockMaskWrap = that._lockMaskWrap,
  511. lockMask = that._lockMask;
  512. if (!that._lock) return that;
  513. var style = lockMaskWrap[0].style;
  514. var un = function () {
  515. if (_isIE6) {
  516. style.removeExpression('width');
  517. style.removeExpression('height');
  518. style.removeExpression('left');
  519. style.removeExpression('top');
  520. };
  521. style.cssText = 'display:none';
  522. _box && lockMaskWrap.remove();
  523. };
  524. lockMask.stop().unbind();
  525. that.DOM.wrap.removeClass('aui_state_lock');
  526. if (!that.config.duration) {// 取消动画,快速关闭
  527. un();
  528. } else {
  529. lockMask.animate({opacity: 0}, that.config.duration, un);
  530. };
  531. that._lock = false;
  532. return that;
  533. },
  534. // 获取元素
  535. _getDOM: function () {
  536. var wrap = document.createElement('div'),
  537. body = document.body;
  538. wrap.style.cssText = 'position:absolute;left:0;top:0';
  539. wrap.innerHTML = artDialog._templates;
  540. body.insertBefore(wrap, body.firstChild);
  541. var name, i = 0,
  542. DOM = {wrap: $(wrap)},
  543. els = wrap.getElementsByTagName('*'),
  544. elsLen = els.length;
  545. for (; i < elsLen; i ++) {
  546. name = els[i].className.split('aui_')[1];
  547. if (name) DOM[name] = $(els[i]);
  548. };
  549. return DOM;
  550. },
  551. // px与%单位转换成数值 (百分比单位按照最大值换算)
  552. // 其他的单位返回原值
  553. _toNumber: function (thisValue, maxValue) {
  554. if (!thisValue && thisValue !== 0 || typeof thisValue === 'number') {
  555. return thisValue;
  556. };
  557. var last = thisValue.length - 1;
  558. if (thisValue.lastIndexOf('px') === last) {
  559. thisValue = parseInt(thisValue);
  560. } else if (thisValue.lastIndexOf('%') === last) {
  561. thisValue = parseInt(maxValue * thisValue.split('%')[0] / 100);
  562. };
  563. return thisValue;
  564. },
  565. // 让IE6 CSS支持PNG背景
  566. _ie6PngFix: _isIE6 ? function () {
  567. var i = 0, elem, png, pngPath, runtimeStyle,
  568. path = artDialog.defaults.path + '/skins/',
  569. list = this.DOM.wrap[0].getElementsByTagName('*');
  570. for (; i < list.length; i ++) {
  571. elem = list[i];
  572. png = elem.currentStyle['png'];
  573. if (png) {
  574. pngPath = path + png;
  575. runtimeStyle = elem.runtimeStyle;
  576. runtimeStyle.backgroundImage = 'none';
  577. runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
  578. "AlphaImageLoader(src='" + pngPath + "',sizingMethod='crop')";
  579. };
  580. };
  581. } : $.noop,
  582. // 强制覆盖IE6下拉控件
  583. _ie6SelectFix: _isIE6 ? function () {
  584. var $wrap = this.DOM.wrap,
  585. wrap = $wrap[0],
  586. expando = _expando + 'iframeMask',
  587. iframe = $wrap[expando],
  588. width = wrap.offsetWidth,
  589. height = wrap.offsetHeight;
  590. width = width + 'px';
  591. height = height + 'px';
  592. if (iframe) {
  593. iframe.style.width = width;
  594. iframe.style.height = height;
  595. } else {
  596. iframe = wrap.appendChild(document.createElement('iframe'));
  597. $wrap[expando] = iframe;
  598. iframe.src = 'about:blank';
  599. iframe.style.cssText = 'position:absolute;z-index:-1;left:0;top:0;'
  600. + 'filter:alpha(opacity=0);width:' + width + ';height:' + height;
  601. };
  602. } : $.noop,
  603. // 解析HTML片段中自定义类型脚本,其this指向artDialog内部
  604. // <script type="text/dialog">/* [code] */</script>
  605. _runScript: function (elem) {
  606. var fun, i = 0, n = 0,
  607. tags = elem.getElementsByTagName('script'),
  608. length = tags.length,
  609. script = [];
  610. for (; i < length; i ++) {
  611. if (tags[i].type === 'text/dialog') {
  612. script[n] = tags[i].innerHTML;
  613. n ++;
  614. };
  615. };
  616. if (script.length) {
  617. script = script.join('');
  618. fun = new Function(script);
  619. fun.call(this);
  620. };
  621. },
  622. // 自动切换定位类型
  623. _autoPositionType: function () {
  624. this[this.config.fixed ? '_setFixed' : '_setAbsolute']();/////////////
  625. },
  626. // 设置静止定位
  627. // IE6 Fixed @see: http://www.planeart.cn/?p=877
  628. _setFixed: (function () {
  629. _isIE6 && $(function () {
  630. var bg = 'backgroundAttachment';
  631. if (_$html.css(bg) !== 'fixed' && $('body').css(bg) !== 'fixed') {
  632. _$html.css({
  633. zoom: 1,// 避免偶尔出现body背景图片异常的情况
  634. backgroundImage: 'url(about:blank)',
  635. backgroundAttachment: 'fixed'
  636. });
  637. };
  638. });
  639. return function () {
  640. var $elem = this.DOM.wrap,
  641. style = $elem[0].style;
  642. if (_isIE6) {
  643. var left = parseInt($elem.css('left')),
  644. top = parseInt($elem.css('top')),
  645. sLeft = _$document.scrollLeft(),
  646. sTop = _$document.scrollTop(),
  647. txt = '(document.documentElement)';
  648. this._setAbsolute();
  649. style.setExpression('left', 'eval(' + txt + '.scrollLeft + '
  650. + (left - sLeft) + ') + "px"');
  651. style.setExpression('top', 'eval(' + txt + '.scrollTop + '
  652. + (top - sTop) + ') + "px"');
  653. } else {
  654. style.position = 'fixed';
  655. };
  656. };
  657. }()),
  658. // 设置绝对定位
  659. _setAbsolute: function () {
  660. var style = this.DOM.wrap[0].style;
  661. if (_isIE6) {
  662. style.removeExpression('left');
  663. style.removeExpression('top');
  664. };
  665. style.position = 'absolute';
  666. },
  667. // 按钮回调函数触发
  668. _click: function (name) {
  669. var that = this,
  670. fn = that._listeners[name] && that._listeners[name].callback;
  671. return typeof fn !== 'function' || fn.call(that, window) !== false ?
  672. that.close() : that;
  673. },
  674. // 重置位置与尺寸
  675. _reset: function (test) {
  676. var newSize,
  677. that = this,
  678. oldSize = that._winSize || _$window.width() * _$window.height(),
  679. elem = that._follow,
  680. width = that._width,
  681. height = that._height,
  682. left = that._left,
  683. top = that._top;
  684. if (test) {
  685. // IE6~7 window.onresize bug
  686. newSize = that._winSize = _$window.width() * _$window.height();
  687. if (oldSize === newSize) return;
  688. };
  689. if (width || height) that.size(width, height);
  690. if (elem) {
  691. that.follow(elem);
  692. } else if (left || top) {
  693. that.position(left, top);
  694. };
  695. },
  696. // 事件代理
  697. _addEvent: function () {
  698. var resizeTimer,
  699. that = this,
  700. config = that.config,
  701. isIE = 'CollectGarbage' in window,
  702. DOM = that.DOM;
  703. // 窗口调节事件
  704. that._winResize = function () {
  705. resizeTimer && clearTimeout(resizeTimer);
  706. resizeTimer = setTimeout(function () {
  707. that._reset(isIE);
  708. }, 40);
  709. };
  710. _$window.bind('resize', that._winResize);
  711. // 监听点击
  712. DOM.wrap
  713. .bind('click', function (event) {
  714. var target = event.target, callbackID;
  715. if (target.disabled) return false; // IE BUG
  716. if (target === DOM.close[0]) {
  717. that._click(config.cancelVal);
  718. return false;
  719. } else {
  720. callbackID = target[_expando + 'callback'];
  721. callbackID && that._click(callbackID);
  722. };
  723. that._ie6SelectFix();
  724. })
  725. .bind('mousedown', function () {
  726. that.zIndex();
  727. });
  728. },
  729. // 卸载事件代理
  730. _removeEvent: function () {
  731. var that = this,
  732. DOM = that.DOM;
  733. DOM.wrap.unbind();
  734. _$window.unbind('resize', that._winResize);
  735. }
  736. };
  737. artDialog.fn._init.prototype = artDialog.fn;
  738. $.fn.dialog = $.fn.artDialog = function () {
  739. var config = arguments;
  740. this[this.live ? 'live' : 'bind']('click', function () {
  741. artDialog.apply(this, config);
  742. return false;
  743. });
  744. return this;
  745. };
  746. /** 最顶层的对话框API */
  747. artDialog.focus = null;
  748. /** 获取某对话框API */
  749. artDialog.get = function (id) {
  750. return id === undefined
  751. ? artDialog.list
  752. : artDialog.list[id];
  753. };
  754. artDialog.list = {};
  755. // 全局快捷键
  756. _$document.bind('keydown', function (event) {
  757. var target = event.target,
  758. nodeName = target.nodeName,
  759. rinput = /^INPUT|TEXTAREA$/,
  760. api = artDialog.focus,
  761. keyCode = event.keyCode;
  762. if (!api || !api.config.esc || rinput.test(nodeName)) return;
  763. keyCode === 27 && api._click(api.config.cancelVal);
  764. });
  765. // 获取artDialog路径
  766. _path = window['_artDialog_path'] || (function (script, i, me) {
  767. for (i in script) {
  768. // 如果通过第三方脚本加载器加载本文件,请保证文件名含有"artDialog"字符
  769. if (script[i].src && script[i].src.indexOf('artDialog') !== -1) me = script[i];
  770. };
  771. _thisScript = me || script[script.length - 1];
  772. me = _thisScript.src.replace(/\\/g, '/');
  773. return me.lastIndexOf('/') < 0 ? '.' : me.substring(0, me.lastIndexOf('/'));
  774. }(document.getElementsByTagName('script')));
  775. // 无阻塞载入CSS (如"artDialog.js?skin=aero")
  776. _skin = _thisScript.src.split('skin=')[1];
  777. if (_skin) {
  778. var link = document.createElement('link');
  779. link.rel = 'stylesheet';
  780. link.href = _path + '/skins/' + _skin + '.css?' + artDialog.fn.version;
  781. _thisScript.parentNode.insertBefore(link, _thisScript);
  782. };
  783. // 触发浏览器预先缓存背景图片
  784. _$window.bind('load', function () {
  785. setTimeout(function () {
  786. if (_count) return;
  787. artDialog({left: '-9999em',time: 9,fixed: false,lock: false,focus: false});
  788. }, 150);
  789. });
  790. // 开启IE6 CSS背景图片缓存
  791. try {
  792. document.execCommand('BackgroundImageCache', false, true);
  793. } catch (e) {};
  794. // 使用uglifyjs压缩能够预先处理"+"号合并字符串
  795. // uglifyjs: http://marijnhaverbeke.nl/uglifyjs
  796. artDialog._templates =
  797. '<div class="aui_outer">'
  798. + '<table class="aui_border">'
  799. + '<tbody>'
  800. + '<tr>'
  801. + '<td class="aui_nw"></td>'
  802. + '<td class="aui_n"></td>'
  803. + '<td class="aui_ne"></td>'
  804. + '</tr>'
  805. + '<tr>'
  806. + '<td class="aui_w"></td>'
  807. + '<td class="aui_c">'
  808. + '<div class="aui_inner">'
  809. + '<table class="aui_dialog">'
  810. + '<tbody>'
  811. + '<tr>'
  812. + '<td colspan="2" class="aui_header">'
  813. + '<div class="aui_titleBar">'
  814. + '<div class="aui_title"></div>'
  815. + '<a class="aui_close" href="javascript:/*artDialog*/;">'
  816. + '\xd7'
  817. + '</a>'
  818. + '</div>'
  819. + '</td>'
  820. + '</tr>'
  821. + '<tr>'
  822. + '<td class="aui_icon">'
  823. + '<div class="aui_iconBg"></div>'
  824. + '</td>'
  825. + '<td class="aui_main">'
  826. + '<div class="aui_content"></div>'
  827. + '</td>'
  828. + '</tr>'
  829. + '<tr>'
  830. + '<td colspan="2" class="aui_footer">'
  831. + '<div class="aui_buttons"></div>'
  832. + '</td>'
  833. + '</tr>'
  834. + '</tbody>'
  835. + '</table>'
  836. + '</div>'
  837. + '</td>'
  838. + '<td class="aui_e"></td>'
  839. + '</tr>'
  840. + '<tr>'
  841. + '<td class="aui_sw"></td>'
  842. + '<td class="aui_s"></td>'
  843. + '<td class="aui_se"></td>'
  844. + '</tr>'
  845. + '</tbody>'
  846. + '</table>'
  847. +'</div>';
  848. /**
  849. * 默认配置
  850. */
  851. artDialog.defaults = {
  852. // 消息内容
  853. content: '<div class="aui_loading"><span>loading..</span></div>',
  854. title: '\u6d88\u606f', // 标题. 默认'消息'
  855. button: null, // 自定义按钮
  856. ok: null, // 确定按钮回调函数
  857. cancel: null, // 取消按钮回调函数
  858. init: null, // 对话框初始化后执行的函数
  859. close: null, // 对话框关闭前执行的函数
  860. okVal: '\u786E\u5B9A', // 确定按钮文本. 默认'确定'
  861. cancelVal: '\u53D6\u6D88', // 取消按钮文本. 默认'取消'
  862. width: 'auto', // 内容宽度
  863. height: 'auto', // 内容高度
  864. minWidth: 96, // 最小宽度限制
  865. minHeight: 32, // 最小高度限制
  866. padding: '20px 25px', // 内容与边界填充距离
  867. skin: '', // 皮肤名(预留接口,尚未实现)
  868. icon: null, // 消息图标名称
  869. time: null, // 自动关闭时间
  870. esc: true, // 是否支持Esc键关闭
  871. focus: true, // 是否支持对话框按钮自动聚焦
  872. show: true, // 初始化后是否显示对话框
  873. follow: null, // 跟随某元素(即让对话框在元素附近弹出)
  874. path: _path, // artDialog路径
  875. lock: false, // 是否锁屏
  876. background: '#000', // 遮罩颜色
  877. opacity: .7, // 遮罩透明度
  878. duration: 300, // 遮罩透明度渐变动画速度
  879. fixed: false, // 是否静止定位
  880. left: '50%', // X轴坐标
  881. top: '38.2%', // Y轴坐标
  882. zIndex: 1987, // 对话框叠加高度值(重要:此值不能超过浏览器最大限制)
  883. resize: true, // 是否允许用户调节尺寸
  884. drag: true // 是否允许用户拖动位置
  885. };
  886. window.artDialog = $.dialog = $.artDialog = artDialog;
  887. }(this.art || this.jQuery && (this.art = jQuery), this));
  888. //------------------------------------------------
  889. // 对话框模块-拖拽支持(可选外置模块)
  890. //------------------------------------------------
  891. ;(function ($) {
  892. var _dragEvent, _use,
  893. _$window = $(window),
  894. _$document = $(document),
  895. _elem = document.documentElement,
  896. _isIE6 = !('minWidth' in _elem.style),
  897. _isLosecapture = 'onlosecapture' in _elem,
  898. _isSetCapture = 'setCapture' in _elem;
  899. // 拖拽事件
  900. artDialog.dragEvent = function () {
  901. var that = this,
  902. proxy = function (name) {
  903. var fn = that[name];
  904. that[name] = function () {
  905. return fn.apply(that, arguments);
  906. };
  907. };
  908. proxy('start');
  909. proxy('move');
  910. proxy('end');
  911. };
  912. artDialog.dragEvent.prototype = {
  913. // 开始拖拽
  914. onstart: $.noop,
  915. start: function (event) {
  916. _$document
  917. .bind('mousemove', this.move)
  918. .bind('mouseup', this.end);
  919. this._sClientX = event.clientX;
  920. this._sClientY = event.clientY;
  921. this.onstart(event.clientX, event.clientY);
  922. return false;
  923. },
  924. // 正在拖拽
  925. onmove: $.noop,
  926. move: function (event) {
  927. this._mClientX = event.clientX;
  928. this._mClientY = event.clientY;
  929. this.onmove(
  930. event.clientX - this._sClientX,
  931. event.clientY - this._sClientY
  932. );
  933. return false;
  934. },
  935. // 结束拖拽
  936. onend: $.noop,
  937. end: function (event) {
  938. _$document
  939. .unbind('mousemove', this.move)
  940. .unbind('mouseup', this.end);
  941. this.onend(event.clientX, event.clientY);
  942. return false;
  943. }
  944. };
  945. _use = function (event) {
  946. var limit, startWidth, startHeight, startLeft, startTop, isResize,
  947. api = artDialog.focus,
  948. //config = api.config,
  949. DOM = api.DOM,
  950. wrap = DOM.wrap,
  951. title = DOM.title,
  952. main = DOM.main;
  953. // 清除文本选择
  954. var clsSelect = 'getSelection' in window ? function () {
  955. window.getSelection().removeAllRanges();
  956. } : function () {
  957. try {
  958. document.selection.empty();
  959. } catch (e) {};
  960. };
  961. // 对话框准备拖动
  962. _dragEvent.onstart = function (x, y) {
  963. if (isResize) {
  964. startWidth = main[0].offsetWidth;
  965. startHeight = main[0].offsetHeight;
  966. } else {
  967. startLeft = wrap[0].offsetLeft;
  968. startTop = wrap[0].offsetTop;
  969. };
  970. _$document.bind('dblclick', _dragEvent.end);
  971. !_isIE6 && _isLosecapture ?
  972. title.bind('losecapture', _dragEvent.end) :
  973. _$window.bind('blur', _dragEvent.end);
  974. _isSetCapture && title[0].setCapture();
  975. wrap.addClass('aui_state_drag');
  976. api.focus();
  977. };
  978. // 对话框拖动进行中
  979. _dragEvent.onmove = function (x, y) {
  980. if (isResize) {
  981. var wrapStyle = wrap[0].style,
  982. style = main[0].style,
  983. width = x + startWidth,
  984. height = y + startHeight;
  985. wrapStyle.width = 'auto';
  986. style.width = Math.max(0, width) + 'px';
  987. wrapStyle.width = wrap[0].offsetWidth + 'px';
  988. style.height = Math.max(0, height) + 'px';
  989. } else {
  990. var style = wrap[0].style,
  991. left = Math.max(limit.minX, Math.min(limit.maxX, x + startLeft)),
  992. top = Math.max(limit.minY, Math.min(limit.maxY, y + startTop));
  993. style.left = left + 'px';
  994. style.top = top + 'px';
  995. };
  996. clsSelect();
  997. api._ie6SelectFix();
  998. };
  999. // 对话框拖动结束
  1000. _dragEvent.onend = function (x, y) {
  1001. _$document.unbind('dblclick', _dragEvent.end);
  1002. !_isIE6 && _isLosecapture ?
  1003. title.unbind('losecapture', _dragEvent.end) :
  1004. _$window.unbind('blur', _dragEvent.end);
  1005. _isSetCapture && title[0].releaseCapture();
  1006. _isIE6 && !api.closed && api._autoPositionType();
  1007. wrap.removeClass('aui_state_drag');
  1008. };
  1009. isResize = event.target === DOM.se[0] ? true : false;
  1010. limit = (function () {
  1011. var maxX, maxY,
  1012. wrap = api.DOM.wrap[0],
  1013. fixed = wrap.style.position === 'fixed',
  1014. ow = wrap.offsetWidth,
  1015. oh = wrap.offsetHeight,
  1016. ww = _$window.width(),
  1017. wh = _$window.height(),
  1018. dl = fixed ? 0 : _$document.scrollLeft(),
  1019. dt = fixed ? 0 : _$document.scrollTop(),
  1020. // 坐标最大值限制
  1021. maxX = ww - ow + dl;
  1022. maxY = wh - oh + dt;
  1023. return {
  1024. minX: dl,
  1025. minY: dt,
  1026. maxX: maxX,
  1027. maxY: maxY
  1028. };
  1029. })();
  1030. _dragEvent.start(event);
  1031. };
  1032. // 代理 mousedown 事件触发对话框拖动
  1033. _$document.bind('mousedown', function (event) {
  1034. var api = artDialog.focus;
  1035. if (!api) return;
  1036. var target = event.target,
  1037. config = api.config,
  1038. DOM = api.DOM;
  1039. if (config.drag !== false && target === DOM.title[0]
  1040. || config.resize !== false && target === DOM.se[0]) {
  1041. _dragEvent = _dragEvent || new artDialog.dragEvent();
  1042. _use(event);
  1043. return false;// 防止firefox与chrome滚屏
  1044. };
  1045. });
  1046. })(this.art || this.jQuery && (this.art = jQuery));