返回列表 上一主題 發帖

[教學] (教學第34篇) Dynamic HTML 下篇

[教學] (教學第34篇) Dynamic HTML 下篇

再談事件處理器
小誌說過:當你移動滑鼠或是按下滑鼠按鍵時,這個「移動」、「按下」的動作就是一個事件!例如我們之前已經用過了滑鼠的「onClick(敲擊)」事件,我們現在再來瞧瞧滑鼠的「onMouseMove(滑鼠移動)」事件,小誌先將滑鼠與鍵盤的一些相關事件控制器列表如下:

事件控制器

引發時機

onClick

利用滑鼠點選元件

onDrogDrop

利用滑鼠拖曳物件

onMouseDown

按下滑鼠按鈕

onMouseUp

放開滑鼠按鈕

onMouseOver

將滑鼠指標移到某個元件上時

onMouseOut

當滑鼠指標移開某個元件時

onMouseMove

當滑鼠指標變換位置時

OnKeyDown

當按下鍵盤按鍵,但並未放開按鍵時

onKeyUp

當按下鍵盤按鍵並放開按鍵時

onKeyPress

當按下鍵盤按鍵時

心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

event物件
Dynamic HTML中有一個相當特別的物件「event」,當我們按下滑鼠按鍵、變換滑鼠指標位置…等,這些事件的訊息都會被存放到event物件中,例如:按下滑鼠按鍵時的onClick敲擊事件時,event物件就會記錄事件發生時滑鼠游標的所在位置,又如:我們按下了鍵盤上的某個按鍵,event物件就會記錄所按下的按鍵它的ASCII碼。茲將event物件可記錄的事件訊息列表如下:

event物件屬性

屬性訊息

x

滑鼠事件發生時所對應的視窗像素水平位置

y

滑鼠事件發生時所對應的視窗像素垂直位置

keyCode

鍵盤事件發生時的按鍵ASCII

srcElement

事件作用對象的網頁元件





滑鼠事件應用
有沒有在參觀別人網頁時,發現你的滑鼠指標會帶這一張圖片跑ㄚ?只要利用event的屬性加上事件控制器的使用,就可以達到這種效果囉,輸人不輸陣,我們馬上來完成這個特效!

13-13.png
2010-5-19 10:08


實例學習:
  1. <HTML>
  2. <HEAD><TITLE>簡易游標帶圖</TITLE></HEAD>
  3. <!--當滑鼠指標位置改變呼叫函式變更元件位置-->
  4. <BODY onMouseMove="document.all.map.style.pixelLeft=event.x;
  5. document.all.map.style.pixelTop=event.y">

  6. <img src="test.gif" alt="游移的圖片" id="map" style="position: absolute">

  7. </BODY>
  8. </HTML>
複製代碼

  • 按下滑鼠按鍵時的onClick敲擊事件時,event物件會記錄事件發生時滑鼠游標的所在位置,同樣的,當滑鼠指標變動位置時,event物件會記錄滑鼠指標變動位置後的水平與垂直座標像素位置。
  • 當滑鼠指標位置變動後,我們直接就把event物件記錄的滑鼠位置,指定為圖片的定位點位置,那麼圖片不就跟著滑鼠指標跑了嗎?
  • 在本例中,滑鼠指標會與跟隨的圖片重疊,這樣可能會造成一些問題,例如:點選網頁中的超鏈結時,你按下滑鼠按鍵點的是圖片還是網頁中的超鏈結ㄚ?為了改善這缺點,我們可以讓圖片不要跟隨指標那麼近,增加一些偏移量,讓兩者有些距離:
  1. <HTML>
  2. <HEAD><TITLE>偏移跟隨圖片</TITLE></HEAD>

  3. <SCRIPT language="JavaScript">
  4. //設定水平偏移量
  5. offx=20
  6. //設定垂直偏移量
  7. offy=20
  8. //變更元件位置函式
  9. function move()
  10. //利用event的屬性改變元件位置
  11. {
  12. document.all.map.style.pixelLeft=event.x+offx
  13. document.all.map.style.pixelTop=event.y+offy
  14. }
  15. </SCRIPT>

  16. <!--當滑鼠指標位置改變呼叫函式變更元件位置-->
  17. <BODY onMouseMove="move()">

  18. <img src="test.gif" alt="游移的圖片" id="map" style="position: absolute">

  19. </BODY>
  20. </HTML>
複製代碼
13-14.png
2010-5-19 10:09
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

鍵盤事件使用
其實鍵盤事件好像比較不常用,不果小誌還是提供小小的範例來供大家參考與應用,還記得之前event物件的keyCode屬性吧?這個屬性內容就是記錄鍵盤事件所使用的按鍵ASCII碼,例如按下”c”,就會得到一個ASCII碼”67”。

因為鍵盤事件的使用幾乎都相同,小誌就以onKeyUp事件控制器為例說明好了。

