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