简易js框架，基于js对象类操作.

最新推荐文章于 2025-05-31 16:02:29 发布

卓林

最新推荐文章于 2025-05-31 16:02:29 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签：框架 javascript 3d canvas

本文链接：https://blog.csdn.net/shizhuolin/article/details/41728413

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

现在用jq了,这是以前造的车轮子之一
支持css选择器,ui界面，表单验证。2d,3D的网页绘图（vml和纯js实现）, 命名空间，js类集成，element扩展
<a href="http://www.shizhuolin.com/wp-content/uploads/2014/03/zhuozhuo.org_.zip">全部代码点这里下载</a>

对象目录
float zhuozhuo.version 版本(3.0起增加名称空间)
object zhuozhuo.namespace(namespace) 注册名称空间并且返回此注册名称空间对象
class zhuozhuo.zclass(class...) 创建类或继承类,允许多继承(查看注解)
object zhuozhuo.getById(argv...) 根据一个或多个参数获取并包装对象(查看注解) 单参数返回zdom多参数返回array
object zhuozhuo.getBySelector(String selectors[, isAll]) 根据css规则包装输出ZDOM数组如果isAll存在且为1或true则输出zdom数组,否则只输出一个对象
浏览器信息
string zhuozhuo.browser.version 浏览器内核版本(IE, Opera显示浏览器版本)
bool zhuozhuo.browser.kernel.isTrident 浏览器内核 IE
bool zhuozhuo.browser.kernel.isGecko 浏览器内核 Firefox,MozillaSuite/SeaMonkey,Mozilla,Thunderbird
bool zhuozhuo.browser.kernel.isPresto 浏览器内核 Opera
bool zhuozhuo.browser.kernel.isWebKit 浏览器内核 Safari
bool zhuozhuo.browser.kernel.isKHTML 浏览器内核 Konqueror
bool zhuozhuo.browser.features.isXPath 是否支持xpath
bool zhuozhuo.browser.features.isSelectorsAPI 是否支持css选择器

工具
string zhuozhuo.util.getClass(object) 返回对象类别字串
object zhuozhuo.util.extend(destination, source) source对象合并到destination上相同的方法或涵数覆盖返回 destination
object zhuozhuo.util.clone(object) 返回object的浅表复制
bool zhuozhuo.util.isArray(object) 判断object是否数组
bool zhuozhuo.util.isFunction(object) 判断object是否函数
bool zhuozhuo.util.isNumber(object) 判断object是否数字
bool zhuozhuo.util.isUndefined(object) 判断object是否未定义
bool zhuozhuo.util.isString(object) 判断object是否是字符串
array zhuozhuo.util.toArray(iteralbe) 把iteralbe转换为数组
void zhuozhuo.util.fnEmpty() 空function函数
bool zhuozhuo.util.fnTrue() 返回true的函数
string zhuozhuo.util.param(object) 序列化object
object zhuozhuo.util.trys(Function...) 执行多个function并返回最早的正确结果

String zhuozhuo.util.string.trim(value) 去除左右两边的空格
Integer zhuozhuo.util.string.wlength(value) 按英文长度返回字符串长度,一个汉字相当于两个英文字符
String zhuozhuo.util.string.wsubstr(value, wstart[, wlength]) 按英文长度从开始位置截取指定长度字符串一个汉字相当于两个英文字符
String zhuozhuo.util.string.wsubstring(value, wstart, wend) 按英文长度截取指定范围的字符串

Array zhuozhuo.util.array.each(array, Function handler(Object object, Integer index))
迭代数组并相同的参数，面向所有的元素。返回调用方法的结果。第一参数数组值,第二个参数索引,返回执行结果数组
Array zhuozhuo.util.array.uniq(array) 返回不重复的数组
Integer zhuozhuo.util.array.indexOf(array Object object[, Integer startIndex]) 在数组中查找指定元素的位置,找不到返回 -1 可选参数搜索的起始索引。空数组中 0（零）为有效值。

事件包装
new zhuozhuo.event.Event(event)
object .event 被包装事件对象(例:window.event)
bool .altKey 返回当事件被触发时，"ALT" 是否被按下。
bool .ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
bool .shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
int .keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码。
int .clientX 返回当事件被触发时，鼠标指针的水平坐标。
int .clientY 返回当事件被触发时，鼠标指针的垂直坐标。
int .screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
int .screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
int .layerX 获取鼠标指针位置相对于触发事件的对象的 x 坐标。
int .layerY 获取鼠标指针位置相对于触发事件的对象的 y 坐标。
DOM .relatedTarget 返回与事件的目标节点相关的节点。(未包装)
int .detail 获取滚轮按钮滚动的距离和方向。
DOM .target 返回触发此事件的元素（事件的目标节点）。(未包装)
DOM .currentTarget 返回其事件监听器触发该事件的元素。(未包装)
string .type 返回当前 Event 对象表示的事件的名称。
ZDOM .getTarget() 返回触发事件对象(已包装 zhuozhuo.element.*)
Event .preventDefault() 取消事件的默认动作返回当前事件包装
Event .stopPropagation() 停止事件冒泡返回当前事件包装

事件监听
new zhuozhuo.event.Listener()
array .listeners 事件监听队列
void .addListener(eventName, handler) 添加事件(事件名,处理函数)
void .removeListener(eventName, handler) 添加事件(事件名,处理函数)
void .notifyEvent(eventName, eventObject) 通知事件(事件名,希望传递的事件参数对象)

节点包装
array zhuozhuo.element.zdomcache 包装对象缓存　此对象用于重复包装同一节点
void zhuozhuo.element.syncCache() 同步对象缓存触发空对象finalize() 释放事件
ZDOM zhuozhuo.element.extend(HTMLElement) 包装节点返回已包装element对象
ZDOM zhuozhuo.element.createTable(rows, cells) 创建表格
ZDOM zhuozhuo.element.createElement(tagName) 创建标签
object zhuozhuo.element.view.getDimensions() 获取尺寸 {Integer pageWidth,Integer pageHeight,Integer screenWidth,Integer screenHeight}
object zhuozhuo.element.view.getScrollOffsets() 获取滚动条偏移位置 {Integer top,Integer left}

css规则元素包装
array zhuozhuo.element.getElementsBySelector(selectors, ZDOM) 使用css3选择符号

new zhuozhuo.element.window(DOM) extneds zhuozhuo.event.Listener window节点包装类
DOM .element 被包装节点
array .eventsmaps 包装事件影射 {key,callback}
ZDOM .addEvent(eventName, handler) 添加事件返回当前包装实例
ZDOM .removeEvent(eventName, handler) 删除事件返回当前包装实例
ZDOM .startCapture() 开始捕获鼠标返回当前包装实例
ZDOM .stopCapture() 停止捕获鼠标返回当前包装实例

zhuozhuo.element.document extends zhuozhuo.element.window 通用文档节点包装类
new zhuozhuo.element.document(DOM)
object .getBySelector(selectors[, isAll]) 使用当前对象调用 zhuozhuo.getBySelector
bool .hasClassName(className) 判断是否存在指定样式类名
ZDOM .addClassName(className) 添加指定名称样式定义返回当前包装实例
ZDOM .removeClassName(className) 删除指定名称样式定义返回当前包装实例
bool .hasAttribute(attributeName) 判断是否存在指定属性
ZDOM .setAttribute(name, value) 设置指定名称属性返回当前包装实例
ZDOM .setAttribute(attributes) 设置指定名称属性 {n0:v0,n1:v1....} 返回当前包装实例
object .getAttribute(attributeName) 获取属性值
ZDOM .setStyle(name, value) 设置样式返回当前包装实例
ZDOM .setStyle(styles) 设置样式 {n0:v0,n1:v1....} 返回当前包装实例
string .getStyle(styleName) 获取样式
ZDOM .setAlphaImage(imgurl) 设置背景图返回当前包装实例
string .getAlphaImage() 获取背景图
ZDOM .setOpacity(opacity) 设置透明度 0 - 1 返回当前包装实例
float .getOpacity() 获取透明度
ZDOM .setText(value) 设置节点text内容返回当前包装实例
string .getText() 获取节点text内容
ZDOM .setHTML(value) 设置节点html内容返回当前包装实例
string .getHTML() 获取节点html内容
ZDOM .show(value) 显示节点 value 默认为 "block" 返回当前包装实例
ZDOM .hide() 隐藏节点返回当前包装实例
ZDOM .toggle(value) 显示或隐藏节点返回当前包装实例
object .getOffsets() 获取放置偏移坐标 {left, top}
object .getDimensions() 获取尺寸{width, height}
ZDOM .remove() 删除自己返回当前包装实例触发一次同步缓村操作
ZDOM .append(ZDOM) 附加结点返回被附加节点返回新节点
string .append(string html) 附加文本内容代码
ZDOM .insert(sWhere, ZDOM) 插入节点sWhere=beforeBegin|afterBegin|beforeEnd|afterEnd返回新插入的节点
ZDOM .animate(Object styles, int frames, int delay, int factor, fn callback(ZDOM node, int frames))
自定义动画 (value:目的样式属性,frames:帧数,delay:每帧时间,factor:渐变因子(为"average"或非数字时等于平均变化,否则每次按照此设置除法递减),callback:回调参数)
callback 调用有两个参数node和frames node=被执节点,frames=当前倒数帧数 frames到1 到数为1表示最后一帧 0表示结束
ZDOM .animate(Object styles, int frames, int delay, fn callback) 自定义动画
ZDOM .animate(Object styles, int frames, fn callback) 自定义动画
ZDOM .animate(Object styles, fn callback) 自定义动画
ZDOM .animate(Object styles) 自定义动画
................................................................................
new zhuozhuo.element.tag.FORM extends zhuozhuo.element.document
new zhuozhuo.element.tag.INPUT extends zhuozhuo.element.document 表单元素包装
string .getValue() 获取值
ZDOM .setValue(string value) 设置值返回当前包装
................................................................................
new zhuozhuo.element.tag.TEXTAREA extends zhuozhuo.element.tag.INPUT 多行文本输入包装
................................................................................
new zhuozhuo.element.tag.SELECR extends zhuozhuo.element.tag.INPUT 选择筐输入包装

