網路城邦
上一篇 回創作列表 下一篇   字體:
如何在UDN的blog中添加自己的javascript
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,一定要盡量避免可能因為瀏覽器差異導致的代碼差異,太痛苦了。
( 休閒生活網路生活 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=sunsail&aid=3568241

 回應文章

星際訪客
等級:8
留言加入好友
Re~
2010/01/12 16:14

老實說...是有方便的方法的!


中州楚佩(sunsail) 於 2010-01-12 21:03 回覆:
哦?添加js的简便方法么?可是udn的编辑器中添加js代码很不方便啊?若果您有什么新的麻烦指点一下 谢谢~~~ O(∩_∩)O~

若是这个提示信息的功能,無 ★ 言先生用title属性很好的实现了。

紫气东来
等級:8
留言加入好友
UDN的易用性是很糟糕的
2010/01/04 16:42
唉,特别是其中对于简体字的支持尤其的差劲。

万恶的2000字限制啊!

少侠做的这个代码是要做什么的?为了炫下效果还是有什么功能性的作用?


方如行义,圆如用智,动如逞才,静如遂意。

中州楚佩(sunsail) 於 2010-01-04 17:18 回覆:
爱 这点东西有啥可炫耀的。。。。

是“無 ★ 言”在他的一篇文章中提到想在UDN使用javascript来进行古文注释。我就过来试验了一下。实验的结论是,大家还是洗洗睡吧,js不适合UDN的blog