返回列表 上一主題 發帖

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

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2010-5-19 10:03 | 只看該作者

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

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

事件控制器

引發時機

onClick

利用滑鼠點選元件

onDrogDrop

利用滑鼠拖曳物件

onMouseDown

按下滑鼠按鈕

onMouseUp

放開滑鼠按鈕

onMouseOver

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

onMouseOut

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

onMouseMove

當滑鼠指標變換位置時

OnKeyDown

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

onKeyUp

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

onKeyPress

當按下鍵盤按鍵時

收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 2010-5-19 10:09 | 只看該作者
event物件
Dynamic HTML中有一個相當特別的物件「event」，當我們按下滑鼠按鍵、變換滑鼠指標位置…等，這些事件的訊息都會被存放到event物件中，例如：按下滑鼠按鍵時的onClick敲擊事件時，event物件就會記錄事件發生時滑鼠游標的所在位置，又如：我們按下了鍵盤上的某個按鍵，event物件就會記錄所按下的按鍵它的ASCII碼。茲將event物件可記錄的事件訊息列表如下：

event物件屬性

屬性訊息

x

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

y

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

keyCode

鍵盤事件發生時的按鍵ASCII碼

srcElement

事件作用對象的網頁元件





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



實例學習：
  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">

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

  9. </BODY>
  10. </HTML>
複製代碼

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

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

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

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

  23. </BODY>
  24. </HTML>
複製代碼
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
3#
發表於 2010-5-19 10:11 | 只看該作者
鍵盤事件使用
其實鍵盤事件好像比較不常用，不果小誌還是提供小小的範例來供大家參考與應用，還記得之前event物件的keyCode屬性吧？這個屬性內容就是記錄鍵盤事件所使用的按鍵ASCII碼，例如按下”c”，就會得到一個ASCII碼”67”。

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

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

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

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

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

心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
4#
發表於 2010-5-19 10:17 | 只看該作者
摺疊


什麼是摺疊ㄚ？摺疊就如同你在操作檔案總管的那種效果，看一下上圖你就明白了！這種摺疊的效果，也有人稱之為「樹枝壯目錄」，這種選單之下還有子選單的架構就稱之為摺疊，要決定網頁元件出現與否的屬性是哪一個ㄚ？是「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>
複製代碼


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

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

  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書籍。

現在小誌簡單的來示範一個摺疊的樹枝目錄選單：

首先我們利用<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）目前的狀態，如果它是隱藏的，我們就將它顯示出來，反之則將其隱藏起來，如此就產生了摺疊效果！



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

TOP

        靜思自在 : 慈悲沒有敵人，智慧不起煩惱。
返回列表 上一主題