··移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)（基于jQueryMobile）

（第2版）習(xí)題答案

習(xí)題1一、選擇題1.B2.A3.B4.C5.D6.C7.D8.A9.D10.A11.B12.C二、判斷題1.對(duì)2.錯(cuò)3.對(duì)4.對(duì)5.錯(cuò)6.對(duì)7.錯(cuò)8.對(duì)9.對(duì)10.錯(cuò)11.對(duì)三、簡(jiǎn)答題1.答：HTML5包含的三項(xiàng)重要技術(shù)是HTML5核心規(guī)范、CSS3樣式表和JavaScript，它們的作用分別是創(chuàng)建網(wǎng)頁(yè)的結(jié)構(gòu)、設(shè)置網(wǎng)頁(yè)元素的樣式、動(dòng)態(tài)改變網(wǎng)頁(yè)元素的外觀。2.答：HTML5具有以下新特性：提供了可以準(zhǔn)確描述所包含的內(nèi)容的標(biāo)記；增強(qiáng)的網(wǎng)絡(luò)通信；顯著改善了一般存儲(chǔ)；用于運(yùn)行后臺(tái)流程的WebWorker；在應(yīng)用程序和服務(wù)器之間建立持久連接的WebSocket接口；更好地檢索存儲(chǔ)的數(shù)據(jù)；改善了網(wǎng)頁(yè)保存和載入速度；支持CSS3管理GUI，意味著HTML5具備面向內(nèi)容的特性；改善了瀏覽器的表單處理；一個(gè)基于SQL的數(shù)據(jù)庫(kù)API，允許客戶端本地存儲(chǔ)；畫(huà)布和視頻，無(wú)需安裝第三方插件即可在網(wǎng)頁(yè)中添加圖形和視頻；GeolocationAPI規(guī)范，使用智能手機(jī)位置功能來(lái)合并移動(dòng)云服務(wù)和應(yīng)用程序；智能表單減少了下載JavaScript代碼的需求，在移動(dòng)設(shè)備和云服務(wù)器之間實(shí)現(xiàn)了更有效的通信。3.答：在HTML5中元素分為以下類型：元數(shù)據(jù)元素、流式元素、章節(jié)元素、標(biāo)題元素、短語(yǔ)元素、嵌入元素、交互元素。4.答：要為HTML文檔設(shè)置標(biāo)題，在文檔首部添加title元素即可。5.答：要在HTML文檔中定義內(nèi)嵌CSS樣式表，可在文檔首部添加style元素并在該元素中定義CSS樣式規(guī)則。6.答：要在HTML文檔中鏈接外部CSS樣式表，可使用link元素。7.答：要在HTML文檔中添加JavaScript腳本，可使用script元素。8.答：要在HTML文檔中導(dǎo)入外部腳本文件，可使用script元素并設(shè)置src屬性。9.答：jQuery()構(gòu)造函數(shù)有以下幾種形式：jQuery(selector[,context])；jQuery(html)；jQuery(elements)；jQuery(callback)10.答：jQuery選擇器有以下類別：基本選擇器、層級(jí)選擇器、篩選選擇器以及表單選擇器等。11.答：在jQueryMobile移動(dòng)開(kāi)發(fā)中，常用的開(kāi)發(fā)工具有以下幾種：AdobeDreamweaverCS6以上版本；MicrosoftWebMatrix3.0；HBuilder。12.答：要基于jQueryMobile框架進(jìn)行移動(dòng)網(wǎng)站開(kāi)發(fā)，至少需要以下步驟：（1）在頁(yè)面開(kāi)始添加HTML5文檔聲明：<!doctypehtml>（2）在頁(yè)面頭部添加視口meta標(biāo)簽：<metaname="viewport"content="width=device-width,initial-scale=1">（3）在頁(yè)面頭部鏈接jQuery和jQueryMobile的JavaScript腳本文件以及移動(dòng)主題的CSS樣式文件。

