Leo の Blog Where there is a will there is a way! Trust youself can do it!

23六/090

Prototype 1.6 资料打包

找了下 prototype 的资料. 打个包放在这里. 方便到拿去. 包里文件  prototype 1.6 中文, 英文文档. CHM 格式. 还有 1.60 的API, PDF格式. 还要一个 cheatsheet 也是 1.6 版本到. 资料应该比较齐全了. 剩下到花点时间去看吧.

下载地址: 点击这里下载

23六/090

JavaScript 常用函数封装.

近来工作任务涉及到 JavaScript 方面了. 顺手整理了一下 常用函数, 帖出来方便使用.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
/**
 * Mm Javascript code
 * 未完待续...
 *
 * @author: Guya
 * @email: camworkster@gmail.com
 * @version: 1.0 beta
 */
 
//使用对象
var MmJs = {
version: '1.0 beta',
author: 'Guya'
};
 
/**
 * 浏览器判断. COPY jQuery
 *
 */
var userAgent = navigator.userAgent.toLowerCase();
MmJs.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
	safari: /webkit/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
 
/**
 * 加入 window.onload 执行函数.
 */
MmJs.addOnload = function(fnHandler) {
    var oldOnload = window.onload;
	if( typeof window.onload != 'function' ) {
		window.onload = fnHandler;
	} else {
		window.onload = function() {
			oldOnload();
			fnHandler();
		}
	}
};
 
/**
 * 加入 window.onunload 执行函数.
 */
MmJs.addOnUnload = function(fnHandler) {
    var oldOnUnload = window.onunload;
	if( typeof window.onunload != 'function' ) {
		window.onunload = fnHandler;
	} else {
		window.onunload = function() {
			oldOnUnload();
			fnHandler();
		}
	}
};
 
/**
 * 增加 DOM 事件监听.
 */
MmJs.addEventHandler = function (oTarget, sEventType, fnHandler) {
 
    if (oTarget.addEventListener) {
 
        oTarget.addEventListener(sEventType, fnHandler, false);
 
    } else if (oTarget.attachEvent) {
 
        oTarget.attachEvent("on" + sEventType, fnHandler);
 
    } else {
 
        oTarget["on" + sEventType] = fnHandler;
 
    }
 
};
 
/**
 * 删除 DOM 事件监听.
 */     
 
MmJs.removeEventHandler = function (oTarget, sEventType, fnHandler) {
 
    if (oTarget.removeEventListener) {
 
        oTarget.removeEventListener(sEventType, fnHandler, false);
 
    } else if (oTarget.detachEvent) {
 
        oTarget.detachEvent("on" + sEventType, fnHandler);
 
    } else { 
 
        oTarget["on" + sEventType] = null;
 
    }
 
};
 
MmJs.formatEvent = function (oEvent) {
 
    if (MmJs.browser.msie) {
 
        oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
 
        oEvent.eventPhase = 2;
 
        oEvent.isChar = (oEvent.charCode > 0);
 
        oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
 
        oEvent.pageY = oEvent.clientY + document.body.scrollTop;
 
        oEvent.preventDefault = function () {
 
            this.returnValue = false;
 
        };
 
        if (oEvent.type == "mouseout") {
 
            oEvent.relatedTarget = oEvent.toElement;
 
        } else if (oEvent.type == "mouseover") {
 
            oEvent.relatedTarget = oEvent.fromElement;
 
        }
 
        oEvent.stopPropagation = function () {
 
            this.cancelBubble = true;
 
        };
 
        oEvent.target = oEvent.srcElement;
 
        oEvent.time = (new Date).getTime();
 
    }
 
    return oEvent;
 
};
 
/**
 * 获取事件.
 */
MmJs.getEvent = function() {
 
    if (window.event) {
 
        return this.formatEvent(window.event);
 
    } else {
 
        return MmJs.getEvent.caller.arguments[0];
 
    }
 
};
 
/**
 * 依据ID属性查找DOM节点
 */
MmJs.getById = function(dom_id_string) {
    if(!dom_id_string) { return null; };
    if(document.getElementById) {
        return document.getElementById(dom_id_string);
    };
    return null;
};
 
/**
 * 创建DOM节点.
 */
