亚洲AV中文无码乱人伦,亚洲午夜国产精品,中文字幕亚洲综合小综合在线

prototype學習資料(三)

js 代碼

/**? ?
*?Form.Element.getValue?會經常用到，所以做了一個快捷引用? ?
*?取得某個表單控件的值，可以簡化調用為?$F("username")，真是方便啊? ?
*/ ? ??
var ?$F?=?Form.Element.getValue;? ??
/**? ?
*?Abstract.TimedObserver?也沒有用?Class.create()?來創建，和Ajax.Base?意圖應該一樣? ?
*?Abstract.TimedObserver?顧名思義，是套用Observer設計模式來跟蹤指定表單元素，? ?
*?當表單元素的值發生變化的時候，就執行回調函數? ?
*? ?
*?我想　Observer?與注冊onchange事件相似，不同點在于?onchange?事件是在元素失去焦點的時候才激發。? ?
*?同樣的與?onpropertychange?事件也相似，不過它只關注表單元素的值的變化，而且提供timeout的控制。? ?
*? ?
*?除此之外，Observer?的好處大概就在與更面向對象，另外可以動態的更換回調函數，這就比注冊事件要靈活一些。? ?
*?Observer?應該可以勝任動態數據校驗，或者多個關聯下拉選項列表的連動等等? ?
*? ?
*/ ? ??
Abstract.TimedObserver?=? function ()?{}? ??
/**? ?
*?這個設計和?PeriodicalExecuter?一樣，bind?方法是實現的核心? ?
*/ ? ??
Abstract.TimedObserver.prototype?=?{? ??
initialize:? function (element,?frequency,?callback)?{? ??
this .frequency?=?frequency;? ??
this .element?=?$(element);? ??
this .callback?=?callback;? ??
??
this .lastValue?=? this .getValue();? ??
this .registerCallback();? ??
},? ??
registerCallback:? function ()?{? ??
setInterval( this .onTimerEvent.bind( this ),? this .frequency?*?1000);? ??
},? ??
onTimerEvent:? function ()?{? ??
var ?value?=? this .getValue();? ??
if ?( this .lastValue?!=?value)?{? ??
this .callback( this .element,?value);? ??
this .lastValue?=?value;? ??
}? ??
}? ??
}? ??
/**? ?
*?Form.Element.Observer?監視指定表單域的值是否變化? ?
*/ ? ??
Form.Element.Observer?=?Class.create();? ??
Form.Element.Observer.prototype?=?( new ?Abstract.TimedObserver()).extend({? ??
getValue:? function ()?{? ??
return ?Form.Element.getValue( this .element);? ??
}? ??
});? ??
/**? ?
*?Form.Element.Observer?監視指定表單所有控件的值是否有變化? ?
*/ ? ??
Form.Observer?=?Class.create();? ??
Form.Observer.prototype?=?( new ?Abstract.TimedObserver()).extend({? ??
getValue:? function ()?{? ??
return ?Form.serialize( this .element);? ??
}? ??
});? ??
/*--------------------------------------------------------------------------*/ ? ??
/**? ?
*?EventObserver?相比上面的?TimedObserver，是更具主動性的一種監測? ?
*?它直接為表單控件(根據?type?的不同)?注冊相應的事件處理,?只要發現某個控件值發生改變，就執行回調函數? ?
*/ ? ??
Abstract.EventObserver?=? function ()?{}? ??
Abstract.EventObserver.prototype?=?{? ??
initialize:? function (element,?callback)?{? ??
this .element?=?$(element);? ??
this .callback?=?callback;? ??
??
this .lastValue?=? this .getValue();? ??
if ?( this .element.tagName.toLowerCase()?==?'form')? ??
this .registerFormCallbacks();? ??
else ? ??
this .registerCallback( this .element);? ??
},? ??
onElementEvent:? function ()?{? ??
var ?value?=? this .getValue();? ??
if ?( this .lastValue?!=?value)?{? ??
this .callback( this .element,?value);? ??
this .lastValue?=?value;? ??
}? ??
},? ??
registerFormCallbacks:? function ()?{? ??
var ?elements?=?Form.getElements( this .element);? ??
for ?( var ?i?=?0;?i?<?elements.length;?i++)? ??
this .registerCallback(elements);? ??
},? ??
registerCallback:? function (element)?{? ??
if ?(element.type)?{? ??
switch ?(element.type.toLowerCase())?{? ??
/**? ?
*?checkbox?和?radio?類型的控件注冊?onclick?事件處理? ?
*/ ? ??
case ?'checkbox':? ??
case ?'radio':? ??
element.target?=? this ;? ??
element.prev_onclick?=?element.onclick?||?Prototype.emptyFunction;? ??
/**? ?
*?相信這里有改進的空間，應該使用其后的?Event對象提供的注冊管理功能來統一注冊? ?
*/ ? ??
element.onclick?=? function ()?{? ??
this .prev_onclick();? ??
this .target.onElementEvent();? ??
}? ??
break ;? ??
/**? ?
*?其他類型的控件注冊?onchange?事件處理? ?
*/ ? ??
case ?'password':? ??
case ?'text':? ??
case ?'textarea':? ??
case ?'select-one':? ??
case ?'select-multiple':? ??
element.target?=? this ;? ??
element.prev_onchange?=?element.onchange?||?Prototype.emptyFunction;? ??
element.onchange?=? function ()?{? ??
this .prev_onchange();? ??
this .target.onElementEvent();? ??
}? ??
break ;? ??
}? ??
}? ??
}? ??
}? ??
/**? ?
*?監視指定表單控件? ?
*/ ? ??
Form.Element.EventObserver?=?Class.create();? ??
Form.Element.EventObserver.prototype?=?( new ?Abstract.EventObserver()).extend({? ??
getValue:? function ()?{? ??
return ?Form.Element.getValue( this .element);? ??
}? ??
});? ??
/**? ?
*?監視指定表單所有控件? ?
*/ ? ??
Form.EventObserver?=?Class.create();? ??
Form.EventObserver.prototype?=?( new ?Abstract.EventObserver()).extend({? ??
getValue:? function ()?{? ??
return ?Form.serialize( this .element);? ??
}? ??
});? ??
/**? ?
*?封裝事件處理的靜態工具對象? ?
*/ ? ??
if ?(!window.Event)?{? ??
var ?Event?=? new ?Object();? ??
}? ??
Object.extend(Event,?{? ??
KEY_BACKSPACE:?8,? ??
KEY_TAB:?9,? ??
KEY_RETURN:?13,? ??
KEY_ESC:?27,? ??
KEY_LEFT:?37,? ??
KEY_UP:?38,? ??
KEY_RIGHT:?39,? ??
KEY_DOWN:?40,? ??
KEY_DELETE:?46,? ??
element:? function (event)?{? ??
return ?event.target?||?event.srcElement;? ??
},? ??
isLeftClick:? function (event)?{? ??
return ?(((event.which)?&&?(event.which?==?1))?||? ??
((event.button)?&&?(event.button?==?1)));? ??
},? ??
/**? ?
*?click事件時鼠標以頁面為基準的x坐標值,?考慮到了滾動條導致的位移差? ?
*/ ? ??
pointerX:? function (event)?{? ??
return ?event.pageX?||?(event.clientX?+? ??
(document.documentElement.scrollLeft?||?document.body.scrollLeft));? ??
},? ??
/**? ?
*?click事件時鼠標以頁面為基準的y坐標值,?考慮到了滾動條導致的位移差? ?
*/ ? ??
pointerY:? function (event)?{? ??
return ?event.pageY?||?(event.clientY?+? ??
(document.documentElement.scrollTop?||?document.body.scrollTop));? ??
},? ??
/**? ?
*?停止冒泡(參見?http://www.quirksmode.org/js/events_order.html)?和阻止瀏覽器執行與事件相關的默認動作? ?
*?比如? ?
*?google? ?
*?那么點擊該連接，頁面并不會執行轉向? ?
*/ ? ??
stop:? function (event)?{? ??
if ?(event.preventDefault)?{? ??
event.preventDefault();? ??
event.stopPropagation();? ??
}? else ?{? ??
event.returnValue?=? false ;? ??
}? ??
},? ??
//?find?the?first?node?with?the?given?tagName,?starting?from?the? ??
//?node?the?event?was?triggered?on;?traverses?the?DOM?upwards? ??
/**? ?
*?找到事件元素的父級元素中，最接近事件元素且等同于指定標簽名的父元素。? ?
*?如果到達頂級元素(HTML)，那么就返回頂級元素? ?
*/ ? ??
findElement:? function (event,?tagName)?{? ??
var ?element?=?Event.element(event);? ??
while ?(element.parentNode?&&?(!element.tagName?||? ??
(element.tagName.toUpperCase()?!=?tagName.toUpperCase())))? ??
element?=?element.parentNode;? ??
return ?element;? ??
},? ??
/**? ?
*?其后的代碼封裝了事件的注冊和反注冊，避免ie的內存泄露的bug? ?
*?參見?http://javascript.weblogsinc.com/en...34000267034921/? ?
*/ ? ??
observers:? false ,? ??
/**? ?
*?this.observers?的數據格式是一個二維數組，二維的數組分別四個元素分別是? ?
*?[注冊事件對象，事件名，事件處理函數，事件處理模式布爾值]? ?
*/ ? ??
_observeAndCache:? function (element,?name,?observer,?useCapture)?{? ??
if ?(! this .observers)? this .observers?=?;? ??
if ?(element.addEventListener)?{? ??
this .observers.push([element,?name,?observer,?useCapture]);? ??
element.addEventListener(name,?observer,?useCapture);? ??
}? else ? if ?(element.attachEvent)?{? ??
this .observers.push([element,?name,?observer,?useCapture]);? ??
element.attachEvent('on'?+?name,?observer);? ??
}? ??
},? ??
unloadCache:? function ()?{? ??
if ?(!Event.observers)? return ;? ??
for ?( var ?i?=?0;?i?<?Event.observers.length;?i++)?{? ??
/**? ?
*?這里與?Ajax.Request?對象設置?request?header?的代碼異曲同工? ?
*/ ? ??
Event.stopObserving.apply( this ,?Event.observers);? ??
Event.observers[0]?=? null ;? ??
}? ??
Event.observers?=? false ;? ??
},? ??
/**? ?
*?注冊對象的事件處理，并記錄到cache中? ?
*/ ? ??
observe:? function (element,?name,?observer,?useCapture)?{? ??
var ?element?=?$(element);? ??
useCapture?=?useCapture?||? false ;? ??
??
if ?(name?==?'keypress'?&&? ??
((navigator.appVersion.indexOf('AppleWebKit')?>?0)? ??
||?element.attachEvent))? ??
name?=?'keydown';? ??
??
this ._observeAndCache(element,?name,?observer,?useCapture);? ??
},? ??
/**? ?
*?取消對象已注冊的事件處理? ?
*/ ? ??
stopObserving:? function (element,?name,?observer,?useCapture)?{? ??
var ?element?=?$(element);? ??
useCapture?=?useCapture?||? false ;? ??
??
if ?(name?==?'keypress'?&&? ??
((navigator.appVersion.indexOf('AppleWebKit')?>?0)? ??
||?element.detachEvent))? ??
name?=?'keydown';? ??
??
if ?(element.removeEventListener)?{? ??
element.removeEventListener(name,?observer,?useCapture);? ??
}? else ? if ?(element.detachEvent)?{? ??
element.detachEvent('on'?+?name,?observer);? ??
}? ??
}? ??
});? ??
/*?prevent?memory?leaks?in?IE?*/ ? ??
/**? ?
*?頁面onload?的時候取消所有事件注冊，避免ie內存泄漏的bug? ?
*/ ? ??
Event.observe(window,?'unload',?Event.unloadCache,? false );? ??
/**? ?
*?Position?對象也是常用的工具類，提供了獲取元素在頁面上位置的函數，Drag&Drop的效果一定常會用到? ?
*?具體的應用參考?script.aculo.us?基于prototype?的實現，尤其是dragdrop.js。? ?
*/ ? ??
var ?Position?=?{? ??
//?set?to?true?if?needed,?warning:?firefox?performance?problems? ??
//?NOT?neeeded?for?page?scrolling,?only?if?draggable?contained?in? ??
//?scrollable?elements? ??
includeScrollOffsets:? false ,? ??
//?must?be?called?before?calling?withinIncludingScrolloffset,?every?time?the? ??
//?page?is?scrolled? ??
prepare:? function ()?{? ??
this .deltaX?=?window.pageXOffset? ??
||?document.documentElement.scrollLeft? ??
||?document.body.scrollLeft? ??
||?0;? ??
this .deltaY?=?window.pageYOffset? ??
||?document.documentElement.scrollTop? ??
||?document.body.scrollTop? ??
||?0;? ??
},? ??
/**? ?
*?當對象所處的頁面有滾動條是，計算位移? ?
*/ ? ??
realOffset:? function (element)?{? ??
var ?valueT?=?0,?valueL?=?0;? ??
do ?{? ??
valueT?+=?element.scrollTop?||?0;? ??
valueL?+=?element.scrollLeft?||?0;? ??
element?=?element.parentNode;? ??
}? while ?(element);? ??
return ?[valueL,?valueT];? ??
},? ??
/**? ?
*?計算出對象在頁面上的位置? ?
*/ ? ??
cumulativeOffset:? function (element)?{? ??
var ?valueT?=?0,?valueL?=?0;? ??
do ?{? ??
valueT?+=?element.offsetTop?||?0;? ??
valueL?+=?element.offsetLeft?||?0;? ??
element?=?element.offsetParent;? ??
}? while ?(element);? ??
return ?[valueL,?valueT];? ??
},? ??
//?caches?x/y?coordinate?pair?to?use?with?overlap? ??
/**? ?
*?判斷一個坐標是否在指定元素的空間范圍中? ?
*?比如你想判斷鼠標點擊點的坐標是否在某個層或窗口? ?
*/ ? ??
within:? function (element,?x,?y)?{? ??
if ?( this .includeScrollOffsets)? ??
return ? this .withinIncludingScrolloffsets(element,?x,?y);? ??
this .xcomp?=?x;? ??
this .ycomp?=?y;? ??
this .offset?=? this .cumulativeOffset(element);? ??
return ?(y?>=? this .offset[1]?&&? ??
y?<? this .offset[1]?+?element.offsetHeight?&&? ??
x?>=? this .offset[0]?&&? ??
x?<? this .offset[0]?+?element.offsetWidth);? ??
},? ??
withinIncludingScrolloffsets:? function (element,?x,?y)?{? ??
var ?offsetcache?=? this .realOffset(element);? ??
this .xcomp?=?x?+?offsetcache[0]?-? this .deltaX;? ??
this .ycomp?=?y?+?offsetcache[1]?-? this .deltaY;? ??
this .offset?=? this .cumulativeOffset(element);? ??
return ?( this .ycomp?>=? this .offset[1]?&&? ??
this .ycomp?<? this .offset[1]?+?element.offsetHeight?&&? ??
this .xcomp?>=? this .offset[0]?&&? ??
this .xcomp?<? this .offset[0]?+?element.offsetWidth);? ??
},? ??
//?within?must?be?called?directly?before? ??
/**? ?
*?調用該方法時，確保首先調用了within方法? ?
*?如果x,y坐標位于element的空間范圍中，那么返回一個小于1的標示位置的值，比如0.5標示該坐標位于element空間的中線上? ?
*/ ? ??
overlap:? function (mode,?element)?{? ??
if ?(!mode)? return ?0;? ??
if ?(mode?==?'vertical')? ??
return ?(( this .offset[1]?+?element.offsetHeight)?-? this .ycomp)?/? ??
element.offsetHeight;? ??
if ?(mode?==?'horizontal')? ??
return ?(( this .offset[0]?+?element.offsetWidth)?-? this .xcomp)?/? ??
element.offsetWidth;? ??
},? ??
/**? ?
*?復制源對象的空間數據到目的對象。? ?
*?常用的地方：拖綴一個層到新地方時，常常動態構造和該層同樣大小的虛層。? ?
*/ ? ??
clone:? function (source,?target)?{? ??
source?=?$(source);? ??
target?=?$(target);? ??
target.style.position?=?'absolute';? ??
var ?offsets?=? this .cumulativeOffset(source);? ??
target.style.top?=?offsets[1]?+?'px';? ??
target.style.left?=?offsets[0]?+?'px';? ??
target.style.width?=?source.offsetWidth?+?'px';? ??
target.style.height?=?source.offsetHeight?+?'px';? ??
}? ??
} ??

posted on 2007-09-20 19:40 李云澤閱讀(270) 評論(0) 編輯收藏所屬分類: Prototype(Ajax)


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問
相關文章: prototype.js開發筆記 (轉) prototype對ajax的支持 prototype學習資料(三) prototype學習資料(二) prototype學習資料(一)

我思故我強

導航

統計

公告

公告

常用鏈接

留言簿(1)

文章分類(196)

文章檔案(164)

相冊

我收藏的網址

搜索

積分與排名

最新評論

prototype學習資料(三)

prototype學習資料(三)