習(xí)題2一、選擇題1.B2.D3.B二、判斷題1.對(duì)2.錯(cuò)3.錯(cuò)4.對(duì)5.錯(cuò)6.對(duì)7.對(duì)8.對(duì)9.對(duì)三、簡(jiǎn)答題1.答：jQueryMobile頁(yè)面切換動(dòng)畫(huà)有以下類型：fade：淡入淡出到下一頁(yè)；flip：從后向前翻動(dòng)到下一頁(yè)；flow：拋出當(dāng)前頁(yè)面并引入下一頁(yè)；pop：像彈出窗口那樣轉(zhuǎn)到下一頁(yè)；slide：從右向左滑動(dòng)到下一頁(yè)；slidefade：從右向左滑動(dòng)并淡入到下一頁(yè)；slideup：從下到上滑動(dòng)到下一頁(yè)；slidedown：從上到下滑動(dòng)到下一頁(yè)；turn：轉(zhuǎn)向下一頁(yè)；none：無(wú)過(guò)渡效果。2.答：頁(yè)面預(yù)加載是指當(dāng)前頁(yè)面加載完成后自動(dòng)在后臺(tái)對(duì)鏈接的目標(biāo)頁(yè)面進(jìn)行加載。3.在jQueryMobile移動(dòng)網(wǎng)頁(yè)中，頁(yè)面之間的參數(shù)傳遞有幾種方式？4.HTML5的Web存儲(chǔ)功能包含哪些部分？

習(xí)題3一、選擇題1.B2.B3.b3.要使彈出窗口的底部顯示箭頭，可將data-arrow屬性設(shè)置為（）。二、判斷題1.錯(cuò)2.對(duì)3.對(duì)4.錯(cuò)三、簡(jiǎn)答題1.答：在jQueryMobile頁(yè)面中按鈕有以下形式：表單按鈕；鏈接按鈕。2.答：要設(shè)置內(nèi)聯(lián)按鈕，應(yīng)在HTML代碼中將數(shù)據(jù)屬性data-inline="true"添加到按鈕或鏈接中，或者將CSS類樣式ui-btn-inline應(yīng)用于鏈接中。3.答：要設(shè)置微型按鈕，應(yīng)在在HTML代碼中，將數(shù)據(jù)屬性data-mini="true"添加到按鈕或鏈接中，或者將CSS類樣式ui-mini應(yīng)用于鏈接中。4.答：要?jiǎng)?chuàng)建組合按鈕，應(yīng)創(chuàng)建一個(gè)容器并對(duì)其添加data-role="controlgroup"屬性，然后在該容器中添加一組按鈕。5.答：要設(shè)置按鈕上的圖標(biāo)，應(yīng)在按鈕或鏈接中添加數(shù)據(jù)屬性data-icon="圖標(biāo)名稱"，或者直接對(duì)相關(guān)元素應(yīng)用CSS類“ui-icon-<圖標(biāo)名>”.6.答：要設(shè)置圖標(biāo)在按鈕中的位置，應(yīng)在HTML代碼中對(duì)按鈕設(shè)置數(shù)據(jù)屬性data-iconpos="位置"，或者對(duì)按鈕應(yīng)用CSS類“ui-btn-icon-位置”，可能的位置值有l(wèi)eft（左）、right（右）、top（上）、bottom（下）、none（無(wú)圖標(biāo)）以及notext（僅顯示圖標(biāo)不顯示文本）。7.答：要?jiǎng)?chuàng)建彈出窗口，需要執(zhí)行以下兩個(gè)步驟。（1）添加一個(gè)div元素作為包含彈出內(nèi)容（文本、圖片等）的容器，并對(duì)該元素設(shè)置id屬性，此外還要data-role="popup"屬性添加到該元素中。（2）創(chuàng)建一個(gè)鏈接并將其href屬性設(shè)置為字符“#”后跟上述容器div元素的id值，然后在鏈接中添加data-rel="popup"屬性，以便在單擊這個(gè)鏈接時(shí)通知jQueryMobile框架打開(kāi)指定的彈出窗口。8.答：要?jiǎng)?chuàng)建帶箭頭的彈出窗口，可以對(duì)彈出窗口添加數(shù)據(jù)屬性data-arrow，以設(shè)置是否在彈出窗口的某條邊上繪制箭頭。

