欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用html css javascript打造自己的RIA圖文教程第1/2頁

 更新時間:2009年07月09日 09:46:55   作者:  
用html&css&javascript打造自己的RIA之一,包括了配置等

在制作之前,先建立開發(fā)環(huán)境。
打開netbeans6.1,在項目工作區(qū),右擊新建項目,選擇Web目錄下的Web應(yīng)用程序。

用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
項目名稱輸入 RIADemo 。
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
選擇運行的服務(wù)器以及 java ee 標(biāo)準(zhǔn)。
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
在這里選擇tomcat5.0,j2ee1.4,本文介紹例子,并不依賴于服務(wù)器,因為html&css&javascript本身都是靜態(tài)的,做完以后就是一個html文件。嚴(yán)格意義上的web程序肯定是要有一個服務(wù)器來運行的,netbeans還是采用了這種管理理念。
在這一步,已經(jīng)可以點擊完成建立項目,下一步是選擇框架,這里,為了簡單純凈,不選擇任何框架。
建立好項目后,項目工作區(qū)項目結(jié)構(gòu)如下:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
因為是靜態(tài)的,所以不需要關(guān)注 Web 頁目錄外的任何東西。
為了方便管理,還需要在 Web 頁目錄下新建兩個目錄, inc 以及 images ,相當(dāng)簡單,這里不再贅述。
  第一個例子,頁面請求時的 wait ,效果如圖
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

這個例子是在當(dāng)前頁面中執(zhí)行某個操作,還未離開或者返回操作結(jié)果前,凍結(jié)本頁面,顯示一個wait框。作用是提示用戶,頁面正在載入。特別是對于某些大批量數(shù)據(jù)的請求,該UI可以減輕客戶因長時間等待而引起的煩躁。
簡單分析一下,這個例子由2個要點組成。
1 ,靜態(tài)元素
2 ,該框何時出現(xiàn)何時消失
該效果中的UI是一個有l(wèi)oading的框,該框處于變暗的背景上。
對于靜態(tài)元素,不論其表現(xiàn)成什么樣子,其本質(zhì)總是HTML,CSS和javascript,當(dāng)然嵌入控件的除外,比如flash,事實上嵌入的控件已經(jīng)不在html等靜態(tài)元素的范圍內(nèi)了。
該例中,帶有l(wèi)oading的框?qū)嶋H上只是一個包含了具有滾動效果的圖片和普通文本的div,只不過該div,用CSS進行了美化,然后結(jié)合網(wǎng)頁的特點,使用javascript來控制該div顯示和消失。
那么,如何來制作這樣的效果,為了清晰地說明整個制作過程,暫不論javascript,先制作出該div。
在web頁目錄下,右擊,新建-->html

用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
選擇 html ,給文件命名index
頁面建立后,還需要的素材就是具有滾動效果的圖片 loading.gif ,把該圖片拷貝至 images 文件夾下。
接下來,新建一個 CSS 文件,在 inc 文件夾上右擊,新建 --> 其他 , 在其他目錄中選擇層疊樣式表,如圖:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
取名 style ,點擊完成,生成 CSS 文件,通過該步驟新建的 CSS ,自動生成了一個樣式 root ,把光標(biāo)移動到 root 樣式表的范圍內(nèi), netbeans 會顯示一個針對 CSS 的樣式生成器窗口,同時還有一個效果預(yù)覽窗口,如下圖:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
編輯器右邊的生成器窗口,提供了很多屬性的 GUI 設(shè)置,并會自動生成對應(yīng)的代碼,而編輯器的下方則是該樣式的預(yù)覽效果,比如,筆者在字體面板里,樣式選擇 italic ,粗細(xì)選擇 bold ,再選擇下劃線,顏色選擇 #ff0099( 紅色的一種 ) ,選擇顏色時會彈出顏色選擇器,選擇對應(yīng)的顏色,則預(yù)覽效果如下圖:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

編輯器自動生成了代碼,而預(yù)覽框里也顯示了應(yīng)用后的效果,這一點 netbeans 是做地相當(dāng)不錯了。
需要說明的是,工具生成的代碼固然簡單,但是肯定沒有自己手寫來地靈活,好控制。
在這里,定義我們需要的等待框的樣式
.loading
{
border:2px solid #a3bad9;/* 被應(yīng)用樣式對象的邊框的樣式 */
color:#003366; /* 被應(yīng)用樣式對象中的內(nèi)容的顏色 */
padding:10px; /* 被應(yīng)用樣式對象中的內(nèi)容距離樣式邊框的距離 ( 上,下,左,右 ) */
margin:0; /* 被應(yīng)用樣式對象與其周圍元素的距離 ( 上,下,左,右 ) */
z-index:2000; /* 被應(yīng)用樣式對象在網(wǎng)頁中的 z 坐標(biāo)的值 */
width:205px; /* 被應(yīng)用樣式對象的寬度 */
text-align:center; /* 被應(yīng)用樣式對象中的內(nèi)容居中 */
position:absolute; /* 被應(yīng)用樣式對象在頁面中的位置顯示方式 */
font-weight: bold; /* 被應(yīng)用樣式對象中的字體的樣式 */
font-size: 13px; /* 被應(yīng)用樣式對象中的字體的大小 */
}
各屬性的具體意思,讀者如果有興趣可以再找資料以做更深一步的了解,這里不做詳述。
建立好 CSS 后,在剛才建立的 index.html 文件的 部分,加入以下代碼,以導(dǎo)入 CSS 樣式。