--------------------------------------------------------------------------------
ajax对象
zhuozhuo.ajax.Response
构造:
new zhuozhuo.ajax.Response(XMLHTTP XmlHttp) 包装构建一个新的 AjaxResponse 对象。
属性:
XMLHTTP xmlHttp 被封装Xmlhttp对象
String text 以文本形式获取返回内容
XmlDocument xml 以xml形式获取返回内容
String length 获取返回长度
String type 获取内容类型
Integer status 状态码
方法:
String getAllHeaders() 获取所有返回头
String getHeader(String header) 获取指定名称返回头
---------------------------------------------------------------------------------------------------------
类 zhuozhuo.ajax.Request extends zhuozhuo.event.Listener 继承自事件监听
构造:
new zhuozhuo.ajax.Request() 构建一个新的 Ajax 对象。
属性:
XMLHTTP xmlHttp 此ajax类被包装xmlhttp对象
string encoding = "UTF-8" 编码
string url 请求url
string method 请求方法 get 或 post
bool async 是否异步
string user 帐号
string password 密码
object requestHeaders 请求头集合
方法:
void open(String url, String method = "POST", Boolean async = true, String user = null, String password = null)
创建一个新的http请求，并指定此请求的方法、URL以及验证信息
void setHeader(String header, String value) 设置请求头 (POST打开会自动设置必须header)
void setHeaders(Object headers) 设置请求头
void send(Object varBody = {}) 发送带数据的请求
void onreadystatechange() 异步触发
void abort() 取消当前请求
事件:
事件名参数
request Integer readyState 读取状态状态 0-4 0 (未初始化) 1 (初始化) 2 (发送数据) 3 (数据传送中) 4 (完成);
success Ajax.Response response 请求成功请自行包装xmlhttp
failure Ajax.Response response 请求失败请自行包装xmlhttp
GET请求
zhuozhuo.ajax.Request zhuozhuo.ajax.get({
String url:"", 请求url
Object data:null, 请求数据
boolean async:true, 同步异步
String user:null, 用户名
String password:null, 密码
Function request:ZHUOZHUO.FALSE(int readyState), 请求中
Function success:ZHUOZHUO.FALSE(Ajax.Response response), 成功
Function failure:ZHUOZHUO.FALSE(Ajax.Response response)}); 失败
POST请求
zhuozhuo.ajax.Request zhuozhuo.ajax.post({参数同Ajax.get});

------------------------------------------------------------------------------------------------------------------------------
注解:
class zhuozhuo.zclass([superclass,...]currentclass)
创建javascript类,允许多重继承,并且增加构造和完成函数
例:
var newClass = zhuozhuo.zclass(超类1..,超类N,{ 类方法名:函数体});
var newClass1= zhuozhuo.zclass({ 类方法名:函数体});
构造函数
initialize()
调用父构造函数
类名.superclass.initialize.apply(this, arguments)
完成函数
finalize()
调用父完成函数
类名.superclass.finalize.apply(this)
调用父其他函数
类名.superclass.方法名.apply(this, arguments)
类名.superclass.方法名.call(this[, arg0[, arg1]...])
其他说明
多个父类时,按输入类名顺序,后面的方法覆盖前面类的同名方法

object getById(argv1 [, ...[, argvN]])
根据一个或多个参数获取并包装对象,
参数类型可以为 HTMLElment,string,或 zhuozhuo.element.*, zhuozhuo.element.tag.*的实例
如类型正确,返回包装后的元素实例.多个实例集合为数组

DOM,ZDOM 类型
DOM:未包装DHTMLElement对象
ZDOM:已包装的DHTMLElement实例