習(xí)題4一、選擇題1.A2.C3.C二、判斷題1.對(duì)2.對(duì)3.錯(cuò)4.對(duì)5.對(duì)6.對(duì)7.錯(cuò)三、簡(jiǎn)答題1.答：要?jiǎng)?chuàng)建頁(yè)眉工具欄，可使用以下基本結(jié)構(gòu)：<divdata-role="header"><h1>頁(yè)面標(biāo)題</h1></div>2.答：要?jiǎng)?chuàng)建頁(yè)腳工具欄，可使用以下基本結(jié)構(gòu)：<divdata-role="footer"><h4>頁(yè)腳內(nèi)容</h4></div>3.答：要設(shè)置工具欄的主題，可使用data-theme屬性。4.答：要?jiǎng)?chuàng)建動(dòng)態(tài)工具欄，可以使用JavaScript腳本創(chuàng)建工具欄并將其注入到頁(yè)面。5.答：要?jiǎng)?chuàng)建固定工具欄，可以將data-position="fixed"屬性添加到工具欄中。6.答：要?jiǎng)?chuàng)建全屏工具欄，可將data-fullscreen="true"屬性添加到固定工具欄上。7.答：要?jiǎng)?chuàng)建外部工具欄，應(yīng)將頁(yè)眉工具欄和頁(yè)腳工具欄放置在所有頁(yè)面之外，并在文檔加載就緒時(shí)調(diào)用工具欄小部件插件函數(shù)toolbar()。8.答：要?jiǎng)?chuàng)建導(dǎo)航欄，可以使用以下基本結(jié)構(gòu)：<divdata-role="navbar"><ul><li><ahref="a.html">鏈接一</a></li><li><ahref="b.html">鏈接二</a></li><li><ahref="b.html">鏈接二</a></li>...</ul>9.要建導(dǎo)航欄上的圖標(biāo)，可以通過(guò)在每個(gè)鏈接中設(shè)置data-icon屬性可以將標(biāo)準(zhǔn)jQueryMobile圖標(biāo)添加到導(dǎo)航欄項(xiàng)目中。要改變圖標(biāo)的位置，則應(yīng)針對(duì)導(dǎo)航欄容器設(shè)置data-iconpos屬性。

習(xí)題5一、選擇題1.D2.D3.A二、判斷題1.對(duì)2.錯(cuò)3.錯(cuò)4.對(duì)5.對(duì)6.錯(cuò)7.對(duì)8.對(duì)9.對(duì)10.錯(cuò)11.對(duì)12.對(duì)三、簡(jiǎn)答題1.答：jQueryMobile網(wǎng)格有以下類型：?jiǎn)瘟芯W(wǎng)格；兩列網(wǎng)格；三列網(wǎng)格；四列網(wǎng)格；五列網(wǎng)格。2.答：要?jiǎng)?chuàng)建響應(yīng)式網(wǎng)格，將ui-responsive類添加到網(wǎng)格容器。3.答：要?jiǎng)?chuàng)建回流表格，在表格元素中添加data-role="table"和data-mode="reflow"屬性4.答：要如何創(chuàng)建響應(yīng)式回流表格，在表格元素中應(yīng)用ui-responsive類。5.答：要?jiǎng)?chuàng)建列切換表格，在表格元素中添加設(shè)置data-role="table"和data-mode="columntoggle"屬性；要設(shè)置列的優(yōu)先級(jí)，對(duì)列標(biāo)題設(shè)置data-priority屬性。6.答：要?jiǎng)?chuàng)建列表視圖，可將標(biāo)準(zhǔn)的HTML列表轉(zhuǎn)換為列表視圖，應(yīng)在無(wú)序列表ul或有序列表ol中添加data-role="listview"屬性。7.答：要?jiǎng)?chuàng)建分組列表，可將一些列表項(xiàng)變成分隔條，為此只需要在這些列表項(xiàng)元素（li）中添加data-role="list-divider"屬性。8.答：要在列表視圖的列表項(xiàng)左側(cè)添加縮略圖，只需將圖像作為作為第一個(gè)子元素添加到列表項(xiàng)中。9.答：要在列表視圖的列表項(xiàng)右側(cè)添加一個(gè)計(jì)數(shù)氣泡，可以將該數(shù)字包含在具有ui-li-count類的元素中。10.答：在列表項(xiàng)（li）中添加第二個(gè)鏈接，由此生成的按鈕稱為列表拆分按鈕。11.答：要?jiǎng)討B(tài)創(chuàng)建列表視圖，可對(duì)任何選擇器調(diào)用列表視圖插件函數(shù)listview()。