MmJs.createElement = function(tag_type, attr, append_to_element) {
    if('string' != typeof tag_type) {
        tag_type = 'div';
    };
    if('object' != typeof append_to_element) {
        append_to_element = document.body;
    };
    var d = document.createElement(tag_type);
    append_to_element.appendChild(d);
    if('object' == typeof attr) {
        if('object' == typeof attr.dom) {
            for(var i in attr.dom) {
                d.setAttribute(i,attr.dom[i]);
            };
        };
        if('object' == typeof attr.style) {
            for(var i in attr.style) {
                d.style.i = attr.style[i];
            };
        };
        if('object' == typeof attr.event) {
            for(var i in attr.event) {
                if('function' == typeof attr.event[i]) {
                    this.addEventHandler(d, i, attr.event[i]);
                };
            };
        };
    };
};
 
/**
 * 获取DOM元素位置
 */
MmJs.getPos = function(elObj, posName) {
    if('string' == typeof elObj) {
        elObj = this.getById(elObj);
    }
    var iPos = 0;
	while(elObj != null) {
		iPos += elObj["offset" + posName];
		elObj = elObj.offsetParent;
	}
	return iPos;
};

脚本不是很完整. 等以后有时间再补充其他到函数了.

20六/090

JavaScript代码分享: 动态载入CSS, 或JavaScript 脚本文件

玩玩动态载入吧, 记得 jQuery 里有个方法 jQuery.getScript(); 这个后面好像还带一个回调函数, 功能是很好, 很强大. 不过载入CSS的时候就没有提供类似的方法. 自己写了两个函数. 玩玩很有意思呢.

不过注意的是玩动态载入的话, 前提是你的网络带宽和服务器速度都不错, 如果网络太烂, 页面就乱糟糟了呢.

先来载入CSS的函数:

/**
 * 动态增加 CSS 样式表文件. 不会重复加载
 * 但在别处使用这个函数,这个js要先加载
 *
 * @param: string cssUri 载入的 CSS 样式表定义脚本路径.
 *
 * @author: Cai.Aimin
 * @email: cam_work@163.com
 * @since: 2008-03-05
 *
 * @return void
 */
function loadCss(cssUri) {
    if(!cssUri) return;
    var styles = document.getElementsByTagName("link");
    var len = styles.length;
    var isLoaded = false;
    for(var i=0; i < len; i++) {
        if(cssUri == styles[i].getAttribute("href")) {
            isLoaded = true;
            break;
        }
    }
    if(!isLoaded) {
        var headObj = document.getElementsByTagName("head")[0];
        var cssLink = document.createElement("link");
        cssLink.setAttribute("rel", "stylesheet");
        cssLink.setAttribute("type", "text/css");
        cssLink.setAttribute("media", "screen");
        cssLink.setAttribute("href", cssUri);
        headObj.appendChild(cssLink);
    }
}

面这个是动态载入JavaScript脚本函数, 对js脚本载入前, 检查到已有的话就进行删除, 不然的话对新AJAX Loaded 进来的内容不能完成绑定操作. 当然重复载入浏览器是很懒的. 它会读取本地的缓存, 所以不需要担心重复读取服务器上的一段js脚本.

/**
 * 动态增加 JavaScript 脚本文件.
 * 但在别处使用这个函数,这个js要先加载
 *
 * @param: string jsUri 载入的 JavaScript 脚本路径.
 *
 * @author: Cai.Aimin
 * @email: cam_work@163.com
 * @since: 2008-03-05
 *
 * @return void
 */
function loadJs(jsUri) {
    if(!jsUri) return;
    var js = document.getElementsByTagName("script");
    var len = js.length;
    for(var i=0; i < len; i++) {
        if(jsUri == js[i].getAttribute("src")) {
            js[i].parentNode.removeChild(js[i]);
            break;
        }
        var headObj = document.getElementsByTagName("head")[0];
        var jsLink = document.createElement("script");
        jsLink.setAttribute("type", "text/javascript");
        jsLink.setAttribute("src", jsUri);
       headObj.appendChild(jsLink);
    }
}
20六/090

JavaScript代码分享. window.onload()

虽然使用 jQuery 可以非常方便的操作 DOM 树, 自己写一些代码辅助也是非常有意思的事. 也很有必要哦. 分享一下文档载入时的这个window.onload事件处理方法. 让它支持多事件.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/** 
 * 这个函数可以代替window.onload = function() {} 
 * 可以不受 window.onload 只能在一处使用的限制 
 * 但在别处使用这个函数,这个js要先加载 
 * 
 * @author: Cai.Aimin 
 * @email: cam_work@163.com 
 * @since: 2008-03-04 
 * @return void 
 */ 
function addLoadEvent(func) { 
        var oldOnload = window.onload; 
        if( typeof window.onload != 'function' ) { 
               window.onload = func; 
        } else { 
               window.onload = function() { 
                        oldOnload(); 
                        func(); 
                } 
        } 
}