第13章 Spry框架

1、第第13章章 使用使用Spry框架框架 Spry 構(gòu)件是一個(gè)頁面元素，通過啟用用戶交互來提供更豐構(gòu)件是一個(gè)頁面元素，通過啟用用戶交互來提供更豐富的用戶體驗(yàn)。富的用戶體驗(yàn)。Spry 構(gòu)件由以下幾個(gè)部分組成：構(gòu)件由以下幾個(gè)部分組成：構(gòu)件結(jié)構(gòu)構(gòu)件結(jié)構(gòu) 用來定義構(gòu)件結(jié)構(gòu)組成的用來定義構(gòu)件結(jié)構(gòu)組成的 HTML 代碼塊。代碼塊。構(gòu)件行為構(gòu)件行為 用來控制構(gòu)件如何響應(yīng)用戶啟動(dòng)事件的用來控制構(gòu)件如何響應(yīng)用戶啟動(dòng)事件的 JavaScript。構(gòu)件樣式構(gòu)件樣式 用來指定構(gòu)件外觀的用來指定構(gòu)件外觀的 CSS。 Spry 框架支持一組用標(biāo)準(zhǔn)框架支持一組用標(biāo)準(zhǔn) HTML、CSS 和和 JavaScript 編編寫的可重

2、用構(gòu)件。寫的可重用構(gòu)件。Spry 框架中的每個(gè)構(gòu)件都與唯一的框架中的每個(gè)構(gòu)件都與唯一的 CSS 和和 JavaScript 文件相關(guān)聯(lián)。文件相關(guān)聯(lián)。CSS 文件中包含設(shè)置構(gòu)件樣式文件中包含設(shè)置構(gòu)件樣式所需的全部信息，而所需的全部信息，而 JavaScript 文件則賦予構(gòu)件功能。當(dāng)文件則賦予構(gòu)件功能。當(dāng)您使用您使用 Dreamweaver 界面插入構(gòu)件時(shí)，界面插入構(gòu)件時(shí)，Dreamweaver 會(huì)會(huì)自動(dòng)將這些文件鏈接到您的頁面，以便構(gòu)件中包含該頁面的自動(dòng)將這些文件鏈接到您的頁面，以便構(gòu)件中包含該頁面的功能和樣式。功能和樣式。13.1 Spry 構(gòu)件概述構(gòu)件概述13.2 插入插入Spry構(gòu)件構(gòu)件

3、 插入插入Spry菜單欄菜單欄 “插入插入”- “Spry”- “Spry菜單欄菜單欄”13.3 常用常用Spry構(gòu)件介紹構(gòu)件介紹 Spry菜單欄是一組可導(dǎo)航的菜單菜單欄是一組可導(dǎo)航的菜單按鈕按鈕,當(dāng)站點(diǎn)訪問者將鼠標(biāo)懸停在其當(dāng)站點(diǎn)訪問者將鼠標(biāo)懸停在其中的某個(gè)按鈕上時(shí)中的某個(gè)按鈕上時(shí),將顯示相應(yīng)的子將顯示相應(yīng)的子菜單菜單.“菜單項(xiàng)菜單項(xiàng)”：單擊列表框中的具體菜單項(xiàng)，在單擊列表框中的具體菜單項(xiàng)，在“文本文本”文本框中編輯輸入文本即重新文本框中編輯輸入文本即重新定義該列表項(xiàng)的內(nèi)容。定義該列表項(xiàng)的內(nèi)容?！疤砑硬藛雾?xiàng)添加菜單項(xiàng)”按鈕按鈕：表示為該菜單項(xiàng)添加了：表示為該菜單項(xiàng)添加了“子菜單子菜單”?！皠h除

4、菜單項(xiàng)刪除菜單項(xiàng)”按鈕按鈕：將該菜單項(xiàng)與：將該菜單項(xiàng)與“子菜單子菜單”同時(shí)刪除。同時(shí)刪除?！吧弦祈?xiàng)上移項(xiàng)”或或“下移項(xiàng)下移項(xiàng)”按鈕按鈕：進(jìn)行菜單項(xiàng)的顯示排序。：進(jìn)行菜單項(xiàng)的顯示排序。 “鏈接鏈接”：輸入鏈接的目標(biāo)頁面地址，或者單擊輸入鏈接的目標(biāo)頁面地址，或者單擊“瀏覽瀏覽”按鈕以瀏覽到相應(yīng)的文件。按鈕以瀏覽到相應(yīng)的文件?！澳繕?biāo)目標(biāo)”：指定要在何處打開所鏈接的頁面。指定要在何處打開所鏈接的頁面。編輯編輯Spry菜單欄屬性菜單欄屬性設(shè)置設(shè)置Spry菜單欄樣式菜單欄樣式設(shè)置方法：先選中要設(shè)置的菜單設(shè)置方法：先選中要設(shè)置的菜單（單擊選中）。然后在（單擊選中）。然后在“CSS樣樣式式”面板中選擇相應(yīng)規(guī)則