習(xí)題6一、選擇題1.D2.D3.C4.A二、判斷題1.對(duì)2.對(duì)3.錯(cuò)4.對(duì)5.錯(cuò)6.對(duì)7.錯(cuò)8.錯(cuò)9.對(duì)三、簡(jiǎn)答題1.答：內(nèi)部面板是位于jQueryMobile頁(yè)面的內(nèi)部的內(nèi)部面板。2.答：要?jiǎng)?chuàng)建面板，可以添加一個(gè)div元素作為容器，并在該容器中添加data-role="panel"屬性，同時(shí)還要為其設(shè)置一個(gè)唯一的id值，用于打開(kāi)和關(guān)閉面板的鏈接或按鈕將要引用此id值。3.答：外部面板是面板標(biāo)記放置在所有頁(yè)面之外的面板。4.答：要?jiǎng)?chuàng)建外部面板，必須在文檔加載就緒時(shí)通過(guò)調(diào)用面板插件函數(shù)panel()來(lái)實(shí)現(xiàn)初始化。5.答：要?jiǎng)?chuàng)建可折疊塊，以創(chuàng)建一個(gè)容器并添加data-role="collapsible"屬性，然后在這個(gè)容器內(nèi)添加標(biāo)題（h1～h6）或legend元素。6.答：要在HTML文檔中鏈接外部CSS樣式表，可使用<link>標(biāo)簽。7.答：要在HTML文檔中添加JavaScript腳本，可使用<script>標(biāo)簽。8.答：要在HTML文檔中導(dǎo)入外部腳本文件，可使用<script>標(biāo)簽并設(shè)置scr屬性。9.答：可折疊塊系列與可折疊集合有以下不同：可折疊塊一次只能打開(kāi)一個(gè)部分，可折疊塊系列允許同時(shí)打開(kāi)多個(gè)可折疊塊。10.答：創(chuàng)建搜索字段的步驟如下：（1）在頁(yè)面中創(chuàng)建一個(gè)表單（form）并在其中添加ui-filterable類，以調(diào)整搜索框與篩選內(nèi)容之間的外邊距。（2）在表單中添加input元素，在其中添加data-type="search"屬性，為其指定id值。（3）在表單下方添加要篩選的元素及其子元素，在被篩選元素中添加data-filter="true"和data-input="#idofinput"屬性，其中idofinput為input元素（搜索字段）的id值。11.答：對(duì)元素進(jìn)行篩選時(shí)設(shè)置自定義篩選文本的方法是：每個(gè)子元素中添加data-filtertext屬性，并且將用于過(guò)濾子元素的任何字符串作為該屬性的值。12.答：要為表格添加篩選功能，可以在表格（table）元素上設(shè)置data-filter="true"屬性，以生成行篩選器。