<pre lang="javascript" line="1" file="zhuozhuo.js" colla="-">
/*
* zhuozhuo.org javascript library core code
* Shi,Zhuolin
* http://www.zhuozhuo.org
* shizhuolin@hotmail.com
* 2011-03-01
*/
(function(scope){
var zz = scope.zhuozhuo = scope.zhuozhuo || {};
//library version
zz.version = 3.0;
//register namespace
zz.namespace = function(ns){
if (!ns || !ns.length) return null;
var levels = ns.split('.'), nsobj = scope;
for (var i = 0; i < levels.length; i++) {
nsobj[levels[i]] = nsobj[levels[i]] || {};
nsobj = nsobj[levels[i]];
}
return nsobj;
}
//create javascript class
zz.zclass = function(){
var zclass, baseclass, method, superclass = (function(){}).prototype;
zclass = function(){
this.initialize.apply(this, arguments);
}
superclass.initialize = zclass.prototype.initialize = function(){};
superclass.finalize = zclass.prototype.finalize = function(){
for(var key in this) this[key] = null;
}
for(var i = 0, length = arguments.length; i < length; i++){
if(zz.util.isFunction(arguments[i])){
baseclass = function(){};
baseclass.prototype = arguments[i].prototype;
baseclass = new baseclass;
for(method in baseclass) superclass[method] = baseclass[method];
}else {
baseclass = arguments[i];
}
for(method in baseclass)
if(!/^(toString|valueOf)$/.test(method))
if(zz.util.isFunction(baseclass[method])) zclass.prototype[method] = baseclass[method];
if(baseclass.toString!== Object.prototype.toString) zclass.prototype.toString= baseclass.toString;
if(baseclass.valueOf !== Object.prototype.valueOf) zclass.prototype.valueOf = baseclass.valueOf;
}
zclass.superclass = superclass;
return zclass;
}
//zhuozhuo.getById
zz.getById = function(){
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++) elements.push(zz.getById(arguments[i]));
return elements;
}
return zz.element.extend(zz.util.isString(arguments[0]) ? document.getElementById(arguments[0]) : arguments[0]);
}
//zhuozhuo.getBySelector
zz.getBySelector = function(selectors, isAll){
return zz.getById(document).getBySelector(selectors, isAll);
}
})(this);
//browser information
(function(scope){
var agent = navigator.userAgent;
scope.zhuozhuo.browser = {
version : (/MSIE\s(\d+(\.\d+)*)/.exec(agent) || /rv:(\d+(\.\d+)*)/.exec(agent) || /AppleWebKit\/(\d+(\.\d+)*)/.exec(agent) || /Opera.(\d+(\.\d+)*)?/.exec(agent) || /Presto\/(\d+(\.\d+)*)/.exec(agent) || /KHTML\/(\d+(\.\d+)*)/.exec(agent) || /Konqueror\/(\d+(\.\d+)*)/.exec(agent) || /[;$]\s*(\w?\d+(\.\d+)*)\s*$?/.exec(agent) || [,null])[1],
kernel : {
isTrident : agent.indexOf("MSIE") > -1,
isGecko : agent.indexOf("Gecko/") > -1,
isPresto : agent.indexOf("Presto/") > -1 || agent.indexOf("Opera/") > -1,
isWebKit : agent.indexOf("AppleWebKit/") > -1,
isKHTML : agent.indexOf("KHTML/") > -1 || agent.indexOf("Konqueror/") > -1
},
features : {
isXPath : !!document.evaluate,
isSelectorsAPI : !!document.querySelector
}
}
})(this);
//zhuozhuo.util.*
(function(scope){
var zz = scope.zhuozhuo;
zz.util = {
getClass : function(object){
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
},
extend : function(destination, source){
for(var property in source) destination[property] = source[property];
return destination;
},
clone : function(object){
return zz.util.extend({}, object);
},
isArray : function(object){
return zz.util.getClass(object) === "Array";
},
isUndefined : function(object){
return typeof object === "undefined";
},
isFunction : function(object){
return typeof object === "function";
},
isString : function(object){
return typeof object === "string";
},
isNumber : function(object){
return typeof object === "number";
},
toArray : function(iterable){
if (!iterable) return [];
if ("toArray" in iterable) return iterable.toArray();
var length = iterable.length || 0, results = new Array(length);
while (length--) results[length] = iterable[length];
return results;
},
fnEmpty : function(){},
fnTrue : function(){
return true;
},
param : function(object){
var array = [];
for(var key in object) array.push(encodeURIComponent(key) + '=' + encodeURIComponent(object[key]));
return array.join('&');
},
trys : function(){
var result;
for (var i = 0, length = arguments.length; i < length; i++) try {
result = arguments[i]();
break;
}
catch (e) {}
return result;
}
}
zz.util.string = {
trim : function(value){
return value.replace(/(^\s+)|(\s+$)/g, '');
},
wlength : function(value){
return value.replace(/[^\x00-\xff]/g, "rr").length;
},
wsubstr : function(value, wstart, wlength){
wlength = isNaN(wlength) ? Number.MAX_VALUE : wlength;
return wlength == 0 ? "" : zz.util.string.wsubstring(value, wstart, wstart + wlength - 1);
},
wsubstring : function(value, wstart, wend){
var ws = Math.min(wstart, wend), we = Math.max(wstart, wend);
var i = 0, length = value.length, retult = "";
for(; i < length; i++){
var wl = value.substring(0, i).wlength();
if(wl > we) break;
if(wl >= ws) retult += value.substr(i, 1);
}
return retult;
}
}
zz.util.array = {
each : function(arr, handler){
var retus = [];
for (var i = 0, length = arr.length; i < length; i++) retus.push(handler(arr[i], i));
return retus;
},
uniq : function(arr){
var array = [];
for(var i = 0, length = arr.length; i < length; i++)
if(zz.util.array.indexOf(array, arr[i]) == -1) array.push(arr[i]);
return array;
},
indexOf : function(arr, object, startIndex){
startIndex = startIndex || 0;
var length = arr.length;
if(startIndex < 0) startIndex = 0;
if(startIndex > length) startIndex = length;
for(; startIndex < length; startIndex++)
if(arr[startIndex] === object) return startIndex;
return -1;
}
}
})(this);
//zhuozhuo.event.*
(function(scope){
var zz = scope.zhuozhuo;
var util = zz.util;
zz.event = {
Event : zz.zclass({
initialize : function(event){
this.event = event;
this.altKey = event.altKey;
this.clientX = event.clientX;
this.clientY = event.clientY;
this.ctrlKey = event.ctrlKey;
this.keyCode = event.keyCode;
this.screenX = event.screenX;
this.screenY = event.screenY;
this.layerX = event.offsetX || event.layerX;
this.layerY = event.offsetY || event.layerY;
this.shiftKey= event.shiftKey;
this.detail = event.detail ? event.detail > 0 ? 1 : -1 : event.wheelDelta > 0 ? -1 : 1;
this.target = event.srcElement || event.target;
this.type = event.type;
this.relatedTarget= event.fromElement || event.relatedTarget;
this.currentTarget= event.toElement || event.currentTarget;
},
stopPropagation : function(){
var event = this.event;
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
return this;
},
preventDefault : function(){
var event = this.event;
event.preventDefault ? event.preventDefault() : event.returnValue = false;
return this;
},
getTarget : function(){
var node = this.target, type = this.type;
var currentTarget = this.currentTarget;
if ((currentTarget && currentTarget.tagName) && (type === "load" || type === "error" || (type === "click" && currentTarget.tagName.toLowerCase() === "input" && currentTarget.type === "radio"))) node = currentTarget;
if(node.nodeType === 3) node = node.parentNode;
return zz.element.extend(node);
}
}),
Listener : zz.zclass({
initialize : function(){
this.listeners = [];
},
addListener : function(eventName, handler){
if(!util.isFunction(handler)) return;
for(var i = 0, length = this.listeners.length; i < length; i++)
if(this.listeners[i].eventName === eventName && this.listeners[i].handler === handler)
return;
this.listeners.push({
eventName : eventName,
handler : handler
});
},
removeListener : function(eventName, handler){
if(!util.isFunction(handler)) return;
for(var i = 0, length = this.listeners.length; i < length; i++)
if(this.listeners[i].eventName === eventName && this.listeners[i].handler === handler)
{
this.listeners[i] = this.listeners[i].eventName = this.listeners[i].handler = null;
this.listeners.splice(i, 1);
return;
}
},
notifyEvent : function(eName, eobj){
for(var i = 0, length = this.listeners.length; i < length; i++)
if(this.listeners[i].eventName === eName)
this.listeners[i].handler(eobj);
},
finalize : function(){
for(var i = 0, length = this.listeners.length; i < length; i++)
this.listeners[i].eventName = this.listeners[i].handler = null;
zz.event.Listener.superclass.finalize.apply(this)
}
})
}
})(this);
//window and document and other element
(function(scope){
var zz = scope.zhuozhuo;
var util = zz.util;
zz.namespace("zhuozhuo.element.tag");
zz.element.zdomcache = [];
zz.element.syncCache = function(){
var newcache = [];
for(var i = 0, length = zz.element.zdomcache.length; i < length; i++){
if(!checkin(zz.element.zdomcache[i].element)){
zz.element.zdomcache[i].finalize();
zz.element.zdomcache[i] = null;
}else newcache.push(zz.element.zdomcache[i]);
}
zz.element.zdomcache = newcache;
function checkin(ele){
while(ele){
if(ele === window.document.body) return true
if(ele === window.document) return true;
if(ele === window) return true;
ele = ele.parentNode;
}
return false;
}
};
zz.element.extend = function(element){
if(!element || util.isFunction(element) || !!element.element || !!element.initialize) return element;
var byClass;
if(element === window) byClass = zz.element.window;
else{
if(element === document) byClass = zz.element.document;
else{
if(element.nodeType != 1) return element;
byClass = zz.element.tag[element.tagName.toUpperCase()] || zz.element.document;
}
}
for(var i=0, length = zz.element.zdomcache.length; i < length ; i++)
if(zz.element.zdomcache[i].element === element) return zz.element.zdomcache[i];
var zdom = new byClass(element);
zz.element.zdomcache.push(zdom);
return zdom;
}
zz.element.createTable = function(rows, cells){
var table = document.createElement("table");
for(var i = 0; i < rows; i++){
table.insertRow(i);
for(var j = 0; j < cells; j++) table.rows[i].insertCell(j);
}
return zz.element.extend(table);
}
zz.element.createElement= function(tagName){
return zz.element.extend(document.createElement(tagName));
}
zz.element.view = {
getDimensions : function(){
var scrW, scrH, win = window, doc = document;
if(win.innerHeight && win.scrollMaxY) {
scrW = win.innerWidth + win.scrollMaxX;
scrH = win.innerHeight + win.scrollMaxY;
} else if(!doc.body && doc.documentElement && doc.documentElement.scrollWidth){
scrW = doc.documentElement.scrollWidth;
scrH = doc.documentElement.scrollHeight;
} else if(doc.body){
scrW = doc.body.scrollWidth;
scrH = doc.body.scrollHeight;
}
var winW, winH;
if(win.innerHeight) {
winW = win.innerWidth;
winH = win.innerHeight;
} else if (doc.documentElement && doc.documentElement.clientHeight){
winW = doc.documentElement.clientWidth;
winH = doc.documentElement.clientHeight;
} else if (doc.body) {
winW = doc.body.clientWidth;
winH = doc.body.clientHeight;
}
var pageW = scrW < winW ? winW : scrW;
var pageH = scrH < winH ? winH : scrH;
return {
pageWidth : pageW,
pageHeight : pageH,
screenWidth : winW,
screenHeight: winH
};
},
getScrollOffsets : function(){
var top = 0, left = 0, win = window, doc = document;
if(win.pageYOffset){
top = win.pageYOffset;
left = win.pageXOffset;
}else if(doc.compatMode && doc.compatMode != "BackCompat"){
top = doc.documentElement.scrollTop;
left = doc.documentElement.scrollLeft;
}else if(doc.body){
top = doc.body.scrollTop;
left = doc.body.scrollLeft;
}
return {
top : top,
left : left
};
}
}
zz.element.getElementsBySelector = function(selectors, zdom){
var element = zdom.element;
var _re0 = "(?=([^\"\']*[\"\'][^\"']*[\"'])*(?![^\"']*[\"']))";
var _re1 = "(?=([^\\[]*\\[[^\\]]*\\])*(?![^\\]]*\\]))";
var elements = zz.browser.features.isSelectorsAPI ? util.toArray(element.querySelectorAll(selectors)) : zz.browser.features.isXPath ? _querySelectorAllByXPath(selectors, element) : _querySelectorAllByJavaScript(selectors, element);
for(var i = 0, length = elements.length; i < length; i++) elements[i] = zz.element.extend(elements[i]);
function _querySelectorAllByXPath(selectors, element){
var xpath = selectors.trim();
xpath = xpath.replace(new RegExp("^\\s*|\\s*,\\s*" + _re1, 'g'), function(e){
return (e.indexOf(',') > -1 ? '|' : '') + ".//*";
});
xpath = xpath.replace(new RegExp("\\s*~\\s*" + _re1, 'g'), "/following-sibling::*");
xpath = xpath.replace(new RegExp("\\s*\\+\\s*" + _re1, 'g'), "/following-sibling::*[1]");
xpath = xpath.replace(new RegExp("\\s*>\\s*" + _re1, 'g'), "/*");
xpath = xpath.replace(new RegExp("\\s+" + _re1, 'g'), "//*");
xpath = xpath.replace(new RegExp("\\*(\\w)" + _re1, 'g'), "$1");
xpath = xpath.replace(new RegExp("\\[\\s*(\\w+)\\s*]" + _re0, 'g'), "[@$1]");
xpath = xpath.replace(new RegExp("\\.(\\w+)" + _re0, 'g'), "[class~='$1']");
xpath = xpath.replace(new RegExp("#(\\w+)" + _re0, 'g'), "[id='$1']");
xpath = xpath.replace(new RegExp("\\[\\s*(\\w+)\\s*\\^=\\s*'?([^']*)'?\\s*]" + _re0, 'g'), "[starts-with(@$1,'$2')]");
xpath = xpath.replace(new RegExp("\\[\\s*(\\w+)\\s*\\$=\\s*'?([^']*)'?\\s*]" + _re0, 'g'), "[substring(@$1,(string-length(@$1) - string-length('$2') + 1))='$2']");
xpath = xpath.replace(new RegExp("\\[\\s*(\\w+)\\s*\\*=\\s*'?([^']*)'?\\s*]" + _re0, 'g'), "[contains(@$1,'$2')]");
xpath = xpath.replace(new RegExp("\\[\\s*(\\w+)\\s*\\|=\\s*'?([^']*)'?\\s*]" + _re0, 'g'), "[contains(concat('-',@$1,'-'),'-$2-')]");
xpath = xpath.replace(new RegExp("\\[\\s*(\\w+)\\s*~=\\s*'?([^']*)'?\\s*]" + _re0, 'g'), "[contains(concat(' ',@$1,' '),' $2 ')]");
xpath = xpath.replace(new RegExp("\\[\\s*(\\w+)\\s*=\\s*'?([^']*)'?\\s*]" + _re0, 'g'), "[@$1='$2']");
var query = doc.evaluate(xpath, element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null), results = [];
for(var i = 0, length = query.snapshotLength; i < length; i++) results.push(query.snapshotItem(i));
return results;
}
function _querySelectorAllByJavaScript(selectors, element){
var expression = util.string.trim(selectors);
expression = expression.replace(new RegExp("(^|\\s|,|>|\\+|~)(#|\\.|\\[)" + _re0, 'g'), "$1*$2");
expression = expression.replace(new RegExp("\\s{2,}" + _re0, 'g'), ' ');
expression = expression.replace(new RegExp("\\s*(>|\\+|~|,)\\s*" + _re0, 'g'), '$1');
expression = expression.replace(new RegExp("#(\\w+)" + _re0, 'g'), "[id='$1']");
expression = expression.replace(new RegExp("\\.(\\w+)" + _re0, 'g'), "[class~='$1']");
var ElementArray = [], elements, child, selector;
util.array.each(util.string.trim(expression).split(new RegExp(',' + _re1, 'g')), function(strSelector){
if(strSelector == '') return false;
elements = [element];
strSelector = strSelector.replace(new RegExp("(\\s|>|\\+|~)(\\w|\\*)" + _re1, 'g'), "\n$1$2").split('\n');
for (var i = 0, length = strSelector.length; i < length; i++){
child = strSelector[i].substr(0, 1);
selector= strSelector[i].substr(1);
switch(child){
case ' ' :
elements = __concatMatcher(selector, elements);
break;
case '>' :
elements = __childSelectors(selector, elements);
break;
case '+' :
elements = __nextSiblings(selector, elements);
break;
case '~' :
elements = __nextSiblingAll(selector, elements);
break;
default :
elements = __concatMatcher(strSelector[i], elements);
}
}
ElementArray = ElementArray.concat(elements);
return false;
});
function __getTagAttrs(selector){
var TAASL = selector.replace(new RegExp("(\\[|])" + _re0, 'g'), '\n').split('\n');
var tagName = TAASL[0], attrs=[];
TAASL.shift();
util.array.each(TAASL, function(v){
v = util.string.trim(v);
if(v != '' ) attrs.push('['+v+']');
});
attrs = attrs.join('');
return {
tagName : tagName,
attrs : attrs
};
}
function __getAttr(element, attributeName){
if(attributeName == "class" && zz.browser.kernel.isTrident) return element.className;
if(attributeName == "style" && zz.browser.kernel.isTrident) return element.style.cssText;
return element.getAttribute(attributeName);
}
function __checkAttr(element, attrs){
var TAASL = attrs.replace(new RegExp("\\[|]" + _re0, 'g'), '\n').split('\n'), value, returs = true;
if(element.nodeType != 1) return false;
for(var i = 0, length = TAASL.length; i < length; i++){
attrs = util.string.trim(TAASL[i]);
if(attrs == '') continue;
attrs = attrs.replace(new RegExp("([~\\|\\^\\$\\*]?=)" + _re0, 'g'), "\n$1\n").split('\n');
attrs[0] = util.string.trim(attrs[0]);
value = __getAttr(element, attrs[0]);
if(attrs.length == 1){
if(!/^(class|style)$/.test(attrs[0]) && (value === null || element[attrs[0]] === undefined)) returs = false;
}else{
attrs[2] = attrs[2].replace(/(^\s*')|('\s*$)/g, '');
switch(attrs[1]){
case "|=" :
if(!new RegExp("(^|-)" + attrs[2] + "(-|$)", 'g').test(value)) returs = false;
break;
case "~=" :
if(!new RegExp("(^|\\s)" + attrs[2] + "(\\s|$)", 'g').test(value)) returs = false;
break;
case "*=" :
if(!new RegExp(attrs[2], 'g').test(value)) returs = false;
break;
case "$=" :
if(!new RegExp(attrs[2] + '$', 'g').test(value)) returs = false;
break;
case "^=" :
if(!new RegExp('^' + attrs[2], 'g').test(value)) returs = false;
break;
default :
if(!new RegExp('^' + attrs[2] + '$', 'g').test(value)) returs = false;
}
}
}
return returs;
}
function __reTagAndAttr(tagAndAttrSelector, element){
var v = __getTagAttrs(tagAndAttrSelector), returs = [];
var elements = element.getElementsByTagName(v.tagName);
for(var i = 0, length = elements.length; i < length; i++)
if(__checkAttr(elements[i], v.attrs)) returs.push(elements[i]);
return returs;
}
function __concatMatcher(selector, elements){
var returs = [];
for(var i = 0, length = elements.length; i < length; i++) returs = returs.concat(__reTagAndAttr(selector, elements[i]));
return returs;
}
function __childSelectors(selector, elements){
var v = __getTagAttrs(selector), tmpelements = [], childnodes;
for(var i = 0, length = elements.length; i < length; i++){
childnodes = elements[i].childNodes;
for(var j = 0, len = childnodes.length; j < len; j++)
if(childnodes[j].nodeType == 1 && __checkAttr(childnodes[j], v.attrs) && (childnodes[j].tagName.toLowerCase() == v.tagName || v.tagName == '*'))
tmpelements.push(childnodes[j]);
}
return tmpelements;
}
function __nextSiblings(selector, elements){
var v = __getTagAttrs(selector), tmpelements = [], next;
for(var i = 0, length = elements.length; i < length; i++){
next = elements[i].nextSibling;
if(next && next.nodeType == 1 && checkattr(next, v.attrs) && (next.tagName.toLowerCase() == v.tagName || v.tagName == '*')) tmpelements.push(next);
}
return tmpelements;
}
function __nextSiblingAll(selector, elements){
var v = __getTagAttrs(selector), tmpelements = [], next;
for(var i = 0, length = elements.length; i < length; i++){
next = elements[i];
while(next){
if(next && next.nodeType == 1 && checkattr(next, v.attrs) && (next.tagName.toLowerCase() == v.tagName || v.tagName == '*')) tmpelements.push(next);
next = next.nextSibling;
}
}
return tmpelements;
}
return util.array.uniq(ElementArray);
}
return elements;
}
zz.element.window = zz.zclass(zz.event.Listener, {
initialize : function(element){
zz.element.window.superclass.initialize.apply(this, arguments)
this.element = element;
this.eventsmaps = [];
},
addEvent : function(eventName, callback){
var handler = function(event){
callback(new zz.event.Event(event));
}
this.eventsmaps.push({
key : callback,
handler: handler
});
this.addListener(eventName, handler);
var element = this.element;
if(eventName.toLowerCase() == "mousewheel" && zz.browser.kernel.isGecko) eventName = "DOMMouseScroll";
element.attachEvent ? element.attachEvent("on" + eventName, handler) : element.addEventListener(eventName, handler, false);
return this;
},
removeEvent : function(eventName, callback){
for(var i = 0, length = this.eventsmaps.length; i < length; i++){
if(this.eventsmaps[i].key === callback){
var element = this.element;
var handler = this.eventsmaps[i].handler;
this.removeListener(eventName, handler);
if(eventName.toLowerCase() == "mousewheel" && zz.browser.kernel.isGecko) eventName = "DOMMouseScroll";
element.detachEvent ? element.detachEvent("on" + eventName, handler) : element.removeEventListener(eventName, handler, false);
this.eventsmaps[i] = this.eventsmaps[i].key = this.eventsmaps[i].handler = null;
this.eventsmaps.splice(i, 1);
return this;
}
}
return this;
},
startCapture : function(){
var element = this.element;
element.setCapture ? element.setCapture() : window.captureEvents ? (zz.browser.kernel.isGecko && parseFloat(zz.browser.version) >= 1.9) ? util.fnEmpty() : window.captureEvents(Event.MOUSEMOVE) : util.fnEmpty();
return this;
},
stopCapture : function(){
var element = this.element;
element.releaseCapture ? element.releaseCapture() : window.releaseEvents ? (zz.browser.kernel.isGecko && parseFloat(zz.browser.version) >= 1.9) ? util.fnEmpty() : window.releaseEvents(Event.MOUSEMOVE) : util.fnEmpty();
return this;
},
finalize : function(){
for(i = 0, length = this.listeners.length; i < length; i++)
this.removeEvent(this.listeners[i].eventName, this.listeners[i].handler);
for(var i = 0, length = this.eventsmaps.length; i < length; i++)
this.eventsmaps[i] = this.eventsmaps[i].key = this.eventsmaps[i].handler = null;
zz.element.window.superclass.finalize.apply(this);
}
});
zz.element.document = zz.zclass(zz.element.window,{
getBySelector : function(selectors, isAll){
var result = zz.element.getElementsBySelector(selectors, this);
return isAll ? result : result.length == 0 ? null : result[0];
},
hasClassName : function(className){
var value = this.element.className;
return (value.length > 0 && (value == className || new RegExp("(^|\\s)" + className + "(\\s|$)").test(value)));
},
addClassName : function(className){
var element = this.element;
if(!this.hasClassName(className)) element.className += (element.className ? ' ' : '') + className;
return this;
},
removeClassName : function(className){
var element = this.element;
element.className = util.string.trim(element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' '));
return this;
},
hasAttribute : function(attributeName) {
if(this.hasAttribute) return this.hasAttribute(attributeName);
return this.getAttribute(attributeName) != null;
},
setAttribute : function(property, value){
if(arguments.length == 1) for(var name in property) this.setAttribute(name, property[name]);
else{
var element = this.element;
if(property == "style" && zz.browser.kernel.isTrident) element.style.cssText = value;
else element.setAttribute(property, value);
}
return this;
},
getAttribute : function(attributeName){
var element = this.element;
if(attributeName == "class" && ZHUOZHUO.BrowserKernel.Trident) return element.className;
if(attributeName == "style" && ZHUOZHUO.BrowserKernel.Trident) return element.style.cssText;
return element.getAttribute(attributeName);
},
setStyle : function(property, value){
if(arguments.length == 1) for(var style in property) this.setStyle(style, property[style]);
else{
if(zz.browser.kernel.isTrident && parseFloat(zz.browser.version) < 8.0 && property == "zIndex" && value == "auto") value = "";
property == "alphaImage" ? this.setAlphaImage(value) : property == "opacity" ? this.setOpacity(value) : this.element.style[property == "styleFloat" ? document.defaultView ? "cssFloat" : property : property] = value;
}
return this;
},
getStyle : function(styleName){
var element = this.element;
if(styleName == "opacity") return this.getOpacity();
if(styleName == "alphaImage") return this.getAlphaImage();
styleName = styleName == "styleFloat" ? document.defaultView ? "cssFloat" : styleName : styleName;
styleName = styleName == "${opacity}" ? "opacity" : styleName;
var value = element.currentStyle ? element.currentStyle[styleName] : document.defaultView.getComputedStyle(element, null) ? document.defaultView.getComputedStyle(element, null)[styleName] : element.style[styleName];
if(/^(width|height)$/.test(styleName) && (isNaN(parseFloat(value)) || value.indexOf('%') > -1)){
var values = styleName == "width" ? ["Left", "Right"] : ["Top", "Bottom"];
var padding = 0, border = 0;
value = (styleName == "width") ? element.offsetWidth : element.offsetHeight;
for(var i = 0, length = values.length; i < length; i++){
padding += parseFloat(this.getStyle("padding" + values[i])) || 0;
border += parseFloat(this.getStyle("border" + values[i] + "Width")) || 0;
}
value = value - padding - border + "px";
}
return value ? value : null;
},
setAlphaImage : function(url){
var element = this.element;
if(element.filters){
var filterName = "DXImageTransform.Microsoft.AlphaImageLoader";
var AlphaImageLoader = element.filters[filterName];
if(AlphaImageLoader){
AlphaImageLoader.src = url;
AlphaImageLoader.sizingMethod = "crop";
AlphaImageLoader.Enabled = !!url;
}else if(url) element.style.filter = "progid:" + filterName + "(sizingMethod=\"crop\", src=\"" + url + "\")";
}else{
if(url){
element.style.backgroundImage = "url(\"" + url + "\")";
element.style.backgroundRepeat= "no-repeat";
}else element.style.backgroundImage = "none";
}
return this;
},
getAlphaImage : function(){
if(this.element.filters){
var AlphaImageLoader = this.element.filters["DXImageTransform.Microsoft.AlphaImageLoader"];
return (AlphaImageLoader && AlphaImageLoader.Enabled) ? AlphaImageLoader.src : null;
}else return this.getStyle("backgroundImage").replace(/^\s*url\s*$\s*["']?\s*([^"'$]+)\s*['"]?\s*\)\s*$/i,"$1") || null;
},
setOpacity : function(opacity){
var element = this.element;
if(element.filters){
var filterName = "DXImageTransform.Microsoft.Alpha";
var Alpha = element.filters[filterName];
opacity = opacity * 100;
if(Alpha){
Alpha.Enabled = opacity !== 100;
Alpha.Opacity = opacity;
}else if(opacity !== 100) element.style.filter = "progid:" + filterName + "(opacity = " + opacity + ")";
}else{
element.style.opacity = opacity;
element.style.MozOpacity = opacity;
element.style.KhtmlOpacity= opacity;
}
return this;
},
getOpacity : function(){
var opacity = NaN;
if(this.element.filters){
var Alpha = this.element.filters["DXImageTransform.Microsoft.Alpha"];
opacity = (Alpha && Alpha.Enabled) ? Alpha.Opacity / 100 : NaN;
}
if(isNaN(opacity)) opacity = parseFloat(this.getStyle("${opacity}"));
if(isNaN(opacity)) opacity = parseFloat(this.getStyle("MozOpacity"));
if(isNaN(opacity)) opacity = parseFloat(this.getStyle("KhtmlOpacity"));
if(isNaN(opacity)) opacity = 1;
return opacity;
},
setText : function(value){
var element = this.element;
element.innerHTML = '';
element.innerText ? element.innerText = value : element.appendChild(document.createTextNode(value));
return this;
},
getText : function(){
var element = this.element;
if(element.innerText) return element.innerText;
var value = undefined;
try{
value = element.textContent;
}catch(e){}
return value || element.innerHTML.replace(/<[^<>]*>/g, '').replace(" ", ' ').replace("<", '<').replace(">", '>').replace("&", '&').replace(""", '"');
},
setHTML : function(value){
this.element.innerHTML = value;
return this;
},
getHTML : function(){
return this.element.innerHTML;
},
show : function(value){
this.element.style.display = value || "block";
return this;
},
hide : function(){
this.element.style.display = "none";
return this;
},
toggle : function(value){
return this.getStyle("display") == "none" ? this.show(value) : this.hide();
},
getOffsets : function(){
var top = 0, left = 0, element = this.element;
do{
top += element.offsetTop || 0;
left+= element.offsetLeft || 0;
element = element.offsetParent;
if(element){
if(element.tagName.toUpperCase() == 'BODY') break;
if((element.currentStyle ? element.currentStyle["position"] : document.defaultView.getComputedStyle(element, null) ? document.defaultView.getComputedStyle(element, null)["position"] : element.style["position"]) !== "static") break;
}
}while(element);
return {
left : left,
top : top
};
},
getDimensions : function(){
var element = this.element;
var display = this.getStyle("display");
if (display != "none" && display != null) return {
width : element.offsetWidth,
height : element.offsetHeight
};
var originalVisibility= this.getStyle("visibility");
var originalPosition = this.getStyle("position");
var originalDisplay = this.getStyle("display");
element.style.visibility = "hidden";
element.style.position = "absolute";
element.style.display = "block";
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
element.style.visibility = originalVisibility;
element.style.position = originalPosition;
element.style.display = originalDisplay;
return {
width : originalWidth,
height : originalHeight
};
},
remove : function(){
var element = this.element;
if(zz.browser.kernel.isTrident){
var div = document.createElement("div");
div.appendChild(element);
div.innerHTML = '';
}else element.parentNode.removeChild(element);
zz.element.syncCache();
return this;
},
append : function(o){
if(util.isString(o)) this.element.innerHTML += o;
else this.element.appendChild(o.element);
return o;
},
insert : function(sWhere, oElement){
var newobj = oElement.element, element = this.element;
if(element.insertAdjacentElement) element.insertAdjacentElement(sWhere, newobj);
else{
sWhere = sWhere.toLowerCase();
var parentNode = element.parentNode;
switch(sWhere){
case "beforebegin" :
parentNode.insertBefore(newobj, element);
break;
case "afterbegin" :
element.insertBefore(newobj, element.firstChild);
break;
case "beforeend" :
element.appendChild(newobj);
break;
case "afterend" :
element.nextSibling ? parentNode.insertBefore(newobj, element.nextSibling) : parentNode.appendChild(newobj);
break;
default :
throw "function insertElement(element, sWhere{error!}, oElement)";
}
}
return oElement;
},
animate : function(styles, frames, delay, factor, callback){
if(util.isFunction(frames)){
callback = frames;
frames = 6;
}
if(util.isFunction(delay)){
callback = delay;
delay = 50;
}
if(util.isFunction(factor)){
callback = factor;
factor = "average";
}
frames = frames ? frames : 6;
delay = delay ? delay : 50;
factor = factor ? factor : "average";
callback = callback ? callback : util.fnEmpty;
var toStyles = util.clone(styles);
var newStyles = util.clone(styles);
var average = util.isNumber(factor) ? factor : frames;
for(var style in newStyles){
var newStyle = parseFloat(this.getStyle(style));
var toStyle = parseFloat(toStyles[style]);
var nowStyle = (newStyle < toStyle) ? newStyle + (toStyle - newStyle) / average : newStyle - (newStyle - toStyle) / average;
nowStyle = Math.round(nowStyle * 100) / 100;
nowStyle = toStyles[style].toString().replace(toStyle, nowStyle);
newStyles[style] = nowStyle;
}
var element = this;
if(this._changeAnimate) window.clearTimeout(this._changeAnimate);
this._changeAnimate = window.setTimeout(function(){
if(frames > 1){
element.setStyle(newStyles);
element.animate(styles, frames - 1, delay, factor, callback);
}else{
window.clearTimeout(element._changeAnimate);
element._changeAnimate = null;
element.setStyle(styles);
}
callback(element, frames - 1);
}, delay);
return this;
}
});
zz.element.tag.FORM = zz.zclass(zz.element.document,{});
zz.element.tag.INPUT = zz.zclass(zz.element.document,{
getValue : function(){
return this.element.value;
},
setValue : function(value){
this.element.value = value;
return this;
}
});
zz.element.tag.TEXTAREA = zz.zclass(zz.element.tag.INPUT,{});
zz.element.tag.SELECT = zz.zclass(zz.element.tag.INPUT,{});
})(this);

(function(scope){
var zz = scope.zhuozhuo, util = scope.zhuozhuo.util;
/* Ajax */
zz.ajax = {
/* class ajax.Response */
Response : zz.zclass({
initialize : function(xmlHttp){
zz.ajax.Response.superclass.initialize.apply(this);
this.xmlHttp = xmlHttp;
this.readyState = xmlHttp.readyState;
this.text = xmlHttp.responseText;
this.xml = xmlHttp.responseXML;
this.status = xmlHttp.status;
this.length = this.getHeader("Content-Length");
this.type = this.getHeader("Content-Type");
},
getAllHeaders : function(){
return this.xmlHttp.getAllResponseHeaders();
},
getHeader : function(header){
try{
return this.xmlHttp.getResponseHeader(header);
}catch(e){}
return null;
}
}),
/* class Ajax.Request */
Request : zz.zclass(zz.event.Listener, {
initialize : function(){
zz.ajax.Request.superclass.initialize.apply(this);
this.xmlHttp = util.trys(function(){
return new XMLHttpRequest();
}, function(){
return new ActiveXObject("Msxml2.XMLHTTP");
}, function(){
return new ActiveXObject("Microsoft.XMLHTTP");
}) || null;
this.encoding = "UTF-8";
},
open : function(url, method, async, user, password){
this.url = url;
this.method = (method || "POST").toUpperCase();
this.async = async !== undefined ? async : true;
this.user = user || null;
this.password = password || null;
this.requestHeaders= {};
if(this.method == "POST") this.setHeader("Content-Type", "application/x-www-form-urlencoded; charset=" + this.encoding);
},
setHeader : function(header, value){
this.requestHeaders[header] = value;
},
setHeaders : function(headers){
Object.extend(this.requestHeaders, headers);
},
send : function(params){
params = util.param(util.extend(util.clone(params),{
_:''
}));
var runtime = this;
this.url += this.method == "GET" ? (this.url.indexOf('?') > -1 ? '&' : '?') + params : '';
this.xmlHttp.open(this.method, this.url, this.async, this.user, this.password);
if(this.async) this.xmlHttp.onreadystatechange = function(){
runtime.onreadystatechange(runtime);
};
for(var header in this.requestHeaders) this.xmlHttp.setRequestHeader(header, this.requestHeaders[header]);
this.xmlHttp.send(this.method == "POST" ? params : null);
if(!this.async) this.onreadystatechange(runtime);
},
abort : function(){
this.xmlHttp.abort();
},
onreadystatechange : function(runtime){
runtime.notifyEvent("request", runtime.xmlHttp.readyState);
if(runtime.xmlHttp.readyState == 4)
runtime.notifyEvent(runtime.xmlHttp.status == 200 ? "success" : "failure", new zz.ajax.Response(runtime.xmlHttp));
}
}),
/* get Function */
get : function(conf,method){
var cf = util.extend(util.clone({
url:"",
data:null,
async:true,
user:null,
password:null,
request:util.fnEmpty,
success:util.fnEmpty,
failure:util.fnEmpty
}),conf);
var ajax = new zz.ajax.Request();
ajax.open(cf.url, method || "GET", cf.async, cf.user, cf.password);
ajax.addListener("request",cf.request);
ajax.addListener("success",cf.success);
ajax.addListener("failure",cf.failure);
ajax.send(cf.data);
return ajax;
},
/* post Function */
post : function(conf){
return zz.ajax.get(conf, "POST");
}
}
})(this);
</pre>

图形类
class org.zhuozhuo.graphics(string || element || zhuozhuo.element.*) 构造包装画图区域节点
属性
zhuozhuo.element.* element 画板对象
string originalHTML 画板节点原来的html内容
int cx 偏移x
int cy 偏移y
int width 画板宽度
int height 画板高度
int pen.x 画笔x坐标
int pen.y 画笔y坐标
int pen.size 画笔大小
string pen.color 画笔颜色
float pen.alpha 画笔透明度0-1
string pen.font 文字颜色
object canvas canvas 画板
object vml vml画板
方法
void setPen(object) 设置画笔 {} 属性请参考 this.pen
int getCurrentCX(x) 获取当前偏移x this.cx+x
int getCurrentCY(y) 获取当前偏移y this.cy+y
object getPen() 获取画笔
void clear() 清空画板
void fillRect(x,y,w,h) 填充区域
void drawArc(x, y, radius, startAngle, endAngle) 画圆
void drawDot(x, y) 画点
void drawLine(x1,y1,x2,y2) 画线
void drawRect(x,y,width,height) 画矩形
void drawOval(x,y,width,height) 画椭圆
void lineTo(x,y) 画线到制定坐标
void moveTo(x,y) 移动画笔到指定坐标
void drawPolygon(xpoints,ypoints) 画多边形
void drawString(str,x,y) 写字

class org.zhuozhuo.graphics3d extends org.zhuozhuo.graphics 3d图形类
属性
array transform3d 3d元素数组 3d世界
方法
int add3dDot(x,y,z) 添加3d点返回新添加的点索引 0开始
int add3dLine(x,y,z) 添加3d线返回新增加的点索引
object add3dCube(x,y,z,width,height,length) 添加3d立方体返回新增加的立方体索引 {begin,end}
void show3d(d) 显示transform3d内容投影
P2D translate2d(P3D,D) 投影到2d
void rotationx(r[,object]) 旋转元素不指定为旋转全部
void rotationy(r[,object]) 旋转元素不指定为旋转全部
void rotationz(r[,object]) 旋转元素不指定为旋转全部

<pre lang="javascript" line="1" file="org_zhuozhuo_graphics.js" colla="-">
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
var Graphics = Class({
initialize : function(element){
Graphics.superclass.initialize.apply(this, arguments);
var p = element.getOffsets();
var d = element.getDimensions();
this._oldhtml = element.innerHTML;
this._element = element;
this._cx = 0;
this._cy = 0;
this._width = d.width;
this._height= d.height;
this._pen = {
x : 0,
y : 0,
size : 1,
color: "#000",
alpha: 1,
font : "normal 12px normal"
};
//canvas
var canvas = document.createElement("canvas");
if(canvas.getContext){
canvas.width = this._width;
canvas.height= this._height;
this._element.appendChild(canvas);
this._canvas = canvas.getContext("2d");
this.setPen(this._pen);
return;
}
//vml
if(ZHUOZHUO.BrowserKernel.Trident){
document.namespaces.add("vml","urn:schemas-microsoft-com:vml");
document.createStyleSheet().addRule(".vml","behavior:url(#default#VML);display:inline-block");
this._vml = $(document.createElement("vml:group")).setAttr({
style : "position:relative;width:"+this._width+"px;height:"+this._height+"px",
coordsize: this._width+','+this._height,
className: "vml"
});
this._element.appendChild(this._vml);
this.setPen(this._pen);
return;
}
//div
this._cx = p.left;
this._cy = p.top;
this.setPen(this._pen);
},
_getX : function(x){
return this._cx + x;
},
_getY : function(y){
return this._cy + y;
},
//设置画笔
setPen : function(pen){
if(this._canvas){
this._canvas.fillStyle = pen.color || this._pen.color;
this._canvas.strokeStyle= pen.color || this._pen.color;
this._canvas.globalAlpha= pen.alpha || this._pen.alpha;
this._canvas.lineWidth = pen.size || this._pen.size;
this._canvas.moveTo(pen.x || this._pen.x, pen.y || this._pen.y);
}
Object.extend(this._pen,pen);
},
getPen : function(){
return this._pen;
},
//填充区域
fillRect : function(x,y,w,h){
if(this._canvas){
this._canvas.fillRect(x,y,w,h);
return;
}
if(this._vml){
var fill = $(document.createElement('vml:fill')).setAttr({
opacity : this._pen.alpha,
className: "vml"
});
var rect = $(document.createElement('vml:rect')).setAttr({
className: "vml",
stroked : "False",
fillcolor:this.Pen.color,
style : "top:"+y+"px;left:"+x+"px;width:"+w+"px;height:"+h+"px"
});
rect.appendChild(fill);
this._vml.appendChild(rect);
return;
}
var div = $(document.createElement("DIV"));
this._element.appendChild(div);
div.setStyle({
backgroundColor:this._pen.color,
position: "absolute",
overflow: "hidden",
opacity : this._pen.alpha,
left : this._getX(x)+"px",
top : this._getY(y)+"px",
width : w+"px",
height: h+"px"
});
},
clearAll : function(){
if(this._canvas){
this._canvas.clearRect(0,0,this._width,this._height);
return;
}
if(this._vml){
this._vml.innerHTML = '';
return;
}
this._element.innerHTML = '';
},
drawArc : function(x, y, radius, startAngle, endAngle){
if(this._canvas){
this._canvas.beginPath();
this._canvas.arc(x, y, radius, startAngle, endAngle, false);
this._canvas.stroke();
this.moveTo(x+radius*Math.cos(endAngle), y+radius*Math.sin(endAngle));
return;
}
if(this._vml){
this.moveTo(x+radius*Math.cos(endAngle), y+radius*Math.sin(endAngle));
startAngle= startAngle+Math.PI/2;
endAngle = endAngle+Math.PI/2;
startAngle= 360/Math.PI/2*startAngle;
endAngle = 360/Math.PI/2*endAngle;
if(startAngle>360)startAngle -= 360;
if(endAngle>360)endAngle -= 360;
if(startAngle==endAngle){
startAngle=0;
endAngle=360;
}
var stroke = $(document.createElement('vml:stroke')).setAttr({
opacity:this.Pen.alpha,
color:this.Pen.color,
weight:this.Pen.size+'px',
className:"vml"
});
var fill = $(document.createElement('vml:fill')).setAttr({
className:"vml",
on:"False"
});
var arc = $(document.createElement('vml:arc')).setAttr({
style:"top:"+y-radius+"px;left:"+x-radius+"px;width:"+radius*2+"px;height:"+radius*2+"px",
className:"vml",
startangle:startAngle,
endangle:endAngle
});
arc.appendChild(stroke);
arc.appendChild(fill);
this._vml.appendChild(arc);
return;
}
var iMax=(endAngle>startAngle)? endAngle-startAngle : Math.PI*2-startAngle+endAngle;
var step=2/(Math.sqrt(radius*radius*Math.PI)/this._pen.size*0.57*2);
if(endAngle>startAngle) for(var i=startAngle;i<=endAngle;i+=step) this.drawDot(x+radius*Math.cos(i),y+radius*Math.sin(i));
else{
for(i=startAngle;i<=Math.PI*2;i+=step) this.drawDot(x+radius*Math.cos(i),y+radius*Math.sin(i));
for(i=0;i<=endAngle;i+=step) this.drawDot(x+radius*Math.cos(i),y+radius*Math.sin(i));
}
},
drawDot : function(x,y){
this.fillRect(x-(this._pen.size/2),y-(this._pen.size/2),this._pen.size,this._pen.size);
this.moveTo(x,y);
},
drawLine : function(x1,y1,x2,y2){
if(this._canvas){
this._canvas.beginPath();
this._canvas.moveTo(x1, y1);
this._canvas.lineTo(x2, y2);
this._canvas.stroke();
this.moveTo(x2, y2);
return;
}
if(this._vml){
var stroke = $(document.createElement('vml:stroke')).setAttr({
opacity: this._pen.alpha,
color : this._pen.color,
weight : this._pen.size+'px',
className:"vml"
});
var line = $(document.createElement('vml:line')).setAttr({
from:parseInt(x1)+','+parseInt(y1),
to:parseInt(x2)+','+parseInt(y2),
className:"vml",
style:"left:"+parseInt(x1<x2 ? x1:x2)+"px;top:"+parseInt(y1<y2 ? y1:y2)+"px"
});
line.appendChild(stroke);
this._vml.appendChild(line);
this.moveTo(x2, y2);
return;
}
var r = Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));
var tan = Math.atan((y2-y1)/(x2-x1));
if((x2-x1)<0)tan+=Math.PI;
var dx = Math.cos(tan);
var dy = Math.sin(tan);
if(x1==x2 || y1==y2){
var w= x1==x2 ? this.Pen.size:x2-x1;
var h= y1==y2 ? this.Pen.size:y2-y1;
(x2<x1 || y2<y1)? this.fillRect(x2,y2,w,h):this.fillRect(x1,y1,w,h);
this.moveTo(x2,y2);
return;
}
for(var i=0;i<r;i+=this._pen.size)this.drawDot(x1+i*dx,y1+i*dy);
},
drawRect : function(x,y,width,height){
if(this._canvas){
this._canvas.strokeRect(x, y, width, height);
return;
}
if(this._vml){
var stroke = $(document.createElement('vml:stroke')).setAttr({
opacity:this.Pen.alpha,
color:this.Pen.color,
weight:this.Pen.size+'px',
className:"vml"
});
var fill = $(document.createElement('vml:fill')).setAttr({
on:'False',
className:"vml"
});
var rect = $(document.createElement('vml:rect')).setAttr({
style : "top:"+y+"px;left:"+x+"px;width:"+width+"px;height:+"+height+"px",
className:"vml"
});
rect.appendChild(stroke);
rect.appendChild(fill);
this._vml.appendChild(rect);
return;
}
var size = this._pen.size/2;
this.fillRect(x-size,y-size,this.Pen.size,height);
this.fillRect(x-size,y-size,width,this.Pen.size);
this.fillRect(x-size+width,y-size,this.Pen.size,height);
this.fillRect(x-size,y-size+height,width+this.Pen.size,this.Pen.size);
},
drawOval : function(x,y,width,height){
if(this._vml){
var stroke = $(document.createElement("vml:stroke")).setAttr({
opacity: this._pen.alpha,
color : this._pen.color,
weight : this._pen.size+'px'
}).addClass("vml");
var fill = $(document.createElement("vml:fill")).setAttr("on","False").addClass("vml");
var arc = $(document.createElement("vml:oval")).setAttr({
style : "top:"+y+"px;left:"+x+"px;width:"+width+"px;height:"+height+"px"

});
arc.className = "vml";
arc.appendChild(stroke);
arc.appendChild(fill);
this._vml.appendChild(arc);
return;
}
var iMax=2*Math.PI,w=width/2,h=height/2;
if(w==h){
this.drawArc(x+w,y+h,w,0,iMax);
return;
}
x+=w,y+=h;
var step=2/(Math.sqrt(w*h)*2/this._pen.size*Math.abs(w/h));
for(var i=0;i<iMax;i+=step) this.drawDot(x+w*Math.cos(i),y+h*Math.sin(i));
},
lineTo : function(x,y){
this.drawLine(this._pen.x,this._pen.y,x,y);
},
moveTo : function(x,y){
this.setPen({
x:x,
y:y
});
},
drawPolygon : function(xpoints,ypoints){
var length=Math.min(xpoints.length,ypoints.length);
for(var i=1;i<length;i++) this.drawLine(xpoints[i-1],ypoints[i-1],xpoints[i],ypoints[i]);
this.drawLine(xpoints[i-1],ypoints[i-1],xpoints[0],ypoints[0]);
},
drawString : function(str,x,y){
var _x=0,_y=0;
if(this._CANVAS){
this._CANVAS.font = this.Pen.font;
var _this = this;
if($Try(function(){
_this._CANVAS.fillText(str,x,y);
return true
})){
return;
}else{
var Offsets = this._CASE.getPositionedOffsets();
_x = Offsets.left;
_y = Offsets.top;
}
}
if(this._VML){
var textbox= $(document.createElement('vml:textbox')).addClassName('vml').setStyle({
position:'absolute',
color:this.Pen.color,
font:this.Pen.font,
left:x+'px',
top:y-(/(\d{1,3})/.exec(this.Pen.font))[1]+3+'px'
}).setInnerText(str);
this._VML.appendChildExt(textbox);
return;
}
this._CASE.appendChildExt($(document.createElement("DIV")).setStyle({
position:"absolute",
left:this._getX(x)+_x+"px",
top:this._getY(y)+_y-(/(\d{1,3})/.exec(this.Pen.font))[1]+3+"px",
color:this.Pen.color,
font:this.Pen.font
}).setInnerHTML(str));
},
finalize : function(){
this._element.innerHTML = this._oldhtml;
AutoTop.superclass.finalize.apply(this);
}
});

</pre>

<pre lang="javascript" line="1" file="joop.js" colla="+">
/* Browser Compatibility */
if (!Array.prototype.map)
Array.prototype.map = function(fn, self) {
for (var i = 0, results = new Array(this.length), length = this.length; i < length; i++)
results[i] = fn.call(self, this[i], i, this);
return results;
};
if (!String.prototype.trim)
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
};

/* joop Framework */
window.joop = joop = (function(win) {
function entry(ifo) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push(entry(arguments[i]));
return elements;
}
return isFunction(ifo) ? entry.ready(ifo) : entry.getById(ifo);
}
function namespace(ns) {
var parts = ns.split('.'), obj = win;
for (var i = 0; i < parts.length; i++)
obj = obj[parts[i]] = obj[parts[i]] || {};
return obj;
}
function extend(dst) {
for (var i = 1, length = arguments.length; i < length; i++)
for (var property in arguments[i])
dst[property] = arguments[i][property];
return dst;
}
function jclass() {
var bclass, bproto = {}, proto = {initialize: function() {
}};
function nclass() {
this.initialize.apply(this, arguments);
}
for (var i = 0, length = arguments.length; i < length; i++) {
var methods = arguments[i];
if (isFunction(methods)) {
bclass = function() {
};
bclass.prototype = methods.prototype;
methods = new bclass;
extend(bproto, methods);
}
extend(proto, methods);
}
nclass.prototype = proto;
nclass.parent = bproto;
return nclass;
}
function isFunction(object) {
return typeof object === 'function';
}
function isString(object) {
return typeof object === 'string';
}
function isNumber(object) {
return typeof object === 'number';
}
function toArray(iterable) {
if (!iterable)
return [];
if ("toArray" in iterable)
return iterable.toArray();
var length = iterable.length || 0, results = new Array(length);
while (length--)
results[length] = iterable[length];
return results;
}
function ready() {
var queue = [], loaded = 0, onload = window.onload || function() {
};
function init() {
if (loaded)
return;
loaded = 1;
for (var i = 0, length = queue.length; i < length; i++)
queue[i](entry);
}
function delay() {
/loaded|complete/.test(document.readyState) ? init() : setTimeout(delay, 0);
}
window.attachEvent ? window.attachEvent('onload', init) : window.addEventListener('load', init, false);
if (document.addEventListener)
document.addEventListener('DOMContentLoaded', init, false);
window.onload = function() {
onload();
init();
};
delay();
return function(fn) {
loaded ? fn(entry) : queue.push(fn);
};
}
function getById() {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push(getById(arguments[i]));
return elements;
}
return wrapper(isString(arguments[0]) ? document.getElementById(arguments[0]) : arguments[0]);
}
function getBySelector(selectors) {
return wrapper(document).querySelector(selectors);
}
function wrapper(element) {
if (!element || isFunction(element) || element._element || element.initialize)
return element;
var wrapClass, object;
if (element === window) {
wrapClass = Element.Window;
} else if (element === document) {
wrapClass = Element.Document;
} else if (element.nodeType !== 1) {
return element;
} else {
wrapClass = Element['tag' + element.tagName.toUpperCase()] || Element;
}
wrapper.cache = wrapper.cache || [];
for (var i = 0, length = wrapper.cache.length; i < length; i++)
if (wrapper.cache[i]._element === element)
return wrapper.cache[i];
object = new wrapClass(element);
wrapper.cache.push(object);
return object;
}
var Base = jclass({});
var Listener = jclass(Base, {
initialize: function() {
Listener.parent.initialize.apply(this, arguments);
this._eventQueue = [];
},
addEvent: function(name, handler) {
for (var i = 0, length = this._eventQueue.length; i < length; i++)
if (this._eventQueue.name === name && this._eventQueue[i].handler === handler)
return this;
this._eventQueue.push({name: name, handler: handler});
return this;
},
removeEvent: function(name, handler) {
for (var i = 0, length = this._eventQueue.length; i < length; i++)
if (this._eventQueue[i].name === name && this._eventQueue[i].handler === handler) {
this._eventQueue[i] = this._eventQueue[i].name = this._eventQueue[i].handler = null;
this._eventQueue.splice(i, 1);
return this;
}
return this;
},
fireEvent: function(name, object) {
for (var i = 0, length = this._eventQueue.length; i < length; i++)
if (this._eventQueue[i].name === name)
this._eventQueue[i].handler(object);
return this;
}
});
var ElEvent = jclass(Base, {
initialize: function(event) {
ElEvent.parent.initialize.apply(this, arguments);
this.event = event;
this.altKey = event.altKey;
this.clientX = event.clientX;
this.clientY = event.clientY;
this.ctrlKey = event.ctrlKey;
this.keyCode = event.keyCode;
this.screenX = event.screenX;
this.screenY = event.screenY;
this.layerX = event.offsetX || event.layerX;
this.layerY = event.offsetY || event.layerY;
this.shiftKey = event.shiftKey;
this.detail = event.detail ? event.detail > 0 ? 1 : -1 : event.wheelDelta > 0 ? -1 : 1;
this.target = event.srcElement || event.target;
this.type = event.type;
this.relatedTarget = event.fromElement || event.relatedTarget;
this.currentTarget = event.toElement || event.currentTarget;
},
stopPropagation: function() {
var event = this.event;
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
return this;
},
preventDefault: function() {
var event = this.event;
event.preventDefault ? event.preventDefault() : event.returnValue = false;
return this;
},
getTarget: function() {
var node = this.target, type = this.type;
var currentTarget = this.currentTarget;
if ((currentTarget && currentTarget.tagName) && (type === "load" || type === "error" || (type === "click" && currentTarget.tagName.toLowerCase() === "input" && currentTarget.type === "radio")))
node = currentTarget;
if (node.nodeType === 3)
node = node.parentNode;
return wrapperElement(node);
}
});
var Element = jclass(Listener, {
initialize: function(element) {
Element.parent.initialize.apply(this, arguments);
this._element = element;
},
addEvent: function(name, handler) {
var self = this;
var processor = {
handler: handler,
callback: function(event) {
handler.call(self, new ElEvent(event));
}
};
for (var i = 0, length = this._eventQueue.length; i < length; i++)
if (this._eventQueue[i].name === name && this._eventQueue[i].processor.handler === processor.handler)
return this;
this._eventQueue.push({
name: name,
processor: processor
});
var element = this._element;
element.attachEvent ? element.attachEvent('on' + name, processor.callback)
: element.addEventListener(name, processor.callback, false);
return this;
},
removeEvent: function(name, handler) {
for (var i = 0, length = this._eventQueue.length; i < length; i++)
if (this._eventQueue[i].name === name && this._eventQueue[i].processor.handler === handler) {
this._element.detachEvent ? this._element.detachEvent("on" + name, this._eventQueue[i].processor.callback)
: this._element.removeEventListener(name, this._eventQueue[i].processor.callback, false);
this._eventQueue[i] = this._eventQueue[i].name = this._eventQueue[i].processor = this._eventQueue[i].processor.handler = this._eventQueue[i].processor.callback = null;
this._eventQueue.splice(i, 1);
return this;
}
return this;
},
fireEvent: function(name) {
var element = this._element;
if (element.fireEvent) {
element.fireEvent("on" + name);
} else {
var ev = document.createEvent("HTMLEvents");
ev.initEvent(name, false, true);
element.dispatchEvent(ev);
}
return this;
},
querySelector: function(selectors) {
var elements = document.querySelector ? toArray(this._element.querySelectorAll(selectors))
: document.evaluate ? _querySelectorAllByXPath(selectors)
: _querySelectorAllByJavaScript(selectors);
for (var i = 0, length = elements.length; i < length; i++)
elements[i] = wrapper(elements[i]);
return elements;
function _querySelectorAllByXPath(selectors) {
return _querySelectorAllByJavaScript(selectors);
}
function _querySelectorAllByJavaScript(selectors) {
return [];
}
},
setText: function(value) {
var element = this._element;
element.innerHTML = '';
element.innerText ? element.innerText = value : element.appendChild(document.createTextNode(value));
return this;
},
getText: function() {
var element = this._element;
if (element.innerText)
return element.innerText;
var value = undefined;
try {
value = element.textContent;
} catch (e) {
}
return value || element.innerHTML.replace(/<[^<>]*>/g, '').replace(" ", ' ').replace("<", '<').replace(">", '>').replace("&", '&').replace(""", '"');
}
});
Element.Window = jclass(Element, {});
Element.Document = jclass(Element, {});
Element.tagFORM = jclass(Element, {});
return extend(entry, {
version: 20131005,
namespace: namespace,
extend: extend,
jclass: jclass,
isFunction: isFunction,
isString: isString,
isNumber: isNumber,
toArray: toArray,
ready: ready(),
getById: getById,
getBySelector: getBySelector,
wrapper: wrapper,
Base: Base,
Listener: Listener,
ElEvent: ElEvent,
Element: Element
});
})(window);
</pre>