區(qū)域加入


用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角 頁面載入中 .....

保存文件,在 index.html 文件上右擊,選擇運行文件
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
則自動彈出瀏覽器,顯示效果如下:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
一個框就出現(xiàn)了,細(xì)心的讀者可以發(fā)現(xiàn),該 UI 和一開始演示的略有不同,如果在剛才定義的 loading 樣式中加入,如下代碼:
background:white url(../images/block-bg.gif) repeat-x; /* 被應(yīng)用樣式對象的背景,并設(shè)置成橫向重復(fù) */
當(dāng)然還需要加入背景圖 block-bg.gif ,加入背景圖后,現(xiàn)在是效果如下:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
至此該 UI 制作完成。
接下來制作如何使網(wǎng)頁變暗,并且不能點擊。
網(wǎng)頁的變暗,最簡單的辦法就是把網(wǎng)頁的背景色改成暗色,不過這個顯然是沒有意義的,因為改成暗色后,頁面上的元素依然可以點擊。
那么如何實現(xiàn)背景變暗,并且不能點擊呢?
再分析靜態(tài)網(wǎng)頁的原理,變暗肯定是通過調(diào)整色彩來實現(xiàn),而要實現(xiàn)不能點擊,則可以通過,替換點擊對象來實現(xiàn),即在要點擊的對象上,則生成一個對象,而這個對象是透明的,那么當(dāng)用戶點擊的時候,他點擊到的實際上是擋在底層對象上的透明對象,這樣就給用戶造成點擊無效的錯覺,如下圖:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

如果物體 B 是透明的,而且緊挨著物體 A ,第三方如果試圖接觸物體 A ,碰到的僅僅是物體 B ,那么一切針對 A 的接觸將是無效的。
分析到這里,我們要做的就是有這個特殊效果的 div ,說到底還是一個 CSS 的制作和應(yīng)用。
而暗色透明效果,可以通過 CSS 的濾鏡屬性來獲得,重新一定一個新的樣式 bgdiv
.bgdiv
{
background:#ccc; /* 背景色 */
opacity:.3; /* 透明度 */
filter: alpha(opacity=30); /* 濾鏡透明 */
position:absolute; /* 被應(yīng)用樣式對象在頁面中的位置顯示方式 */
z-index:1000; /* 被應(yīng)用樣式對象在網(wǎng)頁中的 z 坐標(biāo)的值 */
width:500px; /* 被應(yīng)用樣式對象的寬度 */
height:500px; /* 被應(yīng)用樣式對象的高度 */
top: 0px; /* 被應(yīng)用樣式對象距頁面頂部的距離 */
left: 0px; /* 被應(yīng)用樣式對象距頁面左端的距離 */
}


body 區(qū)域,再加入 :
, 運行文件,效果如下:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角
到這里, UI 的設(shè)計就完成了,但是我們看到的 div 大小是 500*500 ,并沒有充滿整個頁面,而且 wait 框也并沒有居中,而且一開始效果就已經(jīng)出來了,這樣顯然是不能直接使用的,真正在用的時候,我們需要背景充滿整個頁面, wait 框需要居中顯示,而且我們要能夠控制該效果什么時候出現(xiàn),什么時候消失。
那么這些工作,就需要依靠 javascript 來完成了。
javascript 幾乎可以控制頁面上所有的靜態(tài)元素,而上述效果正式通過控制背景 div wait 框來實現(xiàn)。
javascript 中,要取得頁面上的某個元素,最簡單的方法是給目標(biāo)對象的 ID 屬性賦一個值,然后通過 javascript getElementbyId 來獲得。
在這里,先給 bgdiv ID 屬性賦值,如:

我們先解決第一個問題,即通過 javascript 來設(shè)置層的大小以充滿整個頁面。
function showbg()
{
var bgdiv=document.getElementById("bgdiv"); // 取得 bgdiv 對象
bgdiv.style.width=document.body.clientWidth; // 設(shè)置 bgdiv 對象的寬度為網(wǎng)頁可視區(qū)域的寬度
if (document.body.clientHeight>document.body.scrollHeight) // 設(shè)置 bgdiv 對象的高度為網(wǎng)頁可視區(qū)域的高度
bgdiv.style.height=document.body.clientHeight;
else
bgdiv.style.height=document.body.scrollHeight;
}
在這里需要說明的是 clientWidh scrollWidth 都是表示可視區(qū)域的寬度,區(qū)別在如果網(wǎng)頁中有滾動條,那么 scollWidth 要大于 clientWidth ,因為 scollWidth 包含了滾動條可?????????到的部分,而 clientWidth 沒有,只是可見的部分。
上面的函數(shù)中 width ,這里采取了 clientWidth ,因為按照網(wǎng)頁設(shè)計的基本原則,設(shè)計出的網(wǎng)頁包含橫向滾動條是相當(dāng)不友好的,因為鼠標(biāo)只能上下滾動,而并不能左至右滾動,因此這里直接取 clientWidth ,意為保證整個項目中不會出現(xiàn)橫向滾動條。
下面高度的設(shè)置則是考慮了有豎向滾動條和沒有豎向滾動條時的兼容性。
通過上述函數(shù)可以保證,調(diào)出來的 bgdiv 可以充滿整個屏幕。

inc 文件夾下,新建一個 javascript 文件,把上述函數(shù)拷貝進去,在頁面中加入以下代碼以引入該函數(shù)

   為了方便顯示,在 body 標(biāo)簽里加入 onload="showbg();", 頁面加載完成后,即可看見調(diào)整后的 bgdiv 的已經(jīng)充滿了整個頁面。
調(diào)整 wait 框的顯示位置原理也類似,函數(shù)為:
function showwait()
{
showbg(); // 顯示 bgdiv
var loading=document.getElementById("loaddiv");// 獲得 loading 對象
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;// 設(shè)置 loading 距頂部的距離
loading.style.left=document.body.clientWidth/2-110;// 設(shè)置 loading 距左端的距離
}
在onload事件里調(diào)用showwait,即可顯示wait框位于暗色透明的背景上。

  在這里需要強調(diào)的是CSS屬性的position屬性,該屬性一定要設(shè)置為absolute,上述的代碼才會有效果,因為上述代碼的位置是按照絕對位置來設(shè)置的。


  上述的效果是一打開頁面就顯示,如果要自己控制其是否顯示,則需要用到CSS的屬性display,當(dāng)值為block時顯示,為none時不顯示。

  我們在上述CSS屬性中,均加入display:none;則打開頁面的時候,不顯示效果。

  然后在showbg函數(shù)中加入 bgdiv.style.display=”block”;

  在showwait函數(shù)中加入 loading.style.display=”none”;

  在頁面的body區(qū)域加入
顯示 ,運行頁面,只可以看到顯示鏈接,點擊顯示鏈接后,會顯示我們需要的效果,如圖:
用htmlcssjavascript打造自己的RIA之一 - 無余如塵 - 天涯海角

  這樣出現(xiàn)的效果,并不會消失。筆者在平時的學(xué)習(xí)工作中,也發(fā)現(xiàn)了一個現(xiàn)象,在頁面上點擊一個鏈接(即向服務(wù)器發(fā)送一個請求),當(dāng)服務(wù)器還沒有處理結(jié)束,沒有返回頁面給客戶端的時候,頁面本身是不會有變化的,而所謂的網(wǎng)速慢也是這樣,點擊了沒反映,當(dāng)服務(wù)器處理結(jié)束后,才把html放回給用戶,頁面才開始變化。那么,如果在點擊鏈接的時候,觸發(fā)showwait事件,該效果就會出現(xiàn),直到服務(wù)器處理請求結(jié)束,頁面發(fā)生重定向而消失。

  比如,我們把顯示的代碼改為
顯示 然后運行頁面,再點擊顯示,我們可以看到出現(xiàn)wait框,等頁面消失就出現(xiàn)了Sun的主頁。
  我們回頭看一下,事實上該例子并沒有特殊的東西,只是對HTML,CSS和javascript的要求非常高,只有對這三個靜態(tài)元素比較熟悉了,才能把握好。而且在這里,對美工也有一定的要求,需要說明的是wait的滾動圖片以及背景圖片并不是筆者所做,是用的ext框架的圖片,wait框的CSS樣式也是參考的ext的。
  值得一說的是,netbeans6.1的編輯器對javascript做了比較豐富的提示支持,不光有關(guān)鍵字的支持,還有對兼容瀏覽器的提示,甚至提供了一些簡單的例子。

  本文花了很大的篇幅,講解了一個并不復(fù)雜的例子,目的在于通過詳細(xì)的思考和開發(fā)流程,來給讀者深入剖析如何開發(fā)自己的RIA。

  可以看出,要制作這種類型的RIA,盡管還是需要一定的美工基礎(chǔ)以及頁面設(shè)計能力,但其基本制作步驟,不外乎以下兩步:

  1.利用HTML和CSS制作自己的UI。

  2.仔細(xì)研究頁面的行為模式,編寫何時的javascipt來控制UI。


  在下一篇文章里,筆者將給大家介紹一個比較復(fù)雜的綜合性的例子,包含了彈出對話框,彈出菜單,特殊效果的層以及拖動的窗口等效果。

相關(guān)文章

最新評論