習(xí)題7一、選擇題1.D2.A3.D4.C二、判斷題1.錯(cuò)2.對(duì)3.對(duì)4.對(duì)5.對(duì)6.錯(cuò)7.對(duì)8.錯(cuò)9.對(duì)10.對(duì)11.對(duì)12.錯(cuò)13.對(duì)14.對(duì)15.對(duì)16.對(duì)17.對(duì)三、簡(jiǎn)答題1.答：要?jiǎng)?chuàng)建標(biāo)準(zhǔn)文本框，可以添加input元素并設(shè)置type="text"屬性。2.答：要?jiǎng)?chuàng)建密碼輸入框，可以添加input元素并設(shè)置type="password"屬性。3.答：要?jiǎng)?chuàng)建電子郵件地址輸入框，可以添加input元素并設(shè)置type="email"屬性。4.答：要?jiǎng)?chuàng)建文本區(qū)域，可使用<textarea>標(biāo)簽。5.答：要?jiǎng)?chuàng)建單選按鈕組，可以添加一個(gè)帶有type="radio"屬性的input元素和相應(yīng)的標(biāo)簽。6.答：要?jiǎng)?chuàng)建復(fù)選框，可以添加一個(gè)帶有type="checkbox"屬性的input元素和相應(yīng)的標(biāo)簽。7.答：要?jiǎng)?chuàng)建提交按鈕，可以添加input元素并設(shè)置type="submit"屬性。8.答：要?jiǎng)?chuàng)建本機(jī)選擇菜單，可以從標(biāo)準(zhǔn)select元素開(kāi)始，并且在該元素中填充一組option元素，同時(shí)添加一個(gè)標(biāo)簽（label元素），并且設(shè)置其for屬性以匹配select元素的id，使它們?cè)谡Z(yǔ)義上關(guān)聯(lián)。9.答：要?jiǎng)?chuàng)建自定義菜單，可將data-native-menu="false"屬性添加在select元素中。10.答：要?jiǎng)?chuàng)建多項(xiàng)選擇菜單，可在select元素中同時(shí)添加data-native-menu="false"屬性和multiple屬性。11.答：要?jiǎng)?chuàng)建滑塊，可在標(biāo)準(zhǔn)的input元素中添加type="range"屬性。12.答：要?jiǎng)?chuàng)建范圍滑塊，可添加兩個(gè)具有type="range"屬性的input元素，并且將它們放在具有data-role="rangeslider"屬性的容器中。13.答：要?jiǎng)?chuàng)建翻轉(zhuǎn)開(kāi)關(guān)，可在復(fù)選框類型的input元素或具有兩個(gè)選項(xiàng)值的select元素中添加data-role="flipswitch"屬性。

習(xí)題8一、選擇題1.B2.C3.D4.B5.A二、判斷題1.對(duì)2.錯(cuò)3.對(duì)4.錯(cuò)5.對(duì)三、簡(jiǎn)答題1.答：要綁定mobileinit事件，應(yīng)在加載jQuery的script標(biāo)簽之后、加載jQueryMobile的script標(biāo)簽之前放置一個(gè)script標(biāo)簽并在其中綁定到mobileinit事件。2.答：加載外部頁(yè)面時(shí)會(huì)發(fā)生以下事件：加載之前觸發(fā)pagebeforeload和pagecontainerbeforeload事件，加載成功時(shí)觸發(fā)pageload和pagecontainerload事件，加載失敗時(shí)觸發(fā)pageloadfailed和pagecontainerloadfailed事件。3.答：從一個(gè)頁(yè)面切換到另一個(gè)頁(yè)面時(shí)會(huì)發(fā)生以下事件：pagecontainerbeforetransition、pagebeforehide和pagecontainerbeforehide、pagebeforeshow和pagecontainerbeforeshow、pagehide和pagecontainerhide、pagehow和pagecontainershow以及pagecontainertransition事件。4.答：通過(guò)調(diào)用change()更改頁(yè)面時(shí)會(huì)發(fā)生以