5、，在下面板中選擇相應(yīng)規(guī)則，在下面的面的“屬性窗格屬性窗格”就可以進(jìn)行設(shè)就可以進(jìn)行設(shè)置置保存含有保存含有“Spry菜單欄菜單欄”的頁面的頁面在保存含有在保存含有“SprySpry菜單欄菜單欄”的頁面文件時(shí)，會(huì)彈的頁面文件時(shí)，會(huì)彈出出“復(fù)制相關(guān)文件復(fù)制相關(guān)文件”對(duì)話框。表示軟件將對(duì)話框。表示軟件將自動(dòng)復(fù)制自動(dòng)復(fù)制SprySpry菜單欄菜單欄所需要到的所需要到的CSSCSS文件、文件、JavaScriptJavaScript文件和相文件和相關(guān)圖像文件到站點(diǎn)目關(guān)圖像文件到站點(diǎn)目錄的錄的SpryAssetsSpryAssets文件文件夾內(nèi)。單擊夾內(nèi)。單擊“確定確定”按鈕進(jìn)行復(fù)制，否則按鈕進(jìn)行復(fù)制，否則將

6、不能保證將不能保證“SprySpry菜菜單欄單欄”的正確運(yùn)行。的正確運(yùn)行。 SprySpry選項(xiàng)卡式面板選項(xiàng)卡式面板13.3.3 插入插入SprySpry折疊式折疊式13.3.4 插入插入SprySpry可折疊面板可折疊面板13.4 Spry驗(yàn)證表單控件 什么是什么是“表單驗(yàn)證表單驗(yàn)證”？ 為了保證表單采集信息為了保證表單采集信息的有效性而采取的驗(yàn)證的有效性而采取的驗(yàn)證措施措施 進(jìn)行表單驗(yàn)證的地點(diǎn)進(jìn)行表單驗(yàn)證的地點(diǎn)在客戶端上驗(yàn)證（使在客戶端上驗(yàn)證（使用用JavaScript語言）語言）在服務(wù)器上驗(yàn)證（使在服務(wù)器上驗(yàn)證（使用服務(wù)器腳本語言）用服務(wù)器腳本語言） 例：實(shí)現(xiàn)表單及其驗(yàn)證例：實(shí)現(xiàn)表單及其

7、驗(yàn)證 1)為自己的網(wǎng)站添加用戶為自己的網(wǎng)站添加用戶注冊(cè)的網(wǎng)頁，用戶需填入注冊(cè)的網(wǎng)頁，用戶需填入用戶名、密碼、電子郵件用戶名、密碼、電子郵件地址、個(gè)人簡介、性別、地址、個(gè)人簡介、性別、愛好、地域等信息；愛好、地域等信息； 2)在剛才用戶注冊(cè)的網(wǎng)頁在剛才用戶注冊(cè)的網(wǎng)頁上增加信息驗(yàn)證的功能。上增加信息驗(yàn)證的功能。13.5 Spry效果 “SprySpry效果效果”是視覺增強(qiáng)功能，可以放大是視覺增強(qiáng)功能，可以放大、收縮、漸隱和高亮顯示網(wǎng)頁元素；它可、收縮、漸隱和高亮顯示網(wǎng)頁元素；它可應(yīng)用于使用應(yīng)用于使用JavaScript JavaScript 的的 HTML HTML 頁面上幾頁面上幾乎所有的元素。

8、乎所有的元素。 要向某個(gè)元素應(yīng)用效果，該元素當(dāng)前必須要向某個(gè)元素應(yīng)用效果，該元素當(dāng)前必須處于選定狀態(tài)，或者它必須具有一個(gè)處于選定狀態(tài)，或者它必須具有一個(gè) IDID。Spry效果包括：效果包括： 顯示顯示/漸隱漸隱 ：使元素顯示或漸隱。：使元素顯示或漸隱。 高亮顏色高亮顏色：更改元素的背景顏色。：更改元素的背景顏色。 遮簾遮簾 ：模擬百葉窗，向上或向下滾動(dòng)百葉窗來隱藏或：模擬百葉窗，向上或向下滾動(dòng)百葉窗來隱藏或顯示元素。顯示元素。 滑動(dòng)滑動(dòng) ：上下移動(dòng)元素。：上下移動(dòng)元素。 增大增大/收縮收縮 ：使元素變大或變小。：使元素變大或變小。 晃動(dòng)晃動(dòng) ：模擬從左向右晃動(dòng)元素。：模擬從左向右晃動(dòng)元素。 擠壓擠壓 ：使元素從頁面的左上角消失。：使元素從頁面的左上角消失。創(chuàng)建創(chuàng)建Spry效果的具體方效果的具體方法：法： 選中某個(gè)選中某個(gè)Spry對(duì)對(duì)象，在象，在“行為行為”面面板中單擊板中單擊“+”按鈕按鈕， 從菜單中選擇從菜單中選擇“效果效果”|各各Spry效果效果命令。命令。 在彈出的對(duì)話框在彈出的對(duì)話框中進(jìn)行相應(yīng)的屬性中進(jìn)行相應(yīng)的屬性設(shè)置。設(shè)