封装方法到对象(javascript)
- /*!
- * artDialog 5
- * Date: 2012-03-21
- * http://code.google.com/p/artdialog/
- * (c) 2009-2012 TangBin, http://www.planeArt.cn
- *
- * This is licensed under the GNU LGPL, version 2.1 or later.
- * For details, see: http://creativecommons.org/licenses/LGPL/2.1/
- */
- ;(function (window, undefined) {
- var $ = window.art = function (selector, context) {
- return new $.fn.constructor(selector, context);
- },
- quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/,
- rclass = /[\n\t]/g;
- if (window.$ === undefined) {
- window.$ = $;
- };
- $.fn = $.prototype = {
- constructor: function (selector, context) {
- var match, elem;
- context = context || document;
- if (!selector) {
- return this;
- };
- if (selector.nodeType) {
- this[0] = selector;
- return this;
- };
- if (typeof selector === 'string') {
- match = quickExpr.exec(selector);
- if (match && match[2]) {
- elem = context.getElementById(match[2]);
- if (elem && elem.parentNode) this[0] = elem;
- return this;
- };
- };
- this[0] = selector;
- return this;
- },
- /**
- * 判断样式类是否存在
- * @param {String} 名称
- * @return {Boolean}
- */
- hasClass: function (name) {
- var className = ' ' + name + ' ';
- if ((' ' + this[0].className + ' ').replace(rclass, ' ').indexOf(className) > -1) {
- return true;
- };
- return false;
- },
- /**
- * 添加样式类
- * @param {String} 名称
- */
- addClass: function (name) {
- if (!this.hasClass(name)) {
- this[0].className += ' ' + name;
- };
- return this;
- },
- /**
- * 移除样式类
- * @param {String} 名称
- */
- removeClass: function (name) {
- var elem = this[0];
- if (!name) {
- elem.className = '';
- } else
- if (this.hasClass(name)) {
- elem.className = elem.className.replace(name, ' ');
- };
- return this;
- },
- /**
- * 读写样式<br />
- * css(name) 访问第一个匹配元素的样式属性<br />
- * css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性<br />
- * css(name, value) 在所有匹配的元素中,设置一个样式属性的值<br />
- */
- css: function (name, value) {
- var i, elem = this[0], obj = arguments[0];
- if (typeof name === 'string') {
- if (value === undefined) {
- return $.css(elem, name);
- } else {
- elem.style[name] = value;
- };
- } else {
- for (i in obj) {
- elem.style[i] = obj[i];
- };
- };
- return this;
- },
- /** 显示元素 */
- show: function () {
- return this.css('display', 'block');
- },
- /** 隐藏元素 */
- hide: function () {
- return this.css('display', 'none');
- },
- /**
- * 获取相对文档的坐标
- * @return {Object} 返回left、top的数值
- */
- offset: function () {
- var elem = this[0],
- box = elem.getBoundingClientRect(),
- doc = elem.ownerDocument,
- body = doc.body,
- docElem = doc.documentElement,
- clientTop = docElem.clientTop || body.clientTop || 0,
- clientLeft = docElem.clientLeft || body.clientLeft || 0,
- top = box.top + (self.pageYOffset || docElem.scrollTop) - clientTop,
- left = box.left + (self.pageXOffset || docElem.scrollLeft) - clientLeft;
- return {
- left: left,
- top: top
- };
- },
- /**
- * 读写HTML - (不支持文本框)
- * @param {String} 内容
- */
- html: function (content) {
- var elem = this[0];
- if (content === undefined) return elem.innerHTML;
- $.cleanData(elem.getElementsByTagName('*'));
- elem.innerHTML = content;
- return this;
- },
- /**
- * 移除节点
- */
- remove: function () {
- var elem = this[0];
- $.cleanData(elem.getElementsByTagName('*'));
- $.cleanData([elem]);
- elem.parentNode.removeChild(elem);
- return this;
- },
- /**
- * 事件绑定
- * @param {String} 类型
- * @param {Function} 要绑定的函数
- */
- bind: function (type, callback) {
- $.event.add(this[0], type, callback);
- return this;
- },
- /**
- * 移除事件
- * @param {String} 类型
- * @param {Function} 要卸载的函数
- */
- unbind: function(type, callback) {
- $.event.remove(this[0], type, callback);
- return this;
- }
- };
- $.fn.constructor.prototype = $.fn;
- /** 检测window */
- $.isWindow = function (obj) {
- return obj && typeof obj === 'object' && 'setInterval' in obj;
- };
- /**
- * 搜索子元素
- * 注意:只支持nodeName或.className的形式,并且只返回第一个元素
- * @param {String}
- */
- $.fn.find = function (expr) {
- var value, elem = this[0],
- className = expr.split('.')[1];
- if (className) {
- if (document.getElementsByClassName) {
- value = elem.getElementsByClassName(className);
- } else {
- value = getElementsByClassName(className, elem);
- };
- } else {
- value = elem.getElementsByTagName(expr);
- };
- return $(value[0]);
- };
- function getElementsByClassName (className, node, tag) {
- node = node || document;
- tag = tag || '*';
- var i = 0,
- j = 0,
- classElements = [],
- els = node.getElementsByTagName(tag),
- elsLen = els.length,
- pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
- for (; i < elsLen; i ++) {
- if (pattern.test(els[i].className)) {
- classElements[j] = els[i];
- j ++;
- };
- };
- return classElements;
- };
- /**
- * 遍历
- * @param {Object}
- * @param {Function}
- */
- $.each = function (obj, callback) {
- var name, i = 0,
- length = obj.length,
- isObj = length === undefined;
- if (isObj) {
- for (name in obj) {
- if (callback.call(obj[name], name, obj[name]) === false) {
- break;
- };
- };
- } else {
- for (
- var value = obj[0];
- i < length && callback.call(value, i, value) !== false;
- value = obj[++i]
- ) {};
- };
- return obj;
- };
- /**
- * 读写缓存
- * @param {HTMLElement} 元素
- * @param {String} 缓存名称
- * @param {Any} 数据
- * @return {Any} 如果无参数data则返回缓存数据
- */
- $.data = function (elem, name, data) {
- var cache = $.cache,
- id = uuid(elem);
- if (name === undefined) {
- return cache[id];
- };
- if (!cache[id]) {
- cache[id] = {};
- };
- if (data !== undefined) {
- cache[id][name] = data;
- };
- return cache[id][name];
- };
- /**
- * 删除缓存
- * @param {HTMLElement} 元素
- * @param {String} 缓存名称
- */
- $.removeData = function (elem, name) {
- var empty = true,
- expando = $.expando,
- cache = $.cache,
- id = uuid(elem),
- thisCache = id && cache[id];
- if (!thisCache) {
- return;
- };
- if (name) {
- delete thisCache[name];
- for (var n in thisCache) {
- empty = false;
- };
- if (empty) {
- delete $.cache[id];
- };
- } else {
- delete cache[id];
- if (elem.removeAttribute) {
- elem.removeAttribute(expando);
- } else {
- elem[expando] = null;
- };
- };
- };
- $.uuid = 0;
- $.cache = {};
- $.expando = '@cache' + + new Date;
- // 标记元素唯一身份
- function uuid (elem) {
- var expando = $.expando,
- id = elem === window ? 0 : elem[expando];
- if (id === undefined) elem[expando] = id = ++ $.uuid;
- return id;
- };
- /**
- * 事件机制
- * @namespace
- * @requires [$.data, $.removeData]
- */
- $.event = {
- /**
- * 添加事件
- * @param {HTMLElement} 元素
- * @param {String} 事件类型
- * @param {Function} 要添加的函数
- */
- add: function (elem, type, callback) {
- var cache, listeners,
- that = $.event,
- data = $.data(elem, '@events') || $.data(elem, '@events', {});
- cache = data[type] = data[type] || {};
- listeners = cache.listeners = cache.listeners || [];
- listeners.push(callback);
- if (!cache.handler) {
- cache.elem = elem;
- cache.handler = that.handler(cache);
- elem.addEventListener
- ? elem.addEventListener(type, cache.handler, false)
- : elem.attachEvent('on' + type, cache.handler);
- };
- },
- /**
- * 卸载事件
- * @param {HTMLElement} 元素
- * @param {String} 事件类型
- * @param {Function} 要卸载的函数
- */
- remove: function (elem, type, callback) {
- var i, cache, listeners,
- that = $.event,
- empty = true,
- data = $.data(elem, '@events');
- if (!data) {
- return;
- };
- if (!type) {
- for (i in data) that.remove(elem, i);
- return;
- };
- cache = data[type];
- if (!cache) {
- return;
- };
- listeners = cache.listeners;
- if (callback) {
- for (i = 0; i < listeners.length; i ++) {
- listeners[i] === callback && listeners.splice(i--, 1);
- };
- } else {
- cache.listeners = [];
- };
- if (cache.listeners.length === 0) {
- elem.removeEventListener
- ? elem.removeEventListener(type, cache.handler, false)
- : elem.detachEvent('on' + type, cache.handler);
- delete data[type];
- cache = $.data(elem, '@events');
- for (var n in cache) {
- empty = false;
- };
- if (empty) {
- $.removeData(elem, '@events');
- };
- };
- },
- /** @inner 事件句柄 */
- handler: function (cache) {
- return function (event) {
- event = $.event.fix(event || window.event);
- for (var i = 0, list = cache.listeners, fn; fn = list[i++];) {
- if (fn.call(cache.elem, event) === false) {
- event.preventDefault();
- event.stopPropagation();
- };
- };
- };
- },
- /** @inner Event对象兼容处理 */
- fix: function (event) {
- if (event.target) {
- return event;
- };
- var eventObj = {
- target: event.srcElement || document,
- preventDefault: function () {event.returnValue = false},
- stopPropagation: function () {event.cancelBubble = true}
- };
- // IE6/7/8 在原生window.event对象写入数据会导致内存无法回收,应当采用拷贝
- for (var i in event) {
- eventObj[i] = event[i];
- }
- return eventObj;
- }
- };
- /**
- * 清理元素集的事件与缓存
- * @requires [$.removeData, $.event]
- * @param {HTMLCollection} 元素集
- */
- $.cleanData = function (elems) {
- var i = 0, elem,
- len = elems.length,
- removeEvent = $.event.remove,
- removeData = $.removeData;
- for (; i < len; i ++) {
- elem = elems[i];
- removeEvent(elem);
- removeData(elem);
- };
- };
- // 获取css
- $.css = 'defaultView' in document && 'getComputedStyle' in document.defaultView ?
- function (elem, name) {
- return document.defaultView.getComputedStyle(elem, false)[name];
- } :
- function (elem, name) {
- return elem.currentStyle[name] || '';
- };
- /**
- * 获取滚动条位置 - [不支持写入]
- * $.fn.scrollLeft, $.fn.scrollTop
- * @example 获取文档垂直滚动条:$(document).scrollTop()
- * @return {Number} 返回滚动条位置
- */
- $.each(['Left', 'Top'], function (i, name) {
- var method = 'scroll' + name;
- $.fn[method] = function () {
- var elem = this[0], win;
- win = getWindow(elem);
- return win ?
- ('pageXOffset' in win) ?
- win[i ? 'pageYOffset' : 'pageXOffset'] :
- win.document.documentElement[method] || win.document.body[method] :
- elem[method];
- };
- });
- function getWindow (elem) {
- return $.isWindow(elem) ?
- elem :
- elem.nodeType === 9 ?
- elem.defaultView || elem.parentWindow :
- false;
- };
- /**
- * 获取窗口或文档尺寸 - [只支持window与document读取]
- * @example
- 获取文档宽度:$(document).width()
- 获取可视范围:$(window).width()
- * @return {Number}
- */
- $.each(['Height', 'Width'], function (i, name) {
- var type = name.toLowerCase();
- $.fn[type] = function (size) {
- var elem = this[0];
- if (!elem) {
- return size == null ? null : this;
- };
- return $.isWindow(elem) ?
- elem.document.documentElement['client' + name] || elem.document.body['client' + name] :
- (elem.nodeType === 9) ?
- Math.max(
- elem.documentElement['client' + name],
- elem.body['scroll' + name], elem.documentElement['scroll' + name],
- elem.body['offset' + name], elem.documentElement['offset' + name]
- ) : null;
- };
- });
- return $}(window));
- ;(function ($, window, undefined) {
- // artDialog 只支持 xhtml 1.0 或者以上的 DOCTYPE 声明
- if (document.compatMode === 'BackCompat') {
- throw new Error('artDialog: Document types require more than xhtml1.0');
- };
- var _singleton,
- _count = 0,
- _expando = 'artDialog' + + new Date,
- _isIE6 = window.VBArray && !window.XMLHttpRequest,
- _isMobile = 'createTouch' in document && !('onmousemove' in document)
- || /(iPhone|iPad|iPod)/i.test(navigator.userAgent),
- _isFixed = !_isIE6 && !_isMobile;
- var artDialog = function (config, ok, cancel) {
- config = config || {};
- if (typeof config === 'string' || config.nodeType === 1) {
- config = {content: config, fixed: !_isMobile};
- };
- var api, defaults = artDialog.defaults;
- var elem = config.follow = this.nodeType === 1 && this || config.follow;
- // 合并默认配置
- for (var i in defaults) {
- if (config[i] === undefined) {
- config[i] = defaults[i];
- };
- };
- config.id = elem && elem[_expando + 'follow'] || config.id || _expando + _count;
- api = artDialog.list[config.id];
- if (api) {
- if (elem) {
- api.follow(elem)
- };
- api.zIndex().focus();
- return api;
- };
- // 目前主流移动设备对fixed支持不好
- if (!_isFixed) {
- config.fixed = false;
- };
- // !$.isArray(config.button)
- if (!config.button || !config.button.push) {
- config.button = [];
- };
- // 确定按钮
- if (ok !== undefined) {
- config.ok = ok;
- };
- if (config.ok) {
- config.button.push({
- id: 'ok',
- value: config.okValue,
- callback: config.ok,
- focus: true
- });
- };
- // 取消按钮
- if (cancel !== undefined) {
- config.cancel = cancel;
- };
- if (config.cancel) {
- config.button.push({
- id: 'cancel',
- value: config.cancelValue,
- callback: config.cancel
- });
- };
- // 更新 zIndex 全局配置
- artDialog.defaults.zIndex = config.zIndex;
- _count ++;
- return artDialog.list[config.id] = _singleton ?
- _singleton.constructor(config) : new artDialog.fn.constructor(config);
- };
- artDialog.version = '5.0';
- artDialog.fn = artDialog.prototype = {
- /** @inner */
- constructor: function (config) {
- var dom;
- this.closed = false;
- this.config = config;
- this.dom = dom = this.dom || this._getDom();
- config.skin && dom.wrap.addClass(config.skin);
- dom.wrap.css('position', config.fixed ? 'fixed' : 'absolute');
- dom.close[config.cancel === false ? 'hide' : 'show']();
- dom.content.css('padding', config.padding);
- this.button.apply(this, config.button);
- this.title(config.title)
- .content(config.content)
- .size(config.width, config.height)
- .time(config.time);
- config.follow
- ? this.follow(config.follow)
- : this.position();
- this.zIndex();
- config.lock && this.lock();
- this._addEvent();
- this[config.visible ? 'visible' : 'hidden']().focus();
- _singleton = null;
- config.initialize && config.initialize.call(this);
- return this;
- },
- /**
- * 设置内容
- * @param {String, HTMLElement, Object} 内容 (可选)
- */
- content: function (message) {
- var prev, next, parent, display,
- that = this,
- $content = this.dom.content,
- content = $content[0];
- if (this._elemBack) {
- this._elemBack();
- delete this._elemBack;
- };
- if (typeof message === 'string') {
- $content.html(message);
- } else
- if (message && message.nodeType === 1) {
- // 让传入的元素在对话框关闭后可以返回到原来的地方
- display = message.style.display;
- prev = message.previousSibling;
- next = message.nextSibling;
- parent = message.parentNode;
- this._elemBack = function () {
- if (prev && prev.parentNode) {
- prev.parentNode.insertBefore(message, prev.nextSibling);
- } else if (next && next.parentNode) {
- next.parentNode.insertBefore(message, next);
- } else if (parent) {
- parent.appendChild(message);
- };
- message.style.display = display;
- that._elemBack = null;
- };
- $content.html('');
- content.appendChild(message);
- $(message).show();
- };
- return this.position();
- },
- /**
- * 设置标题
- * @param {String, Boolean} 标题内容. 为 false 则隐藏标题栏
- */
- title: function (content) {
- var dom = this.dom,
- outer = dom.outer,
- $title = dom.title,
- className = 'd-state-noTitle';
- if (content === false) {
- $title.hide().html('');
- outer.addClass(className);
- } else {
- $title.show().html(content);
- outer.removeClass(className);
- };
- return this;
- },
- /** @inner 位置居中 */
- position: function () {
- var dom = this.dom,
- wrap = dom.wrap[0],
- $window = dom.window,
- $document = dom.document,
- fixed = this.config.fixed,
- dl = fixed ? 0 : $document.scrollLeft(),
- dt = fixed ? 0 : $document.scrollTop(),
- ww = $window.width(),
- wh = $window.height(),
- ow = wrap.offsetWidth,
- oh = wrap.offsetHeight,
- left = (ww - ow) / 2 + dl,
- top = top = (oh < 4 * wh / 7 ? wh * 0.382 - oh / 2 : (wh - oh) / 2) + dt,
- style = wrap.style;
- style.left = Math.max(left, dl) + 'px';
- style.top = Math.max(top, dt) + 'px';
- return this;
- },
- /**
- * 尺寸
- * @param {Number, String} 宽度
- * @param {Number, String} 高度
- */
- size: function (width, height) {
- var style = this.dom.main[0].style;
- if (typeof width === 'number') {
- width = width + 'px';
- };
- if (typeof height === 'number') {
- height = height + 'px';
- };
- style.width = width;
- style.height = height;
- return this;
- },
- /**
- * 跟随元素
- * @param {HTMLElement}
- */
- follow: function (elem) {
- var $elem = $(elem),
- config = this.config;
- // 隐藏元素不可用
- if (!elem || !elem.offsetWidth && !elem.offsetHeight) {
- return this.position(this._left, this._top);
- };
- var fixed = config.fixed,
- expando = _expando + 'follow',
- dom = this.dom,
- $window = dom.window,
- $document = dom.document,
- winWidth = $window.width(),
- winHeight = $window.height(),
- docLeft = $document.scrollLeft(),
- docTop = $document.scrollTop(),
- offset = $elem.offset(),
- width = elem.offsetWidth,
- height = elem.offsetHeight,
- left = fixed ? offset.left - docLeft : offset.left,
- top = fixed ? offset.top - docTop : offset.top,
- wrap = this.dom.wrap[0],
- style = wrap.style,
- wrapWidth = wrap.offsetWidth,
- wrapHeight = wrap.offsetHeight,
- setLeft = left - (wrapWidth - width) / 2,
- setTop = top + height,
- dl = fixed ? 0 : docLeft,
- dt = fixed ? 0 : docTop;
- setLeft = setLeft < dl ? left :
- (setLeft + wrapWidth > winWidth) && (left - wrapWidth > dl)
- ? left - wrapWidth + width
- : setLeft;
- setTop = (setTop + wrapHeight > winHeight + dt)
- && (top - wrapHeight > dt)
- ? top - wrapHeight
- : setTop;
- style.left = setLeft + 'px';
- style.top = setTop + 'px';
- this._follow && this._follow.removeAttribute(expando);
- this._follow = elem;
- elem[expando] = config.id;
- return this;
- },
- /**
- * 自定义按钮
- * @example
- button({
- value: 'login',
- callback: function () {},
- disabled: false,
- focus: true
- }, .., ..)
- */
- button: function () {
- var dom = this.dom,
- $buttons = dom.buttons,
- elem = $buttons[0],
- strongButton = 'd-state-highlight',
- listeners = this._listeners = this._listeners || {},
- ags = [].slice.call(arguments);
- var i = 0, val, value, id, isNewButton, button;
- for (; i < ags.length; i ++) {
- val = ags[i];
- value = val.value;
- id = val.id || value;
- isNewButton = !listeners[id];
- button = !isNewButton ? listeners[id].elem : document.createElement('input');
- button.type = 'button';
- button.className = 'd-button';
- if (!listeners[id]) {
- listeners[id] = {};
- };
- if (value) {
- button.value = value;
- };
- if (val.width) {
- button.style.width = val.width;
- };
- if (val.callback) {
- listeners[id].callback = val.callback;
- };
- if (val.focus) {
- this._focus && this._focus.removeClass(strongButton);
- this._focus = $(button).addClass(strongButton);
- this.focus();
- };
- button[_expando + 'callback'] = id;
- button.disabled = !!val.disabled;
- if (isNewButton) {
- listeners[id].elem = button;
- elem.appendChild(button);
- };
- };
- $buttons[0].style.display = ags.length ? '' : 'none';
- return this;
- },
- /** 显示对话框 */
- visible: function () {
- //this.dom.wrap.show();
- this.dom.wrap.css('visibility', 'visible');
- this.dom.outer.addClass('d-state-visible');
- if (this._isLock) {
- this._lockMask.show();
- };
- return this;
- },
- /** 隐藏对话框 */
- hidden: function () {
- //this.dom.wrap.hide();
- this.dom.wrap.css('visibility', 'hidden');
- this.dom.outer.removeClass('d-state-visible');
- if (this._isLock) {
- this._lockMask.hide();
- };
- return this;
- },
- /** 关闭对话框 */
- close: function () {
- if (this.closed) {
- return this;
- };
- var dom = this.dom,
- $wrap = dom.wrap,
- list = artDialog.list,
- beforeunload = this.config.beforeunload,
- follow = this.config.follow;
- if (beforeunload && beforeunload.call(this) === false) {
- return this;
- };
- if (artDialog.focus === this) {
- artDialog.focus = null;
- };
- if (follow) {
- follow.removeAttribute(_expando + 'follow');
- };
- if (this._elemBack) {
- this._elemBack();
- };
- this.time();
- this.unlock();
- this._removeEvent();
- delete list[this.config.id];
- if (_singleton) {
- $wrap.remove();
- // 使用单例模式
- } else {
- _singleton = this;
- dom.title.html('');
- dom.content.html('');
- dom.buttons.html('');
- $wrap[0].className = $wrap[0].style.cssText = '';
- dom.outer[0].className = 'd-outer';
- $wrap.css({
- left: 0,
- top: 0,
- position: _isFixed ? 'fixed' : 'absolute'
- });
- for (var i in this) {
- if (this.hasOwnProperty(i) && i !== 'dom') {
- delete this[i];
- };
- };
- this.hidden();
- };
- this.closed = true;
- return this;
- },
- /**
- * 定时关闭
- * @param {Number} 单位毫秒, 无参数则停止计时器
- */
- time: function (time) {
- var that = this,
- timer = this._timer;
- timer && clearTimeout(timer);
- if (time) {
- this._timer = setTimeout(function(){
- that._click('cancel');
- }, time);
- };
- return this;
- },
- /** @inner 设置焦点 */
- focus: function () {
- if (this.config.focus) {
- //setTimeout(function () {
- try {
- var elem = this._focus && this._focus[0] || this.dom.close[0];
- elem && elem.focus();
- // IE对不可见元素设置焦点会报错
- } catch (e) {};
- //}, 0);
- };
- return this;
- },
- /** 置顶对话框 */
- zIndex: function () {
- var dom = this.dom,
- top = artDialog.focus,
- index = artDialog.defaults.zIndex ++;
- // 设置叠加高度
- dom.wrap.css('zIndex', index);
- this._lockMask && this._lockMask.css('zIndex', index - 1);
- // 设置最高层的样式
- top && top.dom.outer.removeClass('d-state-focus');
- artDialog.focus = this;
- dom.outer.addClass('d-state-focus');
- return this;
- },
- /** 设置屏锁 */
- lock: function () {
- if (this._isLock) {
- return this;
- };
- var that = this,
- config = this.config,
- dom = this.dom,
- div = document.createElement('div'),
- $div = $(div),
- index = artDialog.defaults.zIndex - 1;
- this.zIndex();
- dom.outer.addClass('d-state-lock');
- $div.css({
- zIndex: index,
- position: 'fixed',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- overflow: 'hidden'
- }).addClass('d-mask');
- if (!_isFixed) {
- $div.css({
- position: 'absolute',
- width: $(window).width() + 'px',
- height: $(document).height() + 'px'
- });
- };
- $div.bind('click', function () {
- that._reset();
- }).bind('dblclick', function () {
- that._click('cancel');
- });
- document.body.appendChild(div);
- this._lockMask = $div;
- this._isLock = true;
- return this;
- },
- /** 解开屏锁 */
- unlock: function () {
- if (!this._isLock) {
- return this;
- };
- this._lockMask.unbind();
- this._lockMask.hide();
- this._lockMask.remove();
- this.dom.outer.removeClass('d-state-lock');
- this._isLock = false;
- return this;
- },
- // 获取元素
- _getDom: function () {
- var body = document.body;
- if (!body) {
- throw new Error('artDialog: "documents.body" not ready');
- };
- var wrap = document.createElement('div');
- wrap.style.cssText = 'position:absolute;left:0;top:0';
- wrap.innerHTML = artDialog._templates;
- body.insertBefore(wrap, body.firstChild);
- var name,
- i = 0,
- dom = {},
- els = wrap.getElementsByTagName('*'),
- elsLen = els.length;
- for (; i < elsLen; i ++) {
- name = els[i].className.split('d-')[1];
- if (name) {
- dom[name] = $(els[i]);
- };
- };
- dom.window = $(window);
- dom.document = $(document);
- dom.wrap = $(wrap);
- return dom;
- },
- // 按钮回调函数触发
- _click: function (id) {
- var fn = this._listeners[id] && this._listeners[id].callback;
- return typeof fn !== 'function' || fn.call(this) !== false ?
- this.close() : this;
- },
- // 重置位置
- _reset: function () {
- var elem = this.config.follow;
- elem ? this.follow(elem) : this.position();
- },
- // 事件代理
- _addEvent: function () {
- var that = this,
- dom = this.dom;
- // 监听点击
- dom.wrap
- .bind('click', function (event) {
- var target = event.target, callbackID;
- // IE BUG
- if (target.disabled) {
- return false;
- };
- if (target === dom.close[0]) {
- that._click('cancel');
- return false;
- } else {
- callbackID = target[_expando + 'callback'];
- callbackID && that._click(callbackID);
- };
- })
- .bind('mousedown', function () {
- that.zIndex();
- });
- },
- // 卸载事件代理
- _removeEvent: function () {
- this.dom.wrap.unbind();
- }
- };
- artDialog.fn.constructor.prototype = artDialog.fn;
- $.fn.dialog = $.fn.artDialog = function () {
- var config = arguments;
- this[this.live ? 'live' : 'bind']('click', function () {
- artDialog.apply(this, config);
- return false;
- });
- return this;
- };
- /** 最顶层的对话框API */
- artDialog.focus = null;
- /**
- * 根据 ID 获取某对话框 API
- * @param {String} 对话框 ID
- * @return {Object} 对话框 API (实例)
- */
- artDialog.get = function (id) {
- return id === undefined
- ? artDialog.list
- : artDialog.list[id];
- };
- artDialog.list = {};
- // 全局快捷键
- $(document).bind('keydown', function (event) {
- var target = event.target,
- nodeName = target.nodeName,
- rinput = /^input|textarea$/i,
- api = artDialog.focus,
- keyCode = event.keyCode;
- if (!api || !api.config.esc || rinput.test(nodeName) && target.type !== 'button') {
- return;
- };
- // ESC
- keyCode === 27 && api._click('cancel');
- });
- // 浏览器窗口改变后重置对话框位置
- $(window).bind('resize', function () {
- var dialogs = artDialog.list;
- for (var id in dialogs) {
- dialogs[id]._reset();
- };
- });
- // XHTML 模板
- // 使用 uglifyjs 压缩能够预先处理"+"号合并字符串
- // @see http://marijnhaverbeke.nl/uglifyjs
- artDialog._templates =
- '<div class="d-outer">'
- + '<table class="d-border">'
- + '<tbody>'
- + '<tr>'
- + '<td class="d-nw"></td>'
- + '<td class="d-n"></td>'
- + '<td class="d-ne"></td>'
- + '</tr>'
- + '<tr>'
- + '<td class="d-w"></td>'
- + '<td class="d-c">'
- + '<div class="d-inner">'
- + '<table class="d-dialog">'
- + '<tbody>'
- + '<tr>'
- + '<td class="d-header">'
- + '<div class="d-titleBar">'
- + '<div class="d-title"></div>'
- + '<a class="d-close" href="javascript:/*artDialog*/;">'
- + '\xd7'
- + '</a>'
- + '</div>'
- + '</td>'
- + '</tr>'
- + '<tr>'
- + '<td class="d-main">'
- + '<div class="d-content"></div>'
- + '</td>'
- + '</tr>'
- + '<tr>'
- + '<td class="d-footer">'
- + '<div class="d-buttons"></div>'
- + '</td>'
- + '</tr>'
- + '</tbody>'
- + '</table>'
- + '</div>'
- + '</td>'
- + '<td class="d-e"></td>'
- + '</tr>'
- + '<tr>'
- + '<td class="d-sw"></td>'
- + '<td class="d-s"></td>'
- + '<td class="d-se"></td>'
- + '</tr>'
- + '</tbody>'
- + '</table>'
- +'</div>';
- /**
- * 默认配置
- */
- artDialog.defaults = {
- // 消息内容
- content: '<div class="d-loading"><span>loading..</span></div>',
- // 标题
- title: 'message',
- // 自定义按钮
- button: null,
- // 确定按钮回调函数
- ok: null,
- // 取消按钮回调函数
- cancel: null,
- // 对话框初始化后执行的函数
- initialize: null,
- // 对话框关闭前执行的函数
- beforeunload: null,
- // 确定按钮文本
- okValue: 'ok',
- // 取消按钮文本
- cancelValue: 'cancel',
- // 内容宽度
- width: 'auto',
- // 内容高度
- height: 'auto',
- // 内容与边界填充距离
- padding: '20px 25px',
- // 皮肤名(多皮肤共存预留接口)
- skin: null,
- // 自动关闭时间
- time: null,
- // 是否支持Esc键关闭
- esc: true,
- // 是否支持对话框按钮自动聚焦
- focus: true,
- // 初始化后是否显示对话框
- visible: true,
- // 让对话框跟随某元素
- follow: null,
- // 是否锁屏
- lock: false,
- // 是否固定定位
- fixed: false,
- // 对话框叠加高度值(重要:此值不能超过浏览器最大限制)
- zIndex: 1987
- };
- this.artDialog = $.dialog = $.artDialog = artDialog;
- }(this.art || this.jQuery, this));
封装方法到对象(javascript)的更多相关文章
- 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript 封装方法
基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...
- JavaScript Number 对象 Javascript Array对象 Location 对象方法 String对象方法
JavaScript Number 对象 Number 对象属性 属性 描述 constructor 返回对创建此对象的 Number 函数的引用. MAX_VALUE 可表示的最大的数. MIN_V ...
- 分享几个Javascript 封装方法
基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...
- JSON.stringify()方法是将一个javascript值(对象或者数组)转换成为一个JSON字符串;JSON.parse()解析JSON字符串,构造由字符串描述的javascript值或对象
JSON.stringify()方法是将一个javascript值(对象或者数组)转换成为一个JSON字符串:JSON.parse()解析JSON字符串,构造由字符串描述的javascript值或对象
- 面向对象银角大王补充2-self就是调用当前方法的对象-静态字段,公有属性-封装的理解-继承的理解,普通方法,静态方法
self是什么,就是一个函数,就是一个形式参数 4.self就是调用当前方法的对象 静态字段,公有属性 静态字段使用场景,每个对象中保存相同的东西时,可以使用静态字段,公有属性 5.封装的理解 类中封 ...
- JS对象 JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。
什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...
- DBUtils封装数据库返回对象的各种方法
①ArrayHandler: 将查询结果的第一行数据,保存到Object数组中 ②ArrayListHandler 将查询的结果,每一行先封装到Object数组中,然后将数 ...
- JavaScript RegExp ——对象,语法,修饰符,方括号,元字符,量词,对象方法,对象属性
㈠RegExp 对象 正则表达式是描述字符模式的对象. 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. ㈡语法 var patt=new RegExp(pattern,m ...
随机推荐
- elasticsearch清空type下的所有数据
DELETE /twitter/tweet/_query{"query": { "match_all": {} }} 注:twitter为index,tweet ...
- 学习安卓开发过程中遇到关于R.Java文件的问题
在学习安卓开发过程时,遇到R.java生成问题,总结几个方法解决. 1.首先必须做的就是检查代码的正确性,存在错误的代码,不编译生成R.java 2.右键点项目,选择 Android Tools -& ...
- jeecg308 <t:authFilter />标签失效的问题
<%--该标签放到body末尾会无效,估计是js冲突,放到body前好用--%><t:authFilter /> <body></body>
- CSP学习之CryptoAPI初识
Crypto API目的就是提供开发者在windows下使用PKI的编程接口. Crypto 提供了很多的加解密相关函数,如编码.解码.加密解密,哈希,数字证书.证书管理证书存储等. 有关 ...
- 9th week -the history of program 1950~2020
We already know that programming language is a formal language designed to communicate instructions ...
- numpy中一些常用函数的用法总结
先简单记录一下,后续补充详细的例子 1. strip()函数 s.strip(rm):s为字符串,rm为要删除的字符序列 只能删除开头或是结尾的字符或者字符串.不能删除中间的字符或是字符串 当rm ...
- ArcGIS Enterprise 10.5.1 静默安装部署记录(Centos 7.2 minimal)- 5、安装Datastore
安装Datastore 解压datastore安装包,tar -xzvf ArcGIS_DataStore_Linux_1051_156441.tar.gz 切换到arcgis账户静默安装server ...
- 《ArcGIS Runtime SDK for Android开发笔记》——离在线一体化技术:概述
1.前言 数据生产和数据展示是常见的两大专业级移动GIS应用场景,这里我们针对数据生产环节的ArcGIS的离在线一体化技术给大家做一个基本的介绍和梳理. 使用ArcGIS离在线一体化技术首先需要以下基 ...
- 《ArcGIS Runtime SDK for Android开发笔记》——(12)、自定义方式加载Bundle格式缓存数据
随着ArcGIS 10.3的正式发布,Esri推出了新的紧凑型缓存格式以增强用户的访问体验.新的缓存格式下,Esri将缓存的索引信息.bundlx包含在了缓存的切片文件.bundle中.具体如下图所示 ...
- wxpyhon 对话框
Python内置了好多定义好了的对话框供我们使用,这里先介绍三个最常用的: 1 Message dialog 2 Text entry 3 Choosing from a list 当然python还 ...