字體：小 中 大 |
|
|
|
| 2010/01/04 02:25:04瀏覽726｜回應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，一定要盡量避免可能因為瀏覽器差異導致的代碼差異，太痛苦了。 |
|
| ( 休閒生活｜網路生活 ) |
