以前就想把自己经常用到的JS写成一个类库,不过一直都是断断续续,这几天终于有了时间,所以整理了下。
借此机会发出来,欢迎喜欢研究JS的朋友拍砖!
这个JS类库里面有一些基础部分参考了Prototype(其它的JS框架没有研究过)
不过注释基本都没有去写,以后如果有机会就加上。
主要包括以下部分:
- 类库的基础方法
- DOM操作
- AJAX类
- 弹框类(基础)
- 拖拽类
- 缩放类
- 样式渐变类(width,height,opacity,color...只要可以有渐变特性的都行)
- 滑动门类(主要是和页面代码分开,而且添加了一个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;
}
}