用html css javascript打造自己的RIA圖文教程第2/2頁(yè)
更新時(shí)間：2009年07月09日 09:46:55 作者：
用html&css&javascript打造自己的RIA之一,包括了配置等
在筆者上一篇的文章《用 html&css&javascript 打造自己的 RIA 之一》中，通過(guò)一個(gè)簡(jiǎn)單的例子，詳細(xì)介紹了用 HTML&CSS&javascript 開(kāi)發(fā) RIA 的整個(gè)過(guò)程，并簡(jiǎn)單介紹了 netbeans6.1 的使用，本">HTML&CSS&javascript 開(kāi)發(fā) RIA 的整個(gè)過(guò)程，并簡(jiǎn)單介紹了 netbeans6.1 的使用，本文雖然采用 netbeans6.5 ，但是從操作上來(lái)講，差別并不大，但是該版本對(duì) js 的支持相比較 6.1 又有了比較大的進(jìn)步。
通過(guò)上一個(gè)例子，已經(jīng)可以看出，打造這一類的 RIA ，從技術(shù)上來(lái)講，并不困難，都是純靜態(tài)的元素，難點(diǎn)在于如何去設(shè)計(jì)，顏色的選取， CSS 的設(shè)計(jì)以及考慮用戶行為和心理上的方便性，前面兩點(diǎn)都容易理解，最后一點(diǎn)，只要是指設(shè)計(jì)出了 UI ，如何去展現(xiàn)這些 UI ，以方便用戶操作。
在這篇文章里，本文再介紹一個(gè)綜合性的例子，以鞏固讀者對(duì)純 Html&css&js 在開(kāi)發(fā) RIA 方面的理解。
- Demo 展示
主要界面截圖：
點(diǎn)擊類 Solaris 窗體的 WEB Ui 鏈接，彈出一個(gè) Solaris 樣式的小窗體，同時(shí)背景變暗，該窗體帶陰影，可以拖動(dòng)，點(diǎn)擊左上上腳的小箭頭，彈出一個(gè)菜單。點(diǎn)擊菜單中的首頁(yè)，則該小窗體中的內(nèi)容跳轉(zhuǎn)到 sun 公司的主頁(yè)，如下圖顯示：
點(diǎn)擊菜單中的瀏覽，則彈出一個(gè)自制的小窗體，用來(lái)輸入網(wǎng)址，如下圖：
回車即可跳轉(zhuǎn)至輸入頁(yè)面。
點(diǎn)擊刷新，則返回初始頁(yè)面，點(diǎn)擊關(guān)閉，則關(guān)閉該窗體。
該窗體同樣可以點(diǎn)擊右上角的 XX 關(guān)閉。
在一開(kāi)始進(jìn)入的窗體頁(yè)面中，還存在一個(gè)右鍵菜單，如下圖：
這個(gè)功能和點(diǎn)擊左上角的箭頭的功能大體是相同的，不同的是，執(zhí)行首頁(yè)，刷新會(huì)跳出 wait 框，點(diǎn)擊刷新后出來(lái)的小窗體，輸入網(wǎng)址回車，也會(huì)出現(xiàn) wait 框。如下圖：
單擊關(guān)閉則會(huì)彈出一個(gè)詢問(wèn)是否確認(rèn)關(guān)閉的小窗體，如下圖：
而該對(duì)話框上的小圖標(biāo)，筆者也加了一個(gè)小菜單，如圖：
同樣通過(guò)右鍵菜單出來(lái)的小窗體左上腳都帶了小菜單，外面的筆者在這邊沒(méi)有做，畢竟不是在做一個(gè)產(chǎn)品，所以沒(méi)有重復(fù)著做。
本例中點(diǎn)擊右上腳的小 XX 都有關(guān)閉的功能。
- 作用
這些例子看上去好看，到底有哪些實(shí)用價(jià)值，很顯然。
2. 自制的瀏覽窗體，這一類 UI ，對(duì)于一些只要實(shí)現(xiàn)某個(gè)小功能，但是又不希望在調(diào)用的時(shí)候跳轉(zhuǎn)頁(yè)面的情況下，比較實(shí)用，就好比，我這個(gè)地方要增加一條新聞，則可以彈出一個(gè)小框，輸入信息，點(diǎn)擊確定，馬上就可以看到新增加的新聞。當(dāng)然該小窗體也可以做地相當(dāng)美觀，自制的警告對(duì)話框也是類似的作用。
3. 彈出菜單，很顯然集成一些用戶常用的功能在右鍵菜單中，可以給用戶的操作帶來(lái)方便性。
4.wait 框，這一點(diǎn)在前一篇文章中已經(jīng)講過(guò)，在頁(yè)面加載完成前，顯示一個(gè) wait 框，能夠減少因?yàn)榈却斐傻男睦砩系臒┰辍?/SPAN>
5. 變暗的背景，鎖定當(dāng)前窗體，鎖定用戶只能在當(dāng)前窗體上進(jìn)行操作，這個(gè)效果也只有在此種有自定義 UI 的情況下有意義，因?yàn)橛袕棾龅?/SPAN> UI ，所以才有必要變暗背景，提示用戶，后面已經(jīng)不可點(diǎn)擊，請(qǐng)關(guān)注當(dāng)前操作。
- 技術(shù)要點(diǎn)
在開(kāi)始實(shí)現(xiàn)之前，先看一下項(xiàng)目的目錄截圖：
一，可拖動(dòng)的窗體。
原理：
首先：這個(gè)可拖動(dòng)的窗體，事實(shí)上只是一個(gè)由圖片組成的表格，而中間的內(nèi)容，只要內(nèi)置一個(gè) iframes ，然后通過(guò) js 來(lái)控制 iframes 的 src 或者 location.href 屬性就可以根據(jù)需要進(jìn)行窗體內(nèi)容的變換。
其次：可拖動(dòng)效果顯然也是通過(guò) js 來(lái)制作的，無(wú)非是捕捉這幾個(gè)事件，按下鼠標(biāo)的事件 onmousedown ，拖拽 onmousemove ，松開(kāi)鼠標(biāo) onmouseup ，在觸發(fā) onmousedown 的時(shí)候，需要做的是確定鼠標(biāo)的位置，獲取要移動(dòng)的對(duì)象，當(dāng)觸發(fā) onmousemove 的時(shí)候，讓要移動(dòng)對(duì)象的坐標(biāo)位置隨著鼠標(biāo)的坐標(biāo)位置做相對(duì)移動(dòng)，這里為什么是相對(duì)移動(dòng)呢，很顯然，按下鼠標(biāo)的 X ， Y 軸和對(duì)象的 X ， Y 軸往往是不一樣的，對(duì)象的 X ， Y 軸通常情況下是指，對(duì)象的左上角，而鼠標(biāo)點(diǎn)擊處的 X,Y 軸才是鼠標(biāo)的位置，那么如果讓他們?cè)谝苿?dòng)的時(shí)候， X,Y 軸位置一樣的話，顯然一移動(dòng)，鼠標(biāo)就會(huì)亂跑了，所以要計(jì)算鼠標(biāo)移動(dòng)的距離，并把這個(gè)距離值加到要移動(dòng)對(duì)象的對(duì)應(yīng)的 X,Y 軸上去，事實(shí)上要做一個(gè)比較理想的拖拽效果，還是有很多細(xì)節(jié)要處理的。
最后：控制該窗體的出現(xiàn)或者消失，是通過(guò) js 和 css 來(lái)共同決定的。
關(guān)鍵技術(shù)：
1 ，本例子采用的 Solaris 的窗體，筆者是從 OpenSolaris 下截了一張圖，并通過(guò)圖像處理軟件 Fireworks ，摳掉中間一塊，加一個(gè)陰影的特效，再通過(guò)該軟件的切片功能，切一下，導(dǎo)出，即可生成 html 文件。推廣一下，只要讀者覺(jué)得有些窗口不錯(cuò)的，就可以這么做，本文的對(duì)話框的 UI 也是這么搞出來(lái)的。中間摳掉的一塊就放置一個(gè) iframe ，代碼如下：
<iframe width="711" height="499" frameborder="0" id="content" name="content" scrolling="auto"></iframe>
width 和 height 這個(gè)視情況而定，注意一定要賦予 id 值，否則 js 要操作這個(gè)有點(diǎn)困難。
2. 鼠標(biāo)的拖拽，原理已經(jīng)講的很明確，具體怎么去實(shí)現(xiàn)，大家可以參考以下文章，
http://www.365tech.net/Javascript/27498/page1
本文的例子，是采取了 YUI ， yahoo 包中已經(jīng)做好的功能，在 inc 目錄下有一個(gè) yahoo 的文件夾，這個(gè)就是雅虎開(kāi)發(fā)的 ajax 框架，要實(shí)現(xiàn)拖拽功能，只要導(dǎo)入以下幾個(gè) js 庫(kù)
<script type="text/javascript" src="inc/yahoo/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="inc/yahoo/event/event-min.js" ></script>
<script type="text/javascript" src="inc/yahoo/dom/dom-min.js"></script>
<script type="text/javascript" src="inc/yahoo/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="inc/yahoo/animation/animation-min.js"></script>
然后再加以下一段代碼，即可控制窗體的拖動(dòng)：
<script type="text/javascript">
YAHOO.example.DDApp = function() {
var dd;
return {
init: function() {
dd = new YAHOO.util.DD("webpage");// 這里的 webpage 即要拖拽對(duì)象的 ID
}
}
}();
YAHOO.util.Event.onDOMReady(YAHOO.example.DDApp.init);
</script>
使窗體能夠拖動(dòng)，還有一個(gè)很關(guān)鍵的因素，即 CSS 的 position 屬性，一定要設(shè)置成 absolute ，因?yàn)檫@里是按照絕對(duì)位置來(lái)實(shí)現(xiàn)定位的。
3. 要控制窗體的出現(xiàn)，則可以通過(guò) CSS 的 display 屬性來(lái)實(shí)現(xiàn)，當(dāng)其值為 none 時(shí)，不顯示，為 block 時(shí)則顯示，而 iframe 的內(nèi)容，則可通過(guò)以下的 js 來(lái)實(shí)現(xiàn)：
document.content.location.href=url;
其中 content 為 iframe 的 id ， url 為需要轉(zhuǎn)向的地址。這個(gè)值可通過(guò) js 自定義函數(shù)的參數(shù)來(lái)獲得。
而控制出現(xiàn)和消失的 js 為：
var webpage=document.getElementById("webpage");
webpage.style.display="block";
webpage 為目標(biāo)對(duì)象的 ID ，所謂打開(kāi)則是 block ，關(guān)閉則是 none 。
二，自制的瀏覽窗體
這個(gè)原理和實(shí)現(xiàn)技術(shù)其實(shí)和第一個(gè)是類似的，不過(guò)窗體是截的 OpenSolaris 的對(duì)話框的小圖，從中再摳掉一塊，導(dǎo)出，放一些文字，一個(gè)輸入框，兩個(gè)按鈕。出現(xiàn)和消失也是通過(guò) js 和 CSS 來(lái)實(shí)現(xiàn)的。這里不再贅述。
三，彈出菜單
原理：
首先：這個(gè)菜單只是一個(gè) html 的表格或者 div 組成的靜態(tài)元素，而菜單項(xiàng)也不過(guò)是文字鏈接，點(diǎn)擊其中一個(gè)鏈接觸發(fā) js 事件。
其次：菜單出現(xiàn)的位置，這個(gè)需要根據(jù)鼠標(biāo)的點(diǎn)擊位置，來(lái)做微調(diào)，決定菜單出現(xiàn)的位置。
關(guān)鍵技術(shù)：
1. 制作菜單樣式，這個(gè)就不贅述了，知道了原理，自己去設(shè)計(jì)就行了。
2. 菜單出現(xiàn)的位置，在這個(gè)例子里，有兩種情況，一個(gè)是點(diǎn)擊左上角的小圖標(biāo)出現(xiàn)下拉菜單，還有一個(gè)就是右鍵菜單。不管是那種情況，都需要先確定點(diǎn)擊處的位置，只不過(guò)第一種是左上角小圖標(biāo)的位置，而右鍵菜單就是鼠標(biāo)右擊處的位置。
確定位置可以用對(duì)象的 getBoundingClientRect 屬性，如：
var orect =obj.getBoundingClientRect();
return orect.left;
相當(dāng)于返回 X 坐標(biāo)，而
return orect.top;
相當(dāng)于返回 Y 坐標(biāo)，其中 obj 就是頁(yè)面中的對(duì)象，可通過(guò) document.getElementById 來(lái)獲得。
知道了目標(biāo)對(duì)象的 X,Y 坐標(biāo)，那么菜單的位置基本上就可以確定了
contextmenu.style.posLeft= document.body.scrollLeft+getX(dialogmenu)-3;
contextmenu.style.posTop= document.body.scrollTop+getY(dialogmenu)+22;
其中 dialogmenu ，即目標(biāo)對(duì)象， contextmenu 即菜單對(duì)象。
這個(gè)是左擊，如果是右擊的話，也是類似，不過(guò)右擊觸發(fā)的是 oncontextmenu ，只要在觸發(fā)事件的同時(shí)，調(diào)用菜單即可顯示。
- 總結(jié)
1. 用 html 和 CSS 來(lái)設(shè)計(jì)漂亮的 UI
2. 用 js 來(lái)控制其行為
既然已經(jīng)用到 js 了，這個(gè)功能基本上就可以很大地?cái)U(kuò)展下去了，因?yàn)?/SPAN> Ajax 說(shuō)到底也是 js ，所以再聰明一點(diǎn)的讀者，應(yīng)該可以知道那些所謂的 Ajax 框架是如何做出來(lái)的了吧。
本文所介紹的例子，如果觸發(fā)的 js 函數(shù)，采用了 Ajax 的方式來(lái)處理，那么也可以自己制作自己的 Ajax 框架了，當(dāng)然這里面還是有很多細(xì)節(jié)要處理的，但是總體思路與本文介紹的思路類似。
文件打包下載1
通過(guò)上一個(gè)例子，已經(jīng)可以看出，打造這一類的 RIA ，從技術(shù)上來(lái)講，并不困難，都是純靜態(tài)的元素，難點(diǎn)在于如何去設(shè)計(jì)，顏色的選取， CSS 的設(shè)計(jì)以及考慮用戶行為和心理上的方便性，前面兩點(diǎn)都容易理解，最后一點(diǎn)，只要是指設(shè)計(jì)出了 UI ，如何去展現(xiàn)這些 UI ，以方便用戶操作。
在這篇文章里，本文再介紹一個(gè)綜合性的例子，以鞏固讀者對(duì)純 Html&css&js 在開(kāi)發(fā) RIA 方面的理解。
- Demo 展示
主要界面截圖：
點(diǎn)擊類 Solaris 窗體的 WEB Ui 鏈接，彈出一個(gè) Solaris 樣式的小窗體，同時(shí)背景變暗，該窗體帶陰影，可以拖動(dòng)，點(diǎn)擊左上上腳的小箭頭，彈出一個(gè)菜單。點(diǎn)擊菜單中的首頁(yè)，則該小窗體中的內(nèi)容跳轉(zhuǎn)到 sun 公司的主頁(yè)，如下圖顯示：
點(diǎn)擊菜單中的瀏覽，則彈出一個(gè)自制的小窗體，用來(lái)輸入網(wǎng)址，如下圖：
回車即可跳轉(zhuǎn)至輸入頁(yè)面。
點(diǎn)擊刷新，則返回初始頁(yè)面，點(diǎn)擊關(guān)閉，則關(guān)閉該窗體。
該窗體同樣可以點(diǎn)擊右上角的 XX 關(guān)閉。
在一開(kāi)始進(jìn)入的窗體頁(yè)面中，還存在一個(gè)右鍵菜單，如下圖：
這個(gè)功能和點(diǎn)擊左上角的箭頭的功能大體是相同的，不同的是，執(zhí)行首頁(yè)，刷新會(huì)跳出 wait 框，點(diǎn)擊刷新后出來(lái)的小窗體，輸入網(wǎng)址回車，也會(huì)出現(xiàn) wait 框。如下圖：
單擊關(guān)閉則會(huì)彈出一個(gè)詢問(wèn)是否確認(rèn)關(guān)閉的小窗體，如下圖：
而該對(duì)話框上的小圖標(biāo)，筆者也加了一個(gè)小菜單，如圖：
同樣通過(guò)右鍵菜單出來(lái)的小窗體左上腳都帶了小菜單，外面的筆者在這邊沒(méi)有做，畢竟不是在做一個(gè)產(chǎn)品，所以沒(méi)有重復(fù)著做。
本例中點(diǎn)擊右上腳的小 XX 都有關(guān)閉的功能。
- 作用
這些例子看上去好看，到底有哪些實(shí)用價(jià)值，很顯然。
2. 自制的瀏覽窗體，這一類 UI ，對(duì)于一些只要實(shí)現(xiàn)某個(gè)小功能，但是又不希望在調(diào)用的時(shí)候跳轉(zhuǎn)頁(yè)面的情況下，比較實(shí)用，就好比，我這個(gè)地方要增加一條新聞，則可以彈出一個(gè)小框，輸入信息，點(diǎn)擊確定，馬上就可以看到新增加的新聞。當(dāng)然該小窗體也可以做地相當(dāng)美觀，自制的警告對(duì)話框也是類似的作用。
3. 彈出菜單，很顯然集成一些用戶常用的功能在右鍵菜單中，可以給用戶的操作帶來(lái)方便性。
4.wait 框，這一點(diǎn)在前一篇文章中已經(jīng)講過(guò)，在頁(yè)面加載完成前，顯示一個(gè) wait 框，能夠減少因?yàn)榈却斐傻男睦砩系臒┰辍?/SPAN>
5. 變暗的背景，鎖定當(dāng)前窗體，鎖定用戶只能在當(dāng)前窗體上進(jìn)行操作，這個(gè)效果也只有在此種有自定義 UI 的情況下有意義，因?yàn)橛袕棾龅?/SPAN> UI ，所以才有必要變暗背景，提示用戶，后面已經(jīng)不可點(diǎn)擊，請(qǐng)關(guān)注當(dāng)前操作。
- 技術(shù)要點(diǎn)
在開(kāi)始實(shí)現(xiàn)之前，先看一下項(xiàng)目的目錄截圖：
一，可拖動(dòng)的窗體。
原理：
首先：這個(gè)可拖動(dòng)的窗體，事實(shí)上只是一個(gè)由圖片組成的表格，而中間的內(nèi)容，只要內(nèi)置一個(gè) iframes ，然后通過(guò) js 來(lái)控制 iframes 的 src 或者 location.href 屬性就可以根據(jù)需要進(jìn)行窗體內(nèi)容的變換。
其次：可拖動(dòng)效果顯然也是通過(guò) js 來(lái)制作的，無(wú)非是捕捉這幾個(gè)事件，按下鼠標(biāo)的事件 onmousedown ，拖拽 onmousemove ，松開(kāi)鼠標(biāo) onmouseup ，在觸發(fā) onmousedown 的時(shí)候，需要做的是確定鼠標(biāo)的位置，獲取要移動(dòng)的對(duì)象，當(dāng)觸發(fā) onmousemove 的時(shí)候，讓要移動(dòng)對(duì)象的坐標(biāo)位置隨著鼠標(biāo)的坐標(biāo)位置做相對(duì)移動(dòng)，這里為什么是相對(duì)移動(dòng)呢，很顯然，按下鼠標(biāo)的 X ， Y 軸和對(duì)象的 X ， Y 軸往往是不一樣的，對(duì)象的 X ， Y 軸通常情況下是指，對(duì)象的左上角，而鼠標(biāo)點(diǎn)擊處的 X,Y 軸才是鼠標(biāo)的位置，那么如果讓他們?cè)谝苿?dòng)的時(shí)候， X,Y 軸位置一樣的話，顯然一移動(dòng)，鼠標(biāo)就會(huì)亂跑了，所以要計(jì)算鼠標(biāo)移動(dòng)的距離，并把這個(gè)距離值加到要移動(dòng)對(duì)象的對(duì)應(yīng)的 X,Y 軸上去，事實(shí)上要做一個(gè)比較理想的拖拽效果，還是有很多細(xì)節(jié)要處理的。
最后：控制該窗體的出現(xiàn)或者消失，是通過(guò) js 和 css 來(lái)共同決定的。
關(guān)鍵技術(shù)：
1 ，本例子采用的 Solaris 的窗體，筆者是從 OpenSolaris 下截了一張圖，并通過(guò)圖像處理軟件 Fireworks ，摳掉中間一塊，加一個(gè)陰影的特效，再通過(guò)該軟件的切片功能，切一下，導(dǎo)出，即可生成 html 文件。推廣一下，只要讀者覺(jué)得有些窗口不錯(cuò)的，就可以這么做，本文的對(duì)話框的 UI 也是這么搞出來(lái)的。中間摳掉的一塊就放置一個(gè) iframe ，代碼如下：
<iframe width="711" height="499" frameborder="0" id="content" name="content" scrolling="auto"></iframe>
width 和 height 這個(gè)視情況而定，注意一定要賦予 id 值，否則 js 要操作這個(gè)有點(diǎn)困難。
2. 鼠標(biāo)的拖拽，原理已經(jīng)講的很明確，具體怎么去實(shí)現(xiàn)，大家可以參考以下文章，
http://www.365tech.net/Javascript/27498/page1
本文的例子，是采取了 YUI ， yahoo 包中已經(jīng)做好的功能，在 inc 目錄下有一個(gè) yahoo 的文件夾，這個(gè)就是雅虎開(kāi)發(fā)的 ajax 框架，要實(shí)現(xiàn)拖拽功能，只要導(dǎo)入以下幾個(gè) js 庫(kù)
<script type="text/javascript" src="inc/yahoo/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="inc/yahoo/event/event-min.js" ></script>
<script type="text/javascript" src="inc/yahoo/dom/dom-min.js"></script>
<script type="text/javascript" src="inc/yahoo/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="inc/yahoo/animation/animation-min.js"></script>
然后再加以下一段代碼，即可控制窗體的拖動(dòng)：
<script type="text/javascript">
YAHOO.example.DDApp = function() {
var dd;
return {
init: function() {
dd = new YAHOO.util.DD("webpage");// 這里的 webpage 即要拖拽對(duì)象的 ID
}
}
}();
YAHOO.util.Event.onDOMReady(YAHOO.example.DDApp.init);
</script>
使窗體能夠拖動(dòng)，還有一個(gè)很關(guān)鍵的因素，即 CSS 的 position 屬性，一定要設(shè)置成 absolute ，因?yàn)檫@里是按照絕對(duì)位置來(lái)實(shí)現(xiàn)定位的。
3. 要控制窗體的出現(xiàn)，則可以通過(guò) CSS 的 display 屬性來(lái)實(shí)現(xiàn)，當(dāng)其值為 none 時(shí)，不顯示，為 block 時(shí)則顯示，而 iframe 的內(nèi)容，則可通過(guò)以下的 js 來(lái)實(shí)現(xiàn)：
document.content.location.href=url;
其中 content 為 iframe 的 id ， url 為需要轉(zhuǎn)向的地址。這個(gè)值可通過(guò) js 自定義函數(shù)的參數(shù)來(lái)獲得。
而控制出現(xiàn)和消失的 js 為：
var webpage=document.getElementById("webpage");
webpage.style.display="block";
webpage 為目標(biāo)對(duì)象的 ID ，所謂打開(kāi)則是 block ，關(guān)閉則是 none 。
二，自制的瀏覽窗體
這個(gè)原理和實(shí)現(xiàn)技術(shù)其實(shí)和第一個(gè)是類似的，不過(guò)窗體是截的 OpenSolaris 的對(duì)話框的小圖，從中再摳掉一塊，導(dǎo)出，放一些文字，一個(gè)輸入框，兩個(gè)按鈕。出現(xiàn)和消失也是通過(guò) js 和 CSS 來(lái)實(shí)現(xiàn)的。這里不再贅述。
三，彈出菜單
原理：
首先：這個(gè)菜單只是一個(gè) html 的表格或者 div 組成的靜態(tài)元素，而菜單項(xiàng)也不過(guò)是文字鏈接，點(diǎn)擊其中一個(gè)鏈接觸發(fā) js 事件。
其次：菜單出現(xiàn)的位置，這個(gè)需要根據(jù)鼠標(biāo)的點(diǎn)擊位置，來(lái)做微調(diào)，決定菜單出現(xiàn)的位置。
關(guān)鍵技術(shù)：
1. 制作菜單樣式，這個(gè)就不贅述了，知道了原理，自己去設(shè)計(jì)就行了。
2. 菜單出現(xiàn)的位置，在這個(gè)例子里，有兩種情況，一個(gè)是點(diǎn)擊左上角的小圖標(biāo)出現(xiàn)下拉菜單，還有一個(gè)就是右鍵菜單。不管是那種情況，都需要先確定點(diǎn)擊處的位置，只不過(guò)第一種是左上角小圖標(biāo)的位置，而右鍵菜單就是鼠標(biāo)右擊處的位置。
確定位置可以用對(duì)象的 getBoundingClientRect 屬性，如：
var orect =obj.getBoundingClientRect();
return orect.left;
相當(dāng)于返回 X 坐標(biāo)，而
return orect.top;
相當(dāng)于返回 Y 坐標(biāo)，其中 obj 就是頁(yè)面中的對(duì)象，可通過(guò) document.getElementById 來(lái)獲得。
知道了目標(biāo)對(duì)象的 X,Y 坐標(biāo)，那么菜單的位置基本上就可以確定了
contextmenu.style.posLeft= document.body.scrollLeft+getX(dialogmenu)-3;
contextmenu.style.posTop= document.body.scrollTop+getY(dialogmenu)+22;
其中 dialogmenu ，即目標(biāo)對(duì)象， contextmenu 即菜單對(duì)象。
這個(gè)是左擊，如果是右擊的話，也是類似，不過(guò)右擊觸發(fā)的是 oncontextmenu ，只要在觸發(fā)事件的同時(shí)，調(diào)用菜單即可顯示。
- 總結(jié)
1. 用 html 和 CSS 來(lái)設(shè)計(jì)漂亮的 UI
2. 用 js 來(lái)控制其行為
既然已經(jīng)用到 js 了，這個(gè)功能基本上就可以很大地?cái)U(kuò)展下去了，因?yàn)?/SPAN> Ajax 說(shuō)到底也是 js ，所以再聰明一點(diǎn)的讀者，應(yīng)該可以知道那些所謂的 Ajax 框架是如何做出來(lái)的了吧。
本文所介紹的例子，如果觸發(fā)的 js 函數(shù)，采用了 Ajax 的方式來(lái)處理，那么也可以自己制作自己的 Ajax 框架了，當(dāng)然這里面還是有很多細(xì)節(jié)要處理的，但是總體思路與本文介紹的思路類似。
文件打包下載1
