第16章Spry在如今Web2.0盛行、Ajax流行的時(shí)代背景下，Adobe公司推出了其Ajax框架Spry，并集成到DreamweaverCS4中。AdobeSpry是一個(gè)為Web設(shè)計(jì)人員開發(fā)的Ajax框架，它使得在一個(gè)HTML頁面中創(chuàng)建豐富體驗(yàn)成為了可能。本章將從什么是Ajax和Spry、在DreamweaverCS4中如何使用Spry組件、如何使用Spry顯示數(shù)據(jù)、添加Spry效果等幾個(gè)方面進(jìn)行詳細(xì)介紹，使讀者對(duì)Spry有一個(gè)全面認(rèn)識(shí)，并且能夠應(yīng)用Spry設(shè)計(jì)簡(jiǎn)單的交互網(wǎng)頁。16.1什么是Ajax和SpryAjax是Web2.0的核心之一。使用Ajax的最大優(yōu)點(diǎn)就是能在不刷新整個(gè)頁面的前提下維護(hù)數(shù)據(jù)。這使得Web應(yīng)用程序可以更為迅速地響應(yīng)用戶交互。16.1.1什么是AjaxAjax是AsynchronousJavaScriptandXML的縮寫。它并不是一門新的語言或技術(shù)，實(shí)際上是幾項(xiàng)技術(shù)按一定的方式組合在一起中發(fā)揮各自的作用，它包括：使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)；使用文檔對(duì)象模型DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互；使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理；使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)讀?。蛔詈笥肑avaScript綁定和處理所有數(shù)據(jù)。目前Ajax已經(jīng)成為當(dāng)前的熱門技術(shù)。Google作為Ajax技術(shù)的領(lǐng)跑者，早已經(jīng)走在其它同類網(wǎng)站的前列?；贏jax的廣為大家熟悉的產(chǎn)品有GoogleMaps，GoogleGmail，GoogleIG等。16.1.2什么是SprySpry是實(shí)現(xiàn)Ajax的一種簡(jiǎn)單方式，對(duì)HTML、CSS和JavaScript體驗(yàn)據(jù)有入門級(jí)水平的設(shè)計(jì)人員應(yīng)該能夠發(fā)現(xiàn)Spry是一種整合內(nèi)容的簡(jiǎn)單方法。使用適合于Ajax的Spry框架，以可視方式設(shè)計(jì)、開發(fā)和部署動(dòng)態(tài)用戶界面，可以實(shí)現(xiàn)在HTML網(wǎng)頁中展現(xiàn)XML數(shù)據(jù)、建立諸如炫酷菜單的一些界面，還有其他的一些頁面特效。在減少頁面刷新的同時(shí)，增加交互性、速度和可用性。16.2Spry組件DreamweaverCS4提供的Spry組件包括驗(yàn)證文本域組件、驗(yàn)證文本區(qū)域組件、驗(yàn)證選擇組件、驗(yàn)證復(fù)選框組件、Spry菜單欄、Spry選項(xiàng)卡式面板、Spry折疊式面板、Spry可折疊面板等八種類型。本節(jié)將對(duì)上述組件進(jìn)行一一介紹。16.2.1驗(yàn)證文本域組件驗(yàn)證文本域組件可以對(duì)文本框中輸入的多種類型的信息進(jìn)行實(shí)時(shí)驗(yàn)證，如：電話號(hào)碼、郵政編碼、IP地址、日期、時(shí)間、貨幣等，若輸入的信息格式與指定信息不符或輸入的字符數(shù)與規(guī)定字符數(shù)不符，則會(huì)出現(xiàn)提示信息。具體操作步驟如下：16.2.2驗(yàn)證文本區(qū)域組件除了17.2.1小節(jié)中提到的對(duì)文本框進(jìn)行驗(yàn)證，還可以對(duì)文本區(qū)域中輸入的信息進(jìn)行驗(yàn)證。具體操作步驟如下：16.2.3驗(yàn)證選擇組件驗(yàn)證選擇組件可以對(duì)下拉列表中的選項(xiàng)進(jìn)行驗(yàn)證，具體操作步驟如下：16.2.4驗(yàn)證復(fù)選框組件驗(yàn)證復(fù)選框組件可以對(duì)一組復(fù)選框中的選項(xiàng)進(jìn)行驗(yàn)證，具體操作步驟如下：16.2.5Spry菜單欄Spry框架中預(yù)設(shè)了一些網(wǎng)頁中常用的組件，菜單欄就是其中之一。Spry提供了兩種菜單欄布局樣式：水平與垂直。具體操作步驟如下：選選項(xiàng)卡式面面板Spry還還提供了選選項(xiàng)卡式面面板，使用用此組件可可以輕松創(chuàng)創(chuàng)建適合自自己網(wǎng)頁的的選項(xiàng)卡面面板。具體體操作步驟驟如下：折折疊式面板板Spry還還提供了折折疊式面板板，使用此此組件可以以輕松創(chuàng)建建適合自己己網(wǎng)頁的折折疊式面板板。具體操操作步驟如如下：可可折疊面板板Spry還還提供了可可折疊面板板，使用此此組件可以以輕松創(chuàng)建建適合自己己網(wǎng)頁的可可折疊面板板。具體操操作步驟如如下：16.3使使用Spry顯顯示數(shù)據(jù)本節(jié)將結(jié)合合實(shí)例來學(xué)學(xué)習(xí)如何使使用Spry在網(wǎng)頁頁中顯示XML數(shù)據(jù)據(jù)。主要內(nèi)內(nèi)容包括定定義XML數(shù)據(jù)集，，創(chuàng)建Spry區(qū)域域，創(chuàng)建Spry重重復(fù)區(qū)域，，創(chuàng)建Spry重復(fù)復(fù)列表，創(chuàng)創(chuàng)建Spry表格。。定定義XML數(shù)據(jù)集要使用Spry顯示示XML數(shù)數(shù)據(jù)，第一一步需要定定義XML數(shù)據(jù)集。。具體操作作步驟如下下：創(chuàng)創(chuàng)建Spry區(qū)域定義了XML數(shù)據(jù)集集后，需要要?jiǎng)?chuàng)建Spry區(qū)域域來顯示數(shù)數(shù)據(jù)。具體體操作步驟驟如下：創(chuàng)創(chuàng)建Spry重復(fù)區(qū)區(qū)域16.3.2介紹了了Spry區(qū)域，本本小節(jié)來學(xué)學(xué)習(xí)創(chuàng)建Spry重重復(fù)區(qū)域，，注意比較較兩者的區(qū)區(qū)別。具體體操作步驟驟如下：創(chuàng)創(chuàng)建Spry重復(fù)列列表除了上兩小小節(jié)介紹的的Spry區(qū)域以及及Spry重復(fù)區(qū)域域，還可以以創(chuàng)建Spry重復(fù)復(fù)列表來顯顯示數(shù)據(jù)集集中的數(shù)據(jù)據(jù)，具體操操作步驟如如下：創(chuàng)創(chuàng)建Spry表格還可以通過過創(chuàng)建Spry表格格，在表格格中顯示數(shù)數(shù)據(jù)集中的的數(shù)據(jù)，具具體操作步步驟如下：：16.4Spry效果除了上述的的組件和數(shù)數(shù)據(jù)集以外外，DreamweaverCS4還提供了了Spry效果庫，，可以輕松松地向頁面面中添加多多種視覺效效果，無需需刷新即可可顯示。Spry效效果庫包括括增大/收收縮、擠壓壓、顯示/漸隱、晃晃動(dòng)、滑動(dòng)動(dòng)、遮簾、、高亮顏色色等七種效效果。下面面來一一介介紹。增增大/收縮縮增大/收縮縮效果適用用于以下標(biāo)標(biāo)簽：address、dd、div、dl、、dt、form、、p、ol、ul、、applet、center、dir、img、menu或或pre。下面以以圖像標(biāo)簽簽<img>為例。。擠擠壓擠壓效果適適用于以下下標(biāo)簽：address、dd、div、dl、dt、、form、img、p、ol、ul、applet、、center、dir、menu或或pre。下面面以標(biāo)簽<p>為例例。具體操操作步驟如如下：顯顯示/漸隱隱顯示/漸隱隱效果適用用于除applet、body、iframe、object、tr、、tbody或th以外的所所有標(biāo)簽。。下面以圖圖像標(biāo)簽<img>為例。具具體操作步步驟如下：：晃晃動(dòng)晃動(dòng)效果適適用于以下下標(biāo)簽：address、blockquote、dd、div、dl、、dt、fieldset、、f