實例學習:
  1. <HTML>
  2. <HEAD><TITLE>按鍵ASCII碼</TITLE></HEAD>

  3. <SCRIPT language="JavaScript">
  4. function showkeycode()
  5. {
  6. alert(event.keyCode)
  7. }
  8. </SCRIPT>

  9. <BODY onKeyUp="showkeycode()">
  10. </BODY>
  11. </HTML>
複製代碼

  • 首先,我們在<BODY>標籤內放置了一個onKeyUp事件處理器(原始碼第11行),當事件引發時就呼叫showkeycod()函式。
  • 當showkeycod()函式被呼叫時,就取出event物件的ceyCode屬性值(對應按鍵的ASCII碼),然後把取得的屬性值直接利用alert()訊息視窗函式顯示出來。

13-15.png
2010-5-19 10:11
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

摺疊
13-16.png
2010-5-19 10:14


什麼是摺疊ㄚ?摺疊就如同你在操作檔案總管的那種效果,看一下上圖你就明白了!這種摺疊的效果,也有人稱之為「樹枝壯目錄」,這種選單之下還有子選單的架構就稱之為摺疊,要決定網頁元件出現與否的屬性是哪一個ㄚ?是「visiblity」對吧!「visiblity」屬性確實能決定元件的可見與否,但是,在元件的原始位置上會留下空白,如下例:我在網頁中安插三張圖片,當我點擊任一張圖片,它們都會隱藏起來,但只是你”看不見” 而已,事實上,它還在原來的位置上,網頁中的空間並沒有因為你看不見圖片而釋放!
  1. <html>
  2. <head><title>visibility屬性展示</title></head>
  3. <body>
  4. <p><img border="0" src="ada.gif" onClick="this.style.visibility='hidden'"></p>
  5. <p><img border="0" src="test.gif" onClick="this.style.visibility='hidden'"></p>
  6. <p><img border="0" src="adb.gif" onClick="this.style.visibility='hidden'"></p>
  7. </body>
  8. </html>
複製代碼
13-17.png
2010-5-19 10:14


哇!那使用「visiblity」屬性就做不出摺疊效果了嘛,沒錯!但是還有一個隱藏元件的屬性可用喔!

要隱藏網頁元件,同將元件所佔用的網頁空間釋放出來,我們可以使用『display』屬性!

13-18.png
2010-5-19 10:15
  1. <html>
  2. <head><title>display屬性展示</title></head>
  3. <body>
  4. <p><img border="0" src="ada.gif" onClick="this.style.display='none'"></p>
  5. <p><img border="0" src="test.gif" onClick="this.style.display='none'"></p>
  6. <p><img border="0" src="adb.gif" onClick="this.style.display='none'"></p>
  7. </body>
  8. </html>
複製代碼
『display』屬性值若設定為「none」,則會隱藏網頁元件並將網頁空間釋放出來,如果給它一個空值,則網頁會秀出來,並擠入網頁中,當然,『display』屬性還有其他的設定值,但不在本教學探討範圍,有興趣請參考相關的CSS書籍。

現在小誌簡單的來示範一個摺疊的樹枝目錄選單:
13-19.png
2010-5-19 10:16

首先我們利用<DIV>區塊標籤做一個蜂巢式的組合(就是區塊中還包含另一個區啦!),見上圖,藍色敘述的<DIV>區塊是最外層的區塊,我們沒有設定它的display屬性,所以在網頁中我們可以看到區塊的內容「麻辣家族」這四個字;紅色敘述的<DIV>區塊是內層的區塊,我們設定它的display屬性為’none’,所以在網頁中我們見不到區塊的內容,同我們將這內層區塊的ID屬性設為「myhome」。

當外層的區塊產生敲擊事件時會呼叫 expcontrol()函式,該函式的內容如下:
  1. function expcontrol()
  2. {
  3.       if (document.all.myhome.style.display=='none')
  4.        {
  5.        document.all.myhome.style.display=''
  6.        }
  7.      else
  8.        {
  9.        document.all.myhome.style.display='none'
  10.        }
  11. }
複製代碼
當expcontrol()函式被呼叫時,我們先判斷內層區塊(myhome)目前的狀態,如果它是隱藏的,我們就將它顯示出來,反之則將其隱藏起來,如此就產生了摺疊效果!

13-20.png
2010-5-19 10:17


很簡單,對吧!依此類推,你就可以建立更多層次的堆疊了!好,小誌再給一個範例,但是不做解釋了喔!讓你腦力激盪一下,如果你能做出一個程式碼簡潔又是多層且多項目式的摺疊目錄,寫E-Mail給小誌,並介紹你的設計原理,小誌將會以專欄的方式將你的信件發表在網站上,並送你一份小禮物!
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 屋寬不如心寬。
返回列表 上一主題