我自己写的JS类库

以前就想把自己经常用到的JS写成一个类库，不过一直都是断断续续，这几天终于有了时间，所以整理了下。

借此机会发出来，欢迎喜欢研究JS的朋友拍砖！

这个JS类库里面有一些基础部分参考了Prototype（其它的JS框架没有研究过）

不过注释基本都没有去写，以后如果有机会就加上。

主要包括以下部分：

 

1. 类库的基础方法
2. DOM操作
3. AJAX类
4. 弹框类（基础）
5. 拖拽类
6. 缩放类
7. 样式渐变类（width,height,opacity,color...只要可以有渐变特性的都行）
8. 滑动门类（主要是和页面代码分开，而且添加了一个clallback，可以做出更多的特效）

 

 

  

 

 

/********************************************************* /* /* Danica7773 JavaScript framework, version 1.0 /* *********************************************************/ var $ = function(id) { return (typeof(id) == 'string') ? document.getElementById(id) : id; } var $Head = function() { return document.getElementsByTagName('head')[0]; } var $Body = function() { return document.getElementsByTagName('body')[0]; } var $CreateClass = function() { return function() { return this.init.apply(this, arguments); } } var $Array = function(list) { var _array = []; for(var i = 0; i < list.length; i++) { _array.push(list[i]); } return _array; } var $Extend = function(destination, source) { for(each in source) { destination[each] = source[each]; } return destination; } var $CreateElement = function(param) { var _element = document.createElement(param.tag); if(param.att) { $Extend(_element, param.att); } if(param.style) { $Extend(_element.style, param.style); } if(param.content) { _element.innerHTML = param.content; } if(param.parent) { param.parent.appendChild(_element); } return _element; } var $Bind = function(method, handler, flag) { var _arg = $Array(arguments); _arg.splice(0,3); if(flag) { return function(ev) { return method.apply(handler, [(window.event || ev)].concat(_arg)); } } else { return function() { return method.apply(handler, _arg); } } } /**********************************************************/ var $break = new Object(); var $continue = new Object(); var Base = { each: function(selector) { var _arg = $Array(arguments); _arg.shift(); try { this._each(function(listItem, index) { try { selector.apply(this, [listItem, index].concat(_arg)); } catch(e) { if(e != $continue) { throw e; } } }) } catch(e) { if(e != $break) { throw e; } } }, include: function(compare) { var _index = -1; this.each(function(listItem, index) { if(compare == listItem) { _index = index; throw $break; } }) return _index; }, firstCompare: function(selector) { var _index = -1; var _result; this.each(function(listItem, index) { _result = selector(listItem, index); if(_result) { _index = index; throw $break; } }) return _index; }, result: function(selector) { var _array = []; var _result; this.each(function(listItem, index) { _result = selector(listItem, index); if(_result) { _array.push(_result); } }) return _array; }, compare: function(selector) { var _array = []; var _result; this.each(function(listItem, index) { _result = selector(listItem, index); if(_result) { _array.push(listItem); } }) return _array; }, merge: function(list) { var _list = this.concat(list); var _array = []; var _temp = {}; _list.each(function(listItem, index) { if(!_temp[listItem]) { _temp[listItem] = 1; _array.push(listItem); } }) return _array; }, delSame: function(list) { var _array = []; var _isHave; this.each(function(listItem, index) { _isHave = arr.include(listItem); if(_isHave < 0) { _array.push(listItem); } }) return _array; }, max: function(selector){ var _compare; var _temp; this.each(function(listItem, index) { _temp = selector(listItem, index); if(_temp >= (_compare || _temp)) { _compare = _temp; } }) return _compare; }, min: function(selector){ var _compare; var _temp; this.each(function(listItem, index) { _temp = selector(listItem, index); if(_temp <= (_compare || _temp)) { _compare = _temp; } }) return _compare; } } /****************************************************************/ var $Browser = { type: function(name) { var _v = false; var _ua = navigator.userAgent.toLowerCase(); var _name = name.toLowerCase(); switch(_name) { case 'ie': _v = window.ActiveXObject ? _ua.match(/msie ([/d.]+)/)[1] : false; break; case 'ff': _v = document.getBoxObjectFor ? _ua.match(/firefox//([/d.]+)/)[1] : false; break; case 'chrome': _v = (window.MessageEvent && !document.getBoxObjectFor) ? _ua.match(/chrome//([/d.]+)/)[1] : false; break; case 'opera': _v = window.opera ? _ua.match(/opera.([/d.]+)/)[1] : false; break; case 'safari': _v = window.openDatabase ? _ua.match(/version//([/d.]+)/)[1] : false; } return _v; }, w: window.screen.width, h: window.screen.height } /******************************************************************/ var $Page = { scrollTop:function() { var _scrollPos; _scrollPos = (typeof(window.pageYOffset) != 'undefined') ? window.pageYOffset : (typeo(document.compatMode) != 'undefined' && document.compatMode != 'BackCompat')? document.documentElement.scrollTop : (typeof(document.body) != 'undefined')? document.body.scrollTop : 0; return _scrollPos; }, size:function() { var _pw = [document.body.offsetWidth, document.documentElement.offsetWidth, document.body.scrollWidth, document.documentElement.scrollWidth].max(function(listItem) {return (listItem)? listItem : 0;}); var _ph = [document.body.offsetHeight, document.documentElement.offsetHeight, document.body.scrollHeight, document.documentElement.scrollHeight].max(function(listItem) {return (listItem)? listItem : 0;}); var _sw = (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.clientWidth; var _sh = (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight; return {PW: _pw, PH: _ph, VW:_sw, VH: _sh} } } /*************************************************************/ $Extend(Array.prototype, Base); $Extend(Array.prototype, { _each: function(selector) { for(var i = 0; i < this.length; i++) { selector(this[i], i); } }, toQueryString: function() { var _array = []; this.each(function(listItem) { _array.push(encodeURIComponent(listItem[0]) + '=' + encodeURIComponent(listItem[1])); }) return _array.join('&'); } }) /**************************************************************/ $Extend(String.prototype, { rewriteStyleName: function() { var _name = this.split('-'); if(_name.length == 1) { return _name[0]; } var _fristName = _name.shift(); _name.each(function(listItem, index) { _name[index] = listItem.substr(0, 1).toUpperCase() + listItem.substr(1); }) _name.unshift(_fristName); return _name.join(''); }, trim: function() { return this.replace(/(^/s*)|(/s*$)/g,""); }, part:function() { var _temp = this; var _english = 0; //英文个数 var _chinese = 0; //汉字个数 var _number = 0; //数字个数 var _special = 0; //特殊字符个数 var _total = 0; //字符串总长(中文为两个字长) if(_temp.length > 0) { _temp.split('').each(function(listItem) { if(listItem.match(/[A-Za-z]/) != null) { _english += 1; } else if(listItem.match(/[^/x00-/xff]/) != null) { _chinese += 1; _total += 1; } else if(listItem.match(/[0-9]/) != null) { _number += 1; } else { _special += 1; } _total += 1; }) } return{E: _english, C: _chinese, N: _number, S: _special, T: _total}; }, toQueryParam: function() { var _param = this.match(/^/??(.*)$/)[1].split('&'); var _subParam; var _queryParam = {}; _param.each(function(listItem) { _subParam = listItem.split('='); _queryParam[_subParam[0]] = _subParam[1]; }) return _queryParam; } }) /*****************************************************/ var Element = { init: function(id) { this.element = $(id); return this; }, pos: function() { var _x = this.element.offsetLeft; var _y = this.element.offsetTop; var _obj = this.element; while(_obj.offsetParent) { _obj = _obj.offsetParent; _x += _obj.offsetLeft; _y += _obj.offsetTop; } return {X: _x, Y: _y}; }, update: function(html) { this.element.innerHTML = html; }, insert: function(newNode, oldNode) { if(typeof(oldNode) == 'undefined') { this.element.appendChild(newNode); } else { this.element.insertBefore(newNode, oldNode); } }, remove: function() { this.removeAllEvents(this.element); this.element.parentNode.removeChild(this.element); }, removeAllEvents: function(node) { this.removeEvents(node); if(node.firstChild) { var _node = node.firstChild; while(_node) { if(_node.nodeType == 1) { this.removeAllEvents(_node); } _node = _node.nextSibling; } } }, removeEvents: function(node) { for(var each in node) { if(typeof(node[each]) === 'function') { node[each] = null; } } }, att: function(key, value) { var _key = ($Browser.type('ie') && key == 'class')? 'className' : key; if(typeof(value) == 'undefined') { this.element.getAttribute(_key); } else { this.element.setAttribute(_key, value); } }, haveAtt: function(key, value, vSplit) { var _value = this.att(key); var _vSplit = (typeof(vSplit) == 'undefined')? ' ' : vSplit; if(_value && _value.length > 0) { var _oldValue = _value.split(_vSplit); var _newValue = _oldValue.merge(value.split(_vSplit)); if(_oldValue.length == _newValue.length) { return true; } } return false; }, addAtt: function(key, value, vSplit) { var _value = this.att(key); var _vSplit = (typeof(vSplit) == 'undefined')? ' ' : _vSplit; var _oldValue = (_value == '' || _value == null) ? [] : _value.split(_vSplit); this.att(key, _oldValue.merge(value.split(_vSplit)).join(_vSplit)); }, delAtt: function(key, value, vSplit) { var _value = this.att(key); var _vSplit = (typeof(vSplit) == 'undefined')? ' ' : _vSplit; if(_value != '' && _value != null) { if(typeof(value) == 'undefined') { this.att(key, ''); } else { this.att(key, _value.split(_vSplit).delSame(value.split(_vSplit)).join(_vSplit)); } } }, getStyle: function(style) { var _value = this.element.style[style.rewriteStyleName()]; if (!_value) { if (document.defaultView && document.defaultView.getComputedStyle) { var _css = document.defaultView.getComputedStyle(this.element, null); _value = _css ? _css.getPropertyValue(style) : null; } else if(this.element.currentStyle) { _value = this.element.currentStyle[style.rewriteStyleName()]; } } if(window.opera && ['left', 'top', 'right', 'bottom'].include(style) >= 0) { if(this.getStyle('position') == 'static') { _value = 'auto'; } } return (_value == 'auto') ? null : _value; }, setStyle: function(style) { $Extend(this.element.style, style); }, getOpacity:function() { var _temp = 0 if($Browser.type('ie')) { _temp = this.getStyle("filter"); _temp = (_temp == "" || _temp == null)? 100 : (_temp.match(/alpha/(opacity=(.*)/)/))? _temp.match(/alpha/(opacity=(.*)/)/)[1] : 100; } else { _temp = !isNaN(this.getStyle("opacity")) ? this.getStyle("opacity") * 100 : 100; } return parseInt(_temp); }, setOpacity:function(value) { var _v = (value > 100)? 100 : (value < 0)? 0 : value; if($Browser.type('ie')) { this.setStyle({filter: "alpha(opacity="+_v+")"}); } else { this.setStyle({opacity: (_v / 100)}); } }, addEvent: function(type, fun) { if(this.element.addEventListener) { this.element.addEventListener(type, fun, false); } else if(this.element.attachEvent) { this.element.attachEvent('on' + type, fun); } }, removeEvent: function(type, fun) { if(this.element.removeEventListener) { this.element.removeEventListener(type, fun, false); } else if(this.element.detachEvent) { this.element.detachEvent('on' + type, fun); } } } /************************************************************/ var $Element = function(id) { return Element.init(id); } /************************************************************/ Element.Form = { members: function() { return $Array(this.element.elements); }, queryString: function() { var _list = this.members(); var _array = []; var _name = []; var _value; _list.each(function(listItem, index) { var _itemName = listItem.name; if(_name.include(_itemName) < 0) { _name.push(_itemName); _value = $Element(listItem).getValue() if(_value) { _array.push([_itemName, _value]); } } }) return _array.toQueryString(); } } $Extend(Element, Element.Form) /***************************************************************/ Element.Form.Member = { txtValue: function() { return this.element.value; }, downListValue: function() { var _array = []; var _list = $Array(this.element.options); _list.each(function(listItem, index, obj){ if(listItem.selected || (obj.selectedIndex == index)) { _array.push((listItem.value)? listItem.value : listItem.text); } }, this.element) return _array.join('|'); }, selectValue: function() { var _list = $Array(document.getElementsByName(this.element.name)); var _array = []; _list.each(function(listItem, index) { if(listItem.checked) { _array.push(listItem.value); } }) return _array.join('|'); }, getValue: function(flag) { var _type = (this.element.type) ? this.element.type : this.element.nodeName.toLowerCase(); if(_type == 'textarea' || _type == 'text' || _type == 'password' || _type == 'hidden') { return this.txtValue(); } else if((_type == 'submit' || _type == 'button' || _type == 'reset') && flag) { return this.txtValue(); } else if(_type == 'checkbox' || _type == 'radio') { return this.selectValue(); } else if(_type == 'select') { return this.downListValue(); } else { return null; } }, addOption: function(value, text) { var _option = document.createElement('option'); _option.value = value; _option.text = text; this.element.options.add(_option); }, delOption: function(flag, v) { var _v; if(flag.toLowerCase() == 'index') { var _len = this.element.options.length; _v = (v < 1)? 1 : (v > _len)? _len : v; this.element.remove(v - 1); } else { var _list = $Array(this.element.options); _list.each(function(listItem, index, obj){ _v = (flag.toLowerCase() == 'value') ? listItem.value : listItem.text; if(_v == v) { obj.remove(index); throw $break; } }, this.element) } }, delAllOptions: function() { while(this._obj.options.length != 0) { this.element.remove(0); } } } $Extend(Element, Element.Form.Member) /*****************************************************************/ var Event = { init: function(ev) { this.ev = ev; this.isIE = $Browser.type('ie'); return this; }, target: function() { return (this.isIE)? this.ev.srcElement : this.ev.target; }, to: function() { return (this.isIE)? this.ev.toElement : this.ev.relatedTarget; }, from: function() { return (this.isIE)? this.ev.fromElement : this.ev.relatedTarget; }, pos: function() { var _x = this.ev.pageX || (this.ev.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var _y = this.ev.pageY || (this.ev.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return {X: _x, Y: _y}; }, inFstop:function() { if(this.ev.stopPropagation) { this.ev.stopPropagation(); } else { this.ev.cancelBubble = true; } }, inFabort:function() { if(this.ev.preventDefault) { this.ev.preventDefault(); } else { this.ev.returnValue = false; } } } /***********************************************************************/ var $Event = function(ev) { return Event.init(ev); } /***********************************************************************/ var Ajax = $CreateClass(); Ajax.prototype = { init: function(op) { this.option = { url: '', method: 'get', //[get|post] postData: null, postType: 'text', //[text|xml|json] sendHeader: [], //[["Content-Type","application/x-www-form-urlencoded"], ...] valueType: 'text', //[text|xml|json] delayTime: 10, //Timeout(Unit: s) cache: false, //[true|false] workState: true, //[true|false] onLoading: null, //[function|null] onSuccess: null, onFailure: null }; $Extend(this.option, op); this.xmlHttp = this.createXMLHttp(); this.timeOut = null; this.sendRequest(); }, createXMLHttp: function() { var _xmlHttpTemp = null; try{ if(window.XMLHttpRequest) { _xmlHttpTemp = new XMLHttpRequest(); } else if(window.ActiveXObject) { var _activeXObj = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']; _activeXObj.each(function(listItem, index){ _xmlHttpTemp = new ActiveXObject(listItem); if(_xmlHttpTemp) { throw $break; } }) } } catch(e) { this.failure(e); } return _xmlHttpTemp; }, sendHeader: function() { if(!this.option.cache) { this.option.sendHeader.push(["Cache-Control","no-cache"]); } var _method = this.option.method.toLowerCase(); if(_method == 'post') { switch(this.option.postType.toLowerCase()) { case 'text': this.option.sendHeader.push(['content-length', this.option.postData.length]); this.option.sendHeader.push(['Content-Type', 'application/x-www-form-urlencoded']); break; case 'xml': this.option.sendHeader.push(['content-length', this.option.postData.length]); this.option.sendHeader.push(['Content-Type', 'application/xml;text/xml']); break; case 'json': this.option.sendHeader.push(['Content-Type', 'application/json;charset=utf-8']); break; } } if(this.option.sendHeader.length >= 1) { for(var i = 0; i < this.option.sendHeader.length; i++) { this.xmlHttp.setRequestHeader(this.option.sendHeader[i][0], this.option.sendHeader[i][1]); } } }, setDelayTime: function() { if(this.option.delayTime > 0) { var _delay = $Bind(this.stopRequest ,this, false); this.timeOut = setTimeout(_delay, this.option.delayTime*1000); } }, getURL: function() { var _url = this.option.url; if(!this.option.cache) { _url += (_url.indexOf("?") == -1)? "/?random=" + Math.random() : "/&random=" + Math.random(); } return _url; }, loading: function(v) { if(this.option.onLoading) { this.option.onLoading(v); } }, success: function(v) { if(this.option.onSuccess) { this.option.onSuccess(v); } }, failure: function(v) { if(this.option.onFailure) { this.option.onFailure(v); } }, callBack: function() { if(this.xmlHttp.readyState < 4) { this.loading('正在发送请求......'); } else { clearTimeout(this.timeOut); if(this.xmlHttp.status == 200 || this.xmlHttp.status == 0) { this.success(this.getData()); } else { this.failure(this.xmlHttp.status); } } }, getData: function() { switch(this.option.valueType.toLowerCase()) { case 'text': return this.xmlHttp.responseText; case 'json': return eval("("+ this.xmlHttp.responseText +")"); case 'xml': return this.xmlHttp.responseXML; default: return null; } }, sendRequest: function() { try{ var _self = this; this.xmlHttp.open(this.option.method.toUpperCase(), this.getURL(), this.option.workState); this.sendHeader(); this.setDelayTime(); this.xmlHttp.onreadystatechange = $Bind(this.callBack, this, false); this.xmlHttp.send(this.option.postData); } catch(e) { this.failure(e); } }, stopRequest: function() { this.xmlHttp.abort(); this.xmlHttp = null; this.failure("请求超时！"); } } /*************************************************************/ var loadScript = $CreateClass(); loadScript.prototype = { init: function(scriptSrc, scriptID, parent, callBack) { this.scriptSrc = scriptSrc; this.scriptID = scriptID; this.parent = parent; this.callBack = (typeof(callBack) == 'undefined')? function(){} : callBack; this.createScript(); }, createScript: function() { var _self = this; var _scriptOld = document.getElementById(this.scriptID); if(_scriptOld) { _scriptOld.parentNode.removeChild(_scriptOld); } var _script = document.createElement('script'); _script.type = 'text/javascript'; _script.id = this.scriptID; _script.src = this.scriptSrc; if($Browser.type('ie')) { _script.onreadystatechange = function() { if(/(complete|loaded)/.test(this.readyState)) { _self.callBack(_self.scriptID); } } } else { _script.onload = function() { _self.callBack(_self.scriptID); } } this.parent.appendChild(_script); } } /************************************************************/ /* /*element selector /*Basic Mode: id, tag, [attKey(=|==|!==|!=)attValue], tag[attKey(=|==|!==|!=)attValue] /*the connection is [>| ] /*the > is mean that the back mode is the front mode's childNodes /*the ' ' is mean that the back mode is the front mode's getElementsByTagName /*=: include; ==: equal; !==: not equal; !=: not include; /*set attvalue is empty('') if the attValue is null /*if (attKey == '') is true, the attribute is not exist /*if (attKey !== '') is true, the attribute is exist */ var Selector = { init:function(selector) { this.selector = selector; this.list = null; this.flag = -1; return this.finish(); }, finish: function() { while(this.selector.length != 0) { this.itemSelector(); } return (this.list && this.list.length == 1)? this.list[0] : this.list; }, itemSelector: function() { var _Flag1 = this.selector.indexOf(' '); var _Flag2 = this.selector.indexOf('>'); var selectorItem; if(_Flag1 == _Flag2) { _selectorItem = this.selector; this.selector = ''; this.list = this.selectorType(_selectorItem); } else if(_Flag1 == 0 || _Flag2 == 0) { this.flag = (_Flag1 == 0)? 0 : 1; //0是所有子代；1是直接子代 this.selector = this.selector.substr(1); } else { var _n = (Math.min(_Flag1, _Flag2) > 0)? Math.min(_Flag1, _Flag2) : Math.max(_Flag1, _Flag2); _selectorItem = this.selector.substr(0, _n); this.selector = this.selector.substr(_n); this.list = this.selectorType(_selectorItem); } }, selectorType: function(selectorItem) { var _matches; if((/^#/S+$/).test(selectorItem)) { return this.byID(selectorItem.substr(1)); } else if((/^[A-Za-z]{1,8}[1|2|3|4|5|6|7]{0,1}$/).test(selectorItem)) { return this.byTag(selectorItem); } else if((/^/[(/w+)([=|!]{1,2})(/w*)]$/).test(selectorItem)) { return this.getTagList('*', selectorItem); } else if((_matches = (selectorItem).match(/^([A-Za-z]{1,8}[1|2|3|4|5|6|7]{0,1})(/[(/w+)([=|!]{1,3})([/w/|]*)])$/)) != null) { return this.getTagList(_matches[1], _matches[2]); } else { return null; } }, getTagList: function(tag, sItem) { _matches = sItem.match(/^/[(/w+)([=|!]{1,3})([/w/|]*)]$/) var _attKey = _matches[1]; var _attFlag = _matches[2]; var _attValue = _matches[3]; switch(_attFlag) { case '=': _attFlag = 2; break; //include case '==': _attFlag = 1; break; //equal case '!==': _attFlag = -1; break; //not equal case '!=': _attFlag = -2; break; //not include default: return null; } this.list = this.byTag(tag); return this.byAtt(_attKey, _attFlag, _attValue); }, byID: function(sItem) { return (document.getElementById(sItem))? [document.getElementById(sItem)] : null; }, byTag: function(sItem) { var _array = null; if(this.flag == -1) { this.list = [document]; _array = this.byTag2(sItem); return _array; } if(this.list == null) { return null; } return this.byTag2(sItem); }, byTag2: function(sItem) { _array = []; _temp = []; this.list.each(function(listItem, index, flag) { _temp = $Array(listItem.getElementsByTagName(sItem)); if(flag != 0 && flag != -1) { _temp = _temp.compare(function(listItem2) { return (listItem2.parentNode == listItem) ? true : false; }) } _array = _array.concat(_temp); }, this.flag) return (_array.length == 0)? null : _array; }, byAtt: function(attKey, attFlag, attValue) { var _array = null; if(this.list == null) { return _array; } _array = []; var _attKey = (document.all && attKey == 'class')? 'className' : attKey; this.list.each(function(listItem){ var _attValueTemp = listItem.getAttribute(_attKey); if(_attValueTemp == null) { _attValueTemp = ''; } if(_attValueTemp.length == 0) { if(attFlag == 1 && attValue.length == 0) { _array.push(listItem); } else if(attFlag == -1 && attValue.length > 0) { _array.push(listItem); } } else { if(attFlag == 1 && _attValueTemp == attValue) { _array.push(listItem); } else if(attFlag == -1 && _attValueTemp != attValue) { _array.push(listItem); } else { var _dArr = _attValueTemp.split(' '); var _sArr = _dArr.merge(attValue.split('|')); if(attFlag == -2 && _sArr.length != _dArr.length) { _array.push(listItem); } else if(attFlag == 2 && _sArr.length == _dArr.length) { _array.push(listItem); } } } }) return (_array.length == 0)? null : _array; } } /****************************************************************************/ var $Selector = function(selector) { return Selector.init(selector); } /****************************************************************************/ var Tween = { Linear: function(t,b,c,d){ return c*t/d + b; }, Quad: { easeIn: function(t,b,c,d){ return c*(t/=d)*t + b; }, easeOut: function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; } }, Cubic: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t + b; }, easeOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; } }, Quart: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t*t + b; }, easeOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; } }, Quint: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t*t*t + b; }, easeOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; } }, Sine: { easeIn: function(t,b,c,d){ return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOut: function(t,b,c,d){ return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOut: function(t,b,c,d){ return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; } }, Expo: { easeIn: function(t,b,c,d){ return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOut: function(t,b,c,d){ return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOut: function(t,b,c,d){ if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; } }, Circ: { easeIn: function(t,b,c,d){ return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, easeOut: function(t,b,c,d){ return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; } }, Elastic: { easeIn: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, easeOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); }, easeInOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; } }, Back: { easeIn: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; } }, Bounce: { easeIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, easeInOut: function(t,b,c,d){ if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b; else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b; } } } /*****************************************************************/ /** * var op = { * id: '', * cName: '', * size: [0, 0], * mask: true, * pos: [0, 0], * shadow: 5, * move: true, true | false | [1024, 768] * resize: {minSize: [], maxSize: [], limit: []}, false | {minSize: [], maxSize: [], limit: []} * title: '', * content: '', * createCallBack: function(){}, * closeCallBack: function(){} * } */ var Dialog = $CreateClass(); Dialog.prototype = { init: function(op) { this.id = op.id; this.cName = op.cName; this.size = op.size; this.pos = op.pos; this.shadow = op.shadow; this.mask = op.mask; this.move = op.move; this.resize = op.resize; this.title = op.title; this.content = op.content; this.createCallBack = (typeof(op.openCallBack) == 'function') ? op.openCallBack : false; this.closeCallBack = (typeof(op.closeCallBack) == 'function') ? op.closeCallBack : false; }, create: function() { if($(this.id + '_container')) { this.remove(); } var _pageSize = $Page.size(); if(this.mask) { var _mask = $CreateElement({ tag: 'div', att: {id: this.id + '_mask', className: this.cName + '_mask'}, style: {width:_pageSize.PW + 'px', height: _pageSize.PH + 'px', position: 'absolute', left: '0px', top: '0px'}, parent: $Body()}); } if(this.shadow) { var _shadow = $CreateElement({ tag: 'div', att: {id: this.id + '_shadow', className: this.cName + '_shadow'}, style: {width: this.size[0] + 'px', height: this.size[1] + 'px', position: 'absolute', left: this.pos[0] + this.shadow + 'px', top: this.pos[1]+ this.shadow + 'px'}, parent: $Body()}); } var _iframe = $CreateElement({ tag: 'iframe', att: {id: this.id + '_iframe'}, style: {width: this.size[0] + 'px', height: this.size[1] + 'px',border: '0px', position: 'absolute', left: this.pos[0] + 'px', top: this.pos[1] + 'px'}, parent: $Body()}); var _container = $CreateElement({ tag: 'div', att: {id: this.id + '_container', className: this.cName + '_container'}, style: {width: this.size[0] + 'px', height: this.size[1] + 'px', position: 'absolute', left: this.pos[0] + 'px', top: this.pos[1] + 'px', overflow: 'hidden'}, parent: $Body()}); var _list = (this.shadow)? [_shadow, _iframe, _container] : [_iframe, _container]; var _title = $CreateElement({ tag: 'div', att: {className: this.cName + '_title'}, parent: _container}); var _tip = $CreateElement({ tag: 'div', att: {className: this.cName + '_tip'}, content: this.title, parent: _title}); if(this.move) { var _size = (typeof(this.move) == 'boolean') ? false : this.move; new Move({handler: _tip, size: _size, list: _list}); } var _close = $CreateElement({ tag: 'div', att: {className: this.cName + '_close'}, content: 'X', parent: _title}); _close.onclick = $Bind(this.remove, this, false); var _tHeight = _title.offsetHeight; var _content = $CreateElement({ tag: 'div', att: {className: this.cName + '_content'}, //style: {height: this.size[1] - _tHeight + 'px'}, content: this.content, parent: _container}); if(this.resize) { var _resize = $CreateElement({ tag: 'div', att: {id: this.id + '_resize', className: this.cName + '_resize'}, style: {cursor: 'pointer'}, parent: _container}); new Resize({handler: _resize, minSize: this.resize.minSize, maxSize: this.resize.maxSize, limit: this.resize.limit, list: _list}); } if(this.createCallBack) { this.createCallBack(); } }, remove: function() { if(this.closeCallBack) { this.closeCallBack(); } var _mask = $(this.id + '_mask'); if(_mask) { $Body().removeChild(_mask); } var _shadow = $(this.id + '_shadow'); if(_shadow) { $Body().removeChild(_shadow); } var _iframe = $(this.id + '_iframe'); if(_iframe) { $Body().removeChild(_iframe); } var _container = $(this.id + '_container'); if(_container) { $Element(_container).remove(); } } } /******************************************************************************/ /** * var op = { * handler: element, * size: false | [1024, 768], * list: null | [element1, element2, ...] * startCallBack: function(){}, * endCallBack: function(){} * } **/ var Move = $CreateClass(); Move.prototype = { init: function(op) { this.handler = op.handler; this.handler.style.cursor = 'move'; this.size = op.size; this.list = op.list; if(!this.list) { this.list = [this.handler]; } this.posList = []; this.posOver = [false, false]; this.startCallBack = (typeof(op.startCallBack) == 'function') ? op.startCallBack : false; this.endCallBack = (typeof(op.endCallBack) == 'function') ? op.endCallBack : false; this.mouseMoveEvent; this.mouseUpEvent; $Element(this.handler).addEvent('mousedown', $Bind(this.ready, this, true)); }, ready: function() { var _pos = $Event(arguments[0]).pos(); var _element; var _x; var _y; this.posList = this.list.result(function(listItem, index) { _element = $Element(listItem); _x = parseInt(_element.getStyle('left')); _y = parseInt(_element.getStyle('top')); return [_pos.X - _x, _pos.Y - _y]; }); //alert(this.posList) var _doc = $Element(document); this.mouseMoveEvent = $Bind(this.action, this, true); this.mouseUpEvent = $Bind(this.stop, this, false); _doc.addEvent('mousemove', this.mouseMoveEvent); _doc.addEvent('mouseup', this.mouseUpEvent); if(this.startCallBack) { this.startCallBack(); } $Event(arguments[0]).inFabort(); }, stop: function() { this.posList = []; if(this.endCallBack) { this.endCallBack(); } var _doc = $Element(document); _doc.removeEvent('mousemove', this.mouseMoveEvent); _doc.removeEvent('mouseup', this.mouseUpEvent); }, action: function() { if(this.posList.length <= 0) { return; } var _pos = $Event(arguments[0]).pos(); var _x = _pos.X - this.posList[0][0]; var _y = _pos.Y - this.posList[0][1]; if(this.size) { this.posOver[0] = (_x <= 0 || _x + this.list[0].offsetWidth >= this.size[0]) ? true : false; this.posOver[1] = (_y <= 0 || _y + this.list[0].offsetHeight >= this.size[1]) ? true : false; } this.list.each(function(listItem, index, pos, over) { if(!over[0]){ listItem.style.left = _pos.X - pos[index][0] + 'px'; } if(!over[1]){ listItem.style.top = _pos.Y - pos[index][1] + 'px'; } }, this.posList, this.posOver) } } /*****************************************************************/ /** * var op = { * handlerID: '', * minSize: [], * maxSize: [], * limit: [true, true], * list: [], * startCallBack: function(){}, * endCallBack: function(){} * } **/ var Resize = $CreateClass(); Resize.prototype = { init: function(op) { this.handler = op.handler; this.minSize = op.minSize; this.maxSize = op.maxSize; this.limit = op.limit; this.list = op.list; this.sizeList = []; this.startCallBack = (typeof(op.startCallBack) == 'function') ? op.startCallBack : false; this.endCallBack = (typeof(op.endCallBack) == 'function') ? op.endCallBack : false; this.mouseMoveEvent; this.mouseUpEvent; $Element(this.handler).addEvent('mousedown', $Bind(this.ready, this, true)); }, ready: function() { var _pos = $Event(arguments[0]).pos(); var _element; var _w; var _h; this.sizeList = this.list.result(function(listItem, index) { _element = $Element(listItem); _w = parseInt(_element.getStyle('width')); _h = parseInt(_element.getStyle('height')); return [_pos.X - _w, _pos.Y - _h]; }); if(this.startCallBack) { this.startCallBack(); } var _doc = $Element(document); this.mouseMoveEvent = $Bind(this.action, this, true); this.mouseUpEvent = $Bind(this.stop, this, false); _doc.addEvent('mousemove', this.mouseMoveEvent); _doc.addEvent('mouseup', this.mouseUpEvent); $Event(arguments[0]).inFabort(); }, stop: function() { this.sizeList = []; if(this.endCallBack) { this.endCallBack(); } var _doc = $Element(document); _doc.removeEvent('mousemove', this.mouseMoveEvent); _doc.removeEvent('mouseup', this.mouseUpEvent); }, action: function() { if(this.sizeList.length <= 0) { return; } var _pos = $Event(arguments[0]).pos(); var _w = _pos.X - this.sizeList[0][0]; var _h = _pos.Y - this.sizeList[0][1]; if(_w >= this.minSize[0] && _w <= this.maxSize[0] && this.limit[0]) { this.resetSize('width', _pos.X, 0); } if(_h >= this.minSize[1] && _h <= this.maxSize[1] && this.limit[1]) { this.resetSize('height', _pos.Y, 1); } }, resetSize: function(key, step, flag) { this.list.each(function(listItem, index, sizeList) { listItem.style[key] = step - sizeList[index][flag] + 'px'; }, this.sizeList) } } /*****************************************************************/ /** * var op = { * element: element, * endValue: '480', * effect: 'width', * step: 100, * tween: Tween.Elastic.easeInOut || null * callBack: function(){}; * } **/ var Effect = $CreateClass(); Effect.prototype = { init: function(op) { this.element = $(op.element); this.effect = op.effect; this.endValue = op.endValue; switch(this.effect) { case 'background-color': case 'color': this.startValue = $Element(this.element).getStyle(this.effect); this.set = this.setColor; this.effect = this.effect.rewriteStyleName(); break; case 'opacity': this.startValue = $Element(this.element).getOpacity(); this.set = this.setOpacity; break; case 'scrollTop': case 'scrollLeft': this.startValue = this.element[this.effect]; this.set = this.setScroll; break; default: this.startValue = $Element(this.element).getStyle(this.effect); this.set = this.setNum; this.effect = this.effect.rewriteStyleName(); } this.tween = (op.tween)? op.tween : Tween.Linear; this.step = op.step; this.map = (this.effect == 'backgroundColor' || this.effect == 'color') ? this.colorMap() : this.numMap(); this.index = 0; this.flag = true; this.callBack = (typeof(op.callBack) == 'function') ? op.callBack : false; }, numMap: function() { var _startValue = parseInt(this.startValue); var _endValue = (this.effect != 'opacity') ? this.endValue : (this.endValue > 100)? 100 : (this.endValue < 0)? 0 : this.endValue; var _array = [_startValue]; var _temp; for(var i = 1; i< this.step - 1; i++){ _temp = this.tween((i + 1), _startValue, (_endValue - _startValue), this.step); _array.push(parseInt(_temp)); } _array.push(_endValue); return _array; }, colorMap: function() { var _array = []; var _startColor = this.getColorList(this.startValue); var _endColor = this.getColorList(this.endValue); var _stepTemp = []; _startColor.each(function(listItem, index, step) { _stepTemp.push(parseInt((_endColor[index] - listItem) / step)); }, this.step); for(var i = 0, r = parseInt(_startColor[0]), g = parseInt(_startColor[1]), b = parseInt(_startColor[2]); i < this.step - 1; i++) { _array.push([r, g, b]); r += _stepTemp[0]; g += _stepTemp[1]; b += _stepTemp[2]; } _array.push(_endColor); return _array; }, getColorList: function(value) { var _array = []; var _match; if(value.indexOf('#') == 0 && value.length == 7) { _array.push(parseInt(value.substr(1,2), 16)); _array.push(parseInt(value.substr(3,2), 16)); _array.push(parseInt(value.substr(5,2), 16)); } else if(value.indexOf('#') == 0 && value.length == 4) { _array.push(parseInt([value.substr(1,1), value.substr(1,1)].join(''), 16)); _array.push(parseInt([value.substr(2,1), value.substr(2,1)].join(''), 16)); _array.push(parseInt([value.substr(3,1), value.substr(3,1)].join(''), 16)); } else if((_match = value.match(/^rgb/((.*),(.*),(.*)/)$/i)) != null) { _array = [parseInt(_match[1]), parseInt(_match[2]), parseInt(_match[3])]; } else { _array = (this.effect == 'color')? [0, 0, 0] : [255, 255, 255]; } return _array; }, action: function(act) { if(act == 'up') { this.flag = true; this.up(); } else if(act == 'down') { this.flag = false; this.down(); } }, up: function() { this.index++; if(this.index < this.map.length) { this.set(this.index); } else { this.flag = false; if(this.callBack) { this.callBack(); } } var _self = this; if(this.flag && this.index < this.map.length - 1) { setTimeout(function(){_self.up()}, 10); } }, down: function() { this.index--; if(this.index >= 0) { this.set(this.index); } else { this.flag = true; if(this.callBack) { this.callBack(); } } var _self = this; if(!this.flag && this.index > 0) { setTimeout(function(){_self.down()}, 10); } }, setColor: function(index) { _value = this.map[index].result(function(listItem) { return (listItem.toString(16).length < 2) ? '0' + listItem.toString(16) : listItem.toString(16); }); _value = '#' + _value.join(''); this.element.style[this.effect] = _value; }, setOpacity: function(index) { var _value = this.map[index]; $Element(this.element).setOpacity(_value); }, setScroll: function(index) { var _value = this.map[index] + 'px'; this.element[this.effect] = _value; }, setNum: function(index) { var _value = this.map[index] + 'px'; this.element.style[this.effect] = _value; } } /***************************************************************/ /** * var op = { * titleID: '', * titleListTag: '', * titleClass: '', * contentID: '', * contentListTag: '', * contentClass: '', * callBack: function(titleList, contentList, index){}, * eventType: '' * } **/ var TabView = $CreateClass(); TabView.prototype = { init: function(op) { this.titleList = $Selector('#' + op.titleID + '>' + op.titleListTag); this.contentList = $Selector('#' + op.contentID + '>' + op.contentListTag); if(!this.titleList || !this.contentList || (this.titleList.length != this.contentList.length)) { return; } this.index = -1; this.titleClass = op.titleClass; this.contentClass = op.contentClass; this.callBack = (typeof(op.callBack) === 'function')? op.callBack : false; this.eventType = op.eventType; var element; this.titleList.each(function(listItem, index, self) { element = $Element(listItem); element.addEvent(self.eventType, $Bind(self.tabChange, self, false, index), false); if(element.haveAtt('class', self.titleClass + '_dis')) { self.index = index; } }, this); if(this.index < 0) { this.tabChange(0); } }, tabChange: function(n) { if(n == this.index) { return; } var _len = this.titleList.length; for(var i = 0; i < _len; i++) { $Element(this.titleList[i]).addAtt('class', ((n == i) ? this.titleClass + '_dis' : this.titleClass + '_undis')); $Element(this.contentList[i]).addAtt('class', ((n == i) ? this.contentClass + '_dis' : this.contentClass + '_undis')); } if(this.callBack) { this.callBack(this.titleList, this.contentList, this.index, n); } this.index = n; } }