![]() ![]() ![]() |
|
|
|
2010/01/04 02:25:04瀏覽731|回應2|推薦12 | |
在UDN若想使用js代碼,必須進入編輯器的“原始碼”模式,就是點擊右側那個“<>”按鈕,然後手動添加代碼。如果涉及html tag的event handler,需要註意的是,udn的編輯器會在相應代碼外圍自動添加 function ***(event) { 。。。 }的結構,每次修改時需要手動刪除這些代碼否則會變成如下的樣子
onclick="function onclick (event) {function onclick(event) { ... }}" 下邊以一個簡單的浮動提示層(div)為例示範UDN的js寫法 put mouse over me to see the help tip
已經在部分瀏覽器驗證過,,我的意思是,沒有做M$ IE的檢測 源代碼如下 <div id="_myhint" style="z-index:9999;position: absolute; background-color: rgb(187, 238, 254); display: none; border: 1px solid black;">wwww</div> <script language="javascript">function getOffsetPos(element) { var valueT = 0, valueL = 0,found=false; while (element = element.offsetParent) { if(!found){ if (element.style.position == 'absolute') found=true; else continue;}; valueT += element.offsetTop || 0; valueL += element.offsetLeft || 0; } return {top:valueT, left:valueL}; }</script> <script language="javascript">var _hintDivId = '_myhint'; function showHint (event, obj, str) {var docElement = document.documentElement,body = document.body || { scrollLeft: 0, scrollTop: 0 }; var x = event.pageX || (event.clientX + (docElement.scrollLeft || body.scrollLeft) - (docElement.clientLeft || 0)); var y = event.pageY || (event.clientY + (docElement.scrollTop || body.scrollTop) - (docElement.clientTop || 0));var hint = document.getElementById(_hintDivId); var offset=getOffsetPos(obj); hint.style.top = (y-offset.top+160) + 'px'; hint.style.left = (x-offset.left+30)+'px'; hint.style.display = ''; hint.innerHTML = str; } function hideHint () { document.getElementById(_hintDivId).style.display = 'none'; }</script> <div style="color: red;background-color: white; " onmouseout="hideHint();" onmouseover="showHint(event, this, 'blah blah...');">put mouse over me to see the help tip</div> 在UDN使用js得自己寫所有的基礎函數。。。若想寫出考究的代碼工作量太大了(這個例子就非常不考究) 如果讀者真的像我一樣閑,要弄點js玩,需要註意 1)<script></script>之間不能有任何換行,否則udn會自動把換行替換為"<br>"+換行,代碼就廢了 2)<script></script>之間盡量用 ' 而不是 "。有時候udn會強制轉譯這裏的" 3)當再次進入帶有html node's event hander的頁面的編輯狀態時,會發現udn自動套了一層,例如原來的 onclick="foo();" 成為了 onclick="function onclick(event) {foo();}"。 不要緊,實際的文章中還是原來那樣子的。但如果想修改,就一定要把多余的這些手動刪除 結論:不要在UDN自找麻煩寫復雜的js程式 PS 關於程序的一點說明。 這個程序寫亂了,到後來也懶得再調,大家明白怎麽回事就好。最初是想弄一個跟隨鼠標移動的tip,但是在udn編輯器嚴酷的環境下實在懶得弄鼠標跟蹤的handler了,,,, 直接使用鼠標事件給出的坐標是不可以的,因為tip的坐標原點是其上一層級的absolute元素的左上角(不是整個頁面的左上角)。又試圖用appendChild把tip元素直接變成頁面的頂級元素,但導致IE下的錯誤。由於我一般不用IE,昨晚弄到這裏就發布了。今天上午用IE測試才發現,只好重寫。 然後又發現輕視了udn頁面的復雜結構,找不準上一absolute元素的絕對坐標,導致tip的位置總有偏差,一氣之下添加了一個定死的偏移量,這下子程序就不能通用了。 總之是很失敗。。。。。再一個建議,在udn寫js,一定要盡量避免可能因為瀏覽器差異導致的代碼差異,太痛苦了。 |
|
( 休閒生活|網路生活 ) |