jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第9章 jQuery Mobile移動(dòng)頁(yè)面開(kāi)發(fā)

第9章jQueryMobile移動(dòng)頁(yè)面開(kāi)發(fā)《jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

掌握jQueryMobile的下載和引入，能夠獨(dú)立完成jQueryMobile的下載和引入

掌握導(dǎo)航欄組件的使用方法，能夠完成導(dǎo)航欄的制作掌握列表視圖組件的使用方法，能夠完成列表視圖的制作掌握選擇菜單組件的使用方法，能夠完成選擇菜單的制作學(xué)習(xí)目標(biāo)/Target

掌握初始化選擇菜單的方法，能夠完成選擇菜單的初始化

掌握導(dǎo)航欄的實(shí)現(xiàn)方法，能夠完成導(dǎo)航欄的開(kāi)發(fā)掌握?qǐng)D書(shū)列表頁(yè)面的實(shí)現(xiàn)方法，能夠完成圖書(shū)列表頁(yè)面的開(kāi)發(fā)掌握日程安排頁(yè)面的實(shí)現(xiàn)方法，能夠完成日程安排頁(yè)面的開(kāi)發(fā)章節(jié)概述/Summary隨著時(shí)代的不斷發(fā)展，移動(dòng)應(yīng)用在人們的生活中扮演著越來(lái)越重要的角色。其中，移動(dòng)應(yīng)用的用戶(hù)界面布局設(shè)計(jì)直接影響著用戶(hù)的體驗(yàn)。為了提供更好的移動(dòng)Web開(kāi)發(fā)體驗(yàn)，jQueryMobile應(yīng)運(yùn)而生，它是一款基于jQuery的用戶(hù)界面庫(kù)。本章將詳細(xì)講解jQueryMobile的下載和引入，以及常用組件的使用。目錄/Contents任務(wù)9.1任務(wù)9.2制作導(dǎo)航欄制作圖書(shū)列表頁(yè)面任務(wù)9.3制作日程安排頁(yè)面制作導(dǎo)航欄任務(wù)9.1任務(wù)需求為了順應(yīng)互聯(lián)網(wǎng)的發(fā)展和廣泛使用移動(dòng)設(shè)備的趨勢(shì)，某公司計(jì)劃開(kāi)發(fā)一款移動(dòng)應(yīng)用，以提供更好的用戶(hù)體驗(yàn)。公司領(lǐng)導(dǎo)將這一任務(wù)分配給了研發(fā)小組，組長(zhǎng)決定使用jQueryMobile技術(shù)進(jìn)行開(kāi)發(fā)，并要求小組成員在項(xiàng)目開(kāi)始前熟悉jQueryMobile的相關(guān)內(nèi)容，以便更好地上手。前端工程師小高在接到任務(wù)后發(fā)現(xiàn)自己之前并沒(méi)有接觸過(guò)jQueryMobile。為了掌握這一技術(shù)，他決定練習(xí)開(kāi)發(fā)一個(gè)導(dǎo)航欄。在查閱相關(guān)文檔后，小高了解到可以使用導(dǎo)航欄組件進(jìn)行開(kāi)發(fā)。為此，他學(xué)習(xí)了jQueryMobile的下載和引入，以及導(dǎo)航欄組件的相關(guān)知識(shí)，并著手開(kāi)發(fā)導(dǎo)航欄，具體如下。導(dǎo)航欄包含5個(gè)按鈕：“首頁(yè)”“搜索”“設(shè)置”“評(píng)論”和“我的”。為每個(gè)按鈕添加合適的圖標(biāo)。導(dǎo)航欄固定在頁(yè)面底部。任務(wù)需求單擊導(dǎo)航欄中的按鈕時(shí)，頁(yè)面中將顯示“剛才單擊的按鈕是：”和所單擊按鈕的名稱(chēng)，以查看導(dǎo)航欄切換是否成功。導(dǎo)航欄切換效果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備1.下載jQueryMobile

先定一個(gè)小目標(biāo)！掌握jQueryMobile的下載，能夠獨(dú)立完成jQueryMobile的下載知識(shí)儲(chǔ)備1.下載jQueryMobile在使用jQueryMobile進(jìn)行項(xiàng)目開(kāi)發(fā)之前，我們需要先下載jQueryMobile。知識(shí)儲(chǔ)備1.下載jQueryMobile下載jQueryMobile，具體步驟如下。打開(kāi)瀏覽器，訪(fǎng)問(wèn)jQueryMobile的官方網(wǎng)站，如下圖所示。自定義下載最新穩(wěn)定版（單擊進(jìn)行下載）知識(shí)儲(chǔ)備1.下載jQueryMobile下載jQueryMobile的壓縮包后，在下載目錄中找到該壓縮包，如下圖所示。知識(shí)儲(chǔ)備1.下載jQueryMobile將從官方網(wǎng)站下載的jquery.mobile-1.4.5.zip壓縮包解壓，保存到mobile-1.4.5目錄中，解壓文件目錄，如下圖所示。知識(shí)儲(chǔ)備1.下載jQueryMobile下面對(duì)解壓文件目錄進(jìn)行介紹。demos文件夾：包含一系列示例文件，包括各個(gè)組件的演示，每個(gè)示例文件都是獨(dú)立的HTML文件，展示相關(guān)組件的代碼和效果。images文件夾：包含一些默認(rèn)的圖像。jquery.mobile-1.4.5.css和jquery.mobile-1.4.5.min.css：核心樣式表，包含組件和整體布局的樣式。jquery.mobile-1.4.5.js和jquery.mobile-1.4.5.min.js：核心腳本文件，包含組件的交互功能和頁(yè)面轉(zhuǎn)換的邏輯。jquery.mobile-1.4.5.min.map：用于將壓縮后的代碼映射回原始的開(kāi)發(fā)版本的代碼，方便開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中進(jìn)行調(diào)試和錯(cuò)誤跟蹤。知識(shí)儲(chǔ)備1.下載jQueryMobilejquery.mobile.external-png-1.4.5.css和jquery.mobile.external-png-1.4.5.min.css：包含與外部PNG圖像相關(guān)的CSS樣式。它們主要在一些較舊的圖形處理引擎或?yàn)g覽器中使用，這些引擎或?yàn)g覽器對(duì)PNG圖像的支持有一些限制或問(wèn)題。jquery.mobile.icons-1.4.5.css和jquery.mobile.icons-1.4.5.min.css：包含與圖標(biāo)相關(guān)的CSS樣式。當(dāng)希望使用預(yù)定義的圖標(biāo)樣式時(shí)，可以引入其中一個(gè)文件，并在元素上使用相應(yīng)的圖標(biāo)類(lèi)添加圖標(biāo)。jquery.mobile.inline-png-1.4.5.css和jquery.mobile.inline-png-1.4.5.min.css：包含與內(nèi)聯(lián)PNG圖像相關(guān)的CSS樣式。它們主要在一些較舊的圖形處理引擎或?yàn)g覽器中使用，這些引擎或?yàn)g覽器對(duì)內(nèi)聯(lián)PNG圖像的支持有一些限制或問(wèn)題。知識(shí)儲(chǔ)備1.下載jQueryMobilejquery.mobile.inline-svg-1.4.5.css和jquery.mobile.inline-svg-1.4.5.min.css：包含與內(nèi)聯(lián)SVG圖像相關(guān)的CSS樣式。它們主要在一些較舊的圖形處理引擎或?yàn)g覽器中使用，這些引擎或?yàn)g覽器對(duì)內(nèi)聯(lián)SVG圖像的支持有一些限制或問(wèn)題。jquery.mobile.structure-1.4.5.css和jquery.mobile.structure-1.4.5.min.css：包含與組件風(fēng)格和結(jié)構(gòu)相關(guān)的CSS樣式。它們定義了一些核心的樣式規(guī)則，用于確保在不同的移動(dòng)設(shè)備和瀏覽器上具有一致的外觀(guān)。jquery.mobile.theme-1.4.5.css和jquery.mobile.theme-1.4.5.min.css：包含一些主題樣式，為應(yīng)用程序提供不同的外觀(guān)風(fēng)格。知識(shí)儲(chǔ)備下面以按鈕組件為例演示如何查看其示例代碼和效果。首先進(jìn)入demos\button文件夾，找到index.html文件并雙擊，index.html文件將在瀏覽器中打開(kāi)，頁(yè)面效果如下圖所示。1.下載jQueryMobile效果區(qū)域ViewSource按鈕單擊按鈕會(huì)彈出一個(gè)源代碼窗口，顯示該效果對(duì)應(yīng)的代碼片段。組件的鏈接地址單擊其中的鏈接時(shí)，可以跳轉(zhuǎn)到相應(yīng)組件的頁(yè)面。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握jQueryMobile的引入，能夠獨(dú)立完成jQueryMobile的引入，以及完成移動(dòng)版的用戶(hù)界面布局2.引入jQueryMobile知識(shí)儲(chǔ)備2.引入jQueryMobile下載jQueryMobile后，如果想要在項(xiàng)目中使用jQueryMobile，需要在HTML文件中引入jQueryMobile。知識(shí)儲(chǔ)備2.引入jQueryMobile在HTML文件中引入jQueryMobile，具體如下。使用<link>標(biāo)簽引入核心樣式表文件，示例代碼如下。<head><linkrel="stylesheet"href="mobile-1.4.5/jquery.mobile-1.4.5.min.css"></head>使用<script>標(biāo)簽引入核心腳本文件，示例代碼如下。<body><scriptsrc="jquery.1.11.1.min.js"></script><scriptsrc="mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script></body>知識(shí)儲(chǔ)備2.引入jQueryMobile注意：由于jQueryMobile依賴(lài)于jQuery，所以在引入jquery.mobile-1.4.5.min.js文件之前，需要先引入jquery.1.11.1.min.js文件。根據(jù)jquery.mobile-1.4.5.min.js的官方文檔說(shuō)明，該版本支持jQuery1.8~1.11.x版本與2.1版本。這里使用的jQuery版本為1.11.1。知識(shí)儲(chǔ)備2.引入jQueryMobile下面演示如何創(chuàng)建一個(gè)移動(dòng)設(shè)備頁(yè)面，示例代碼如下。<body>

<divdata-role="page">

<divdata-role="header"data-position="fixed"data-theme="b">

<h1>頭部欄</h1>

</div>

<divdata-role="main"class="ui-content">

<p>主體內(nèi)容</p>

</div>

<divdata-role="footer"data-position="fixed"data-theme="b">

<h4>底部欄</h4>

</div>

</div></body>知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，打開(kāi)Chrome瀏覽器的開(kāi)發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度設(shè)置為375px，移動(dòng)設(shè)備頁(yè)面布局效果如下圖所示。2.引入jQueryMobile

先定一個(gè)小目標(biāo)！掌握導(dǎo)航欄組件的實(shí)現(xiàn)方法，能夠完成導(dǎo)航欄的開(kāi)發(fā)知識(shí)儲(chǔ)備3.導(dǎo)航欄組件知識(shí)儲(chǔ)備jQueryMobile提供了導(dǎo)航欄組件，用于在移動(dòng)應(yīng)用程序中創(chuàng)建導(dǎo)航。導(dǎo)航欄通常位于頁(yè)面頂部或底部，用于在移動(dòng)應(yīng)用程序中實(shí)現(xiàn)不同頁(yè)面或視圖之間的切換。導(dǎo)航欄組件通常包括導(dǎo)航按鈕、鏈接和圖標(biāo)。用戶(hù)可以通過(guò)觸摸或單擊進(jìn)行導(dǎo)航操作。3.導(dǎo)航欄組件使用導(dǎo)航欄組件制作導(dǎo)航欄的基本方法如下。（1）創(chuàng)建導(dǎo)航欄容器通常使用<div>標(biāo)簽作為導(dǎo)航欄的容器，并添加data-role屬性，通過(guò)將屬性值設(shè)置為navbar，將該容器標(biāo)記為一個(gè)導(dǎo)航欄。在導(dǎo)航欄容器內(nèi)部創(chuàng)建導(dǎo)航按鈕的基本步驟如下。（2）創(chuàng)建導(dǎo)航按鈕通常使用無(wú)序列表（<ul>）創(chuàng)建導(dǎo)航按鈕列表。在每個(gè)<li>標(biāo)簽內(nèi)部使用<a>標(biāo)簽定義導(dǎo)航按鈕，通過(guò)設(shè)置href屬性，指定每個(gè)導(dǎo)航按鈕的鏈接目標(biāo)。添加.ui-btn-active類(lèi)，指定默認(rèn)選中的導(dǎo)航按鈕。3.導(dǎo)航欄組件知識(shí)儲(chǔ)備（3）設(shè)置導(dǎo)航按鈕的圖標(biāo)為<a>標(biāo)簽設(shè)置data-icon屬性可以為導(dǎo)航按鈕添加圖標(biāo)，將該屬性值設(shè)置為jQueryMobile圖標(biāo)庫(kù)中圖標(biāo)的名稱(chēng)即可，可以運(yùn)行demos\icons\index.html文件來(lái)查看圖標(biāo)。為導(dǎo)航欄容器設(shè)置data-iconpos屬性可以自定義導(dǎo)航按鈕圖標(biāo)的位置，該屬性值包括left、right、top（默認(rèn)值）、bottom和notext，分別表示圖標(biāo)顯示在文字的左側(cè)、右側(cè)、上方、下方和僅顯示圖標(biāo)不顯示文字。（4）設(shè)置導(dǎo)航按鈕圖標(biāo)的位置3.導(dǎo)航欄組件知識(shí)儲(chǔ)備導(dǎo)航按鈕在導(dǎo)航欄中的布局設(shè)置說(shuō)明：默認(rèn)情況下，使用<a>標(biāo)簽定義導(dǎo)航按鈕時(shí)，<a>標(biāo)簽會(huì)被自動(dòng)轉(zhuǎn)換為按鈕樣式，無(wú)須額外地設(shè)置（data-role="button"）。3.導(dǎo)航欄組件知識(shí)儲(chǔ)備導(dǎo)航按鈕的寬度會(huì)根據(jù)導(dǎo)航欄的寬度平均劃分，即當(dāng)導(dǎo)航欄中只有一個(gè)按鈕時(shí)，它會(huì)占據(jù)整個(gè)導(dǎo)航欄；當(dāng)有兩個(gè)按鈕時(shí)，則各占導(dǎo)航欄的一半，依此類(lèi)推。當(dāng)導(dǎo)航欄內(nèi)的按鈕數(shù)量小于或等于5個(gè)時(shí)，按鈕會(huì)排列在同一行，每個(gè)按鈕的寬度相等。當(dāng)按鈕數(shù)量超過(guò)5個(gè)時(shí)，按鈕會(huì)被拆分成多行，每行顯示兩個(gè)按鈕。下面演示如何使用導(dǎo)航欄組件制作基礎(chǔ)導(dǎo)航欄，示例代碼如下。<body>

<divdata-role="navbar">

<ul>

<li><ahref="#">主頁(yè)</a></li>

<li><ahref="#">收藏</a></li>

<li><ahref="#"class="ui-btn-active">郵件</a></li>

<li><ahref="#">設(shè)置</a></li>

</ul>

</div></body>3.導(dǎo)航欄組件知識(shí)儲(chǔ)備基礎(chǔ)導(dǎo)航欄效果如下圖所示。3.導(dǎo)航欄組件知識(shí)儲(chǔ)備默認(rèn)選中的導(dǎo)航按鈕為“郵件”。單擊其他導(dǎo)航按鈕，該按鈕會(huì)切換為選中狀態(tài)。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握移動(dòng)導(dǎo)航欄的實(shí)現(xiàn)方法，能夠完成導(dǎo)航欄的開(kāi)發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建D:\jQuery\chapter09目錄，將jquery-1.11.1.min.js文件和mobile-1.4.5文件夾放入該目錄下，并使用VSCode編輯器打開(kāi)該目錄。創(chuàng)建navbar.html文件，編寫(xiě)頁(yè)面結(jié)構(gòu)并引入jquery-1.11.1.min.js文件，以及mobile-1.4.5文件夾中的jquery.mobile-1.4.5.min.css和jquery.mobile-1.4.5.min.js文件。步驟1步驟2完成導(dǎo)航欄的開(kāi)發(fā)編寫(xiě)邏輯代碼，實(shí)現(xiàn)單擊導(dǎo)航按鈕時(shí)，獲取導(dǎo)航按鈕的名稱(chēng)，并將其顯示在頁(yè)面的指定位置。步驟3任務(wù)實(shí)現(xiàn)在瀏覽器中打開(kāi)navbar.html文件，打開(kāi)開(kāi)發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，單擊“搜索”按鈕的頁(yè)面效果如下圖所示。單擊“搜索”按鈕后，頁(yè)面顯示了一條消息，消息的內(nèi)容是“剛才單擊的按鈕是：搜索”。制作圖書(shū)列表頁(yè)面任務(wù)9.2任務(wù)需求在完成導(dǎo)航欄的開(kāi)發(fā)后，小高決定應(yīng)用jQueryMobile技術(shù)制作一個(gè)帶搜索框的圖書(shū)列表頁(yè)面。通過(guò)查閱相關(guān)文檔，小高了解到可以使用列表視圖組件來(lái)進(jìn)行開(kāi)發(fā)。為此，他學(xué)習(xí)了列表視圖組件的相關(guān)知識(shí)，并著手開(kāi)發(fā)一個(gè)圖書(shū)列表頁(yè)面，具體如下。圖書(shū)列表包含4個(gè)列表項(xiàng)：紅樓夢(mèng)、水滸傳、三國(guó)演義和西游記。每個(gè)列表項(xiàng)應(yīng)包含圖書(shū)的封面、書(shū)名和作者信息。圖書(shū)列表頁(yè)面的頂部有一個(gè)搜索框，可以在該搜索框輸入關(guān)鍵字來(lái)對(duì)圖書(shū)進(jìn)行檢索。任務(wù)需求在圖書(shū)列表頁(yè)面中搜索關(guān)鍵字的效果如下圖所示。

先定一個(gè)小目標(biāo)！掌握列表視圖組件的使用方法，能夠完成列表視圖的制作列表視圖組件知識(shí)儲(chǔ)備jQueryMobile提供了列表視圖組件，用于在移動(dòng)應(yīng)用程序中創(chuàng)建信息列表。使用列表視圖組件可以方便地展示和呈現(xiàn)大量數(shù)據(jù)，如聯(lián)系人列表、新聞列表、圖書(shū)列表和產(chǎn)品目錄等內(nèi)容。列表視圖組件知識(shí)儲(chǔ)備使用列表視圖組件制作列表視圖的基本方法如下。（1）創(chuàng)建列表視圖容器創(chuàng)建列表視圖容器的基本步驟如下。通常使用有序列表（<ol>）或無(wú)序列表（<ul>）作為列表視圖的容器。設(shè)置data-role屬性，將屬性值設(shè)置為listview，以便將該容器標(biāo)記為一個(gè)列表視圖。設(shè)置data-autodividers屬性，并將屬性值設(shè)置為true，開(kāi)啟自動(dòng)分類(lèi)功能。默認(rèn)情況下，按照列表項(xiàng)文本的開(kāi)頭字符進(jìn)行分組。設(shè)置data-inset屬性，并將屬性值設(shè)置為true，以使列表視圖顯示為內(nèi)嵌樣式，帶有圓角和邊緣。設(shè)置data-filter屬性，并將屬性值設(shè)置為true，用于在列表視圖的頭部添加搜索框。設(shè)置data-filter-placeholder屬性，默認(rèn)情況下，搜索框中默認(rèn)的字符為“Filteritems…”，可以通過(guò)設(shè)置該屬性自定義搜索框中的默認(rèn)字符。知識(shí)儲(chǔ)備列表視圖組件（2）添加列表項(xiàng)在列表視圖容器的內(nèi)部添加列表項(xiàng)的基本步驟如下。知識(shí)儲(chǔ)備列表視圖組件使用<li>標(biāo)簽定義列表項(xiàng)。在列表項(xiàng)內(nèi)部可以添加<a>標(biāo)簽，如果沒(méi)有添加，則該列表項(xiàng)為只讀項(xiàng)。設(shè)置data-role屬性，并將屬性值設(shè)置為list-divider，用于標(biāo)識(shí)分類(lèi)的名稱(chēng)。（3）添加數(shù)字泡標(biāo)識(shí)在列表項(xiàng)的內(nèi)部，通常使用<span>標(biāo)簽定義數(shù)字泡標(biāo)識(shí)，并添加.ui-li-count類(lèi)，用于表示特定的含義，如訪(fǎng)問(wèn)量、銷(xiāo)量等。知識(shí)儲(chǔ)備列表視圖組件（4）設(shè)置縮略圖列表在列表項(xiàng)的內(nèi)部設(shè)置縮略圖列表的基本步驟如下。通常使用<img>標(biāo)簽定義圖像，圖像的高度會(huì)自動(dòng)設(shè)置為80px。在列表項(xiàng)的內(nèi)部添加一對(duì)額外的<a>標(biāo)簽，可用于為縮略圖添加分隔線(xiàn)。知識(shí)儲(chǔ)備下面演示如何使用列表視圖組件制作帶有搜索框的字母分類(lèi)列表，示例代碼如下。<body>

<divdata-role="page">

<divdata-role="main"class="ui-content">

<uldata-role="listview"data-filter="true"data-inset="true">

<lidata-role="list-divider">A</li>

<li><ahref="#">Apple</a></li>

<li><ahref="#">Apricot</a></li>

<li><ahref="#">Avocado</a></li>

<lidata-role="list-divider">B</li>

<li><ahref="#">Banana</a></li>

<li><ahref="#">Blueberry</a></li>列表視圖組件知識(shí)儲(chǔ)備>>接上頁(yè)代碼

<lidata-role="list-divider">C</li>

<li><ahref="#">Cherry</a></li>

<li><ahref="#">Coconut</a></li>

<li><ahref="#">Cranberry</a></li>

</ul>

</div>

</div></body>列表視圖組件知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，頁(yè)面會(huì)顯示一個(gè)帶有搜索框的字母分類(lèi)列表，在搜索框中輸入關(guān)鍵字“AN”，分類(lèi)列表及搜索結(jié)果如下圖所示。列表視圖組件由搜索結(jié)果可知，用于搜索的關(guān)鍵字不區(qū)分大小寫(xiě)。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握?qǐng)D書(shū)列表頁(yè)面的實(shí)現(xiàn)方法，能夠完成圖書(shū)列表頁(yè)面的開(kāi)發(fā)任務(wù)實(shí)現(xiàn)將本章配套源代碼中的images文件夾復(fù)制到chapter09目錄下。images文件夾中保存了本章所有的圖像素材。創(chuàng)建listView.html文件，編寫(xiě)頁(yè)面結(jié)構(gòu)并引入jquery-1.11.1.min.js文件，以及mobile-1.4.5文件夾中的jquery.mobile-1.4.5.min.css和jquery.mobile-1.4.5.min.js文件。步驟1步驟2完成圖書(shū)列表頁(yè)面的開(kāi)發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開(kāi)listView.html文件，打開(kāi)開(kāi)發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，在搜索框中輸入關(guān)鍵字“紅”，圖書(shū)列表及搜索結(jié)果如下圖所示。制作日程安排頁(yè)面任務(wù)9.3任務(wù)需求完成列表視圖的開(kāi)發(fā)后，小高決定應(yīng)用jQueryMobile技術(shù)制作一個(gè)日程安排頁(yè)面。通過(guò)查閱相關(guān)文檔，小高了解到可以使用選擇菜單組件來(lái)進(jìn)行開(kāi)發(fā)。為此，他學(xué)習(xí)了選擇菜單組件和初始化選擇菜單的相關(guān)知識(shí)，并著手開(kāi)發(fā)日程安排頁(yè)面，該頁(yè)面的具體開(kāi)發(fā)需求如下。創(chuàng)建兩個(gè)選擇菜單，分別為工作類(lèi)型和具體任務(wù)。用戶(hù)可以選擇每天的工作類(lèi)型，包括工作、學(xué)習(xí)和休息。根據(jù)用戶(hù)選擇的工作類(lèi)型，顯示相應(yīng)的任務(wù)列表供用戶(hù)選擇具體任務(wù)。日程安排頁(yè)面效果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握選擇菜單組件的使用方法，能夠完成選擇菜單的制作1.選擇菜單組件jQueryMobile提供了選擇菜單組件，可用于在移動(dòng)應(yīng)用程序中創(chuàng)建具有選擇功能的菜單。知識(shí)儲(chǔ)備1.選擇菜單組件知識(shí)儲(chǔ)備選擇菜單組件既可以用來(lái)收集用戶(hù)的輸入，也可以用于進(jìn)行篩選操作。通過(guò)選擇菜單，用戶(hù)可以方便地選擇所需的選項(xiàng)。1.選擇菜單組件使用選擇菜單組件可以創(chuàng)建單選菜單、多選菜單以及單選分組菜單。對(duì)于單選菜單，用戶(hù)只能選擇其中的一個(gè)選項(xiàng)。對(duì)于多選菜單，用戶(hù)可以選擇多個(gè)選項(xiàng)。單選分組菜單則將選項(xiàng)分組展示，用戶(hù)只能在所有分組中選擇一個(gè)選項(xiàng)。使用選擇菜單組件制作選擇菜單的基本方法如下。（1）創(chuàng)建選擇菜單容器創(chuàng)建選擇菜單的容器并設(shè)置相應(yīng)的屬性的具體實(shí)現(xiàn)步驟如下。使用<select>標(biāo)簽創(chuàng)建選擇菜單的容器。設(shè)置data-mini屬性，并將屬性值設(shè)置為true，以調(diào)整選擇菜單顯示為較小的尺寸樣式。設(shè)置data-inline屬性，并將屬性值設(shè)置為true，使選擇菜單顯示為嵌入（行內(nèi)）樣式，這將使選擇菜單一行顯示，并與其他內(nèi)容對(duì)齊。同時(shí)設(shè)置multiple屬性和data-native-menu屬性，并將data-native-menu屬性值設(shè)置為false，以啟用多選功能并禁用原生選擇菜單。設(shè)置data-iconpos屬性，以調(diào)整圖標(biāo)的位置，該屬性值包括left、right（默認(rèn)值）、top、bottom和notext，分別表示圖標(biāo)顯示在文字的左側(cè)、右側(cè)、上方、下方和僅顯示圖標(biāo)不顯示文字。知識(shí)儲(chǔ)備1.選擇菜單組件（2）添加選擇菜單的選項(xiàng)在選擇菜單容器的內(nèi)部添加選項(xiàng)的具體實(shí)現(xiàn)步驟如下。知識(shí)儲(chǔ)備使用<option>標(biāo)簽創(chuàng)建選擇菜單的選項(xiàng)。設(shè)置value屬性，以定義選項(xiàng)的值和顯示文本。設(shè)置disabled屬性，以禁用特定選項(xiàng)。（3）添加含有分隔項(xiàng)的菜單當(dāng)選擇菜單中含有多個(gè)類(lèi)別時(shí)，可以在<select>標(biāo)簽內(nèi)部使用<optgroup>標(biāo)簽創(chuàng)建含有分隔項(xiàng)的選項(xiàng)，可通過(guò)為<optgroup>標(biāo)簽設(shè)置label屬性定義分隔項(xiàng)的名稱(chēng)。1.選擇菜單組件知識(shí)儲(chǔ)備1.選擇菜單組件下面演示如何使用選擇菜單組件制作選擇食物的菜單，示例代碼如下。<body>

<divdata-role="page">

<divdata-role="main"class="ui-content">

<labelfor="food">請(qǐng)選擇食物：</label>

<selectid="food"data-inline="true">

<option>請(qǐng)選擇</option>

<optgrouplabel="水果">

<optionvalue="1">蘋(píng)果</option>

<optionvalue="2">香蕉</option>

<optionvalue="3">藍(lán)莓</option>

</optgroup>知識(shí)儲(chǔ)備1.選擇菜單組件>>接上頁(yè)代碼

<optgrouplabel="蔬菜">

<optionvalue="1">西紅柿</option>

<optionvalue="2"disabled>黃瓜</option>

<optionvalue="3">土豆</option>

</optgroup>

</select>

</div>

</div></body>知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，展開(kāi)的選擇菜單效果如下圖所示。被禁用了1.選擇菜單組件知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握初始化選擇菜單的方法，能夠完成選擇菜單的初始化2.初始化選擇菜單知識(shí)儲(chǔ)備2.初始化選擇菜單在jQueryMobile中，為什么要初始化選擇菜單，該如何實(shí)現(xiàn)選擇菜單的初始化？知識(shí)儲(chǔ)備2.初始化選擇菜單初始化選擇菜單可以將一個(gè)普通的下拉菜單轉(zhuǎn)換為jQueryMobile風(fēng)格的選擇菜單。在jQueryMobile中，selectmenu()方法用于初始化選擇菜單。selectmenu()方法接收一個(gè)可選的參數(shù)options，這個(gè)參數(shù)是一個(gè)包含配置選項(xiàng)的對(duì)象，用于自定義下拉菜單的行為和外觀(guān)。常見(jiàn)的配置選項(xiàng)如下。theme：指定選擇菜單使用的主題，如預(yù)設(shè)的a主題和b主題。iconpos：設(shè)置選擇菜單的圖標(biāo)位置，如right、left、top、bottom和notext等。知識(shí)儲(chǔ)備2.初始化選擇菜單如何手動(dòng)刷新jQueryMobile選擇菜單的外觀(guān)和行為？在jQueryMobile中，可以使用selectmenu('refresh')方法手動(dòng)刷新選擇菜單的外觀(guān)和行為，以確保動(dòng)態(tài)更新的選項(xiàng)生效。因?yàn)樵趧?dòng)態(tài)添加、移除或更改選擇菜單的選項(xiàng)時(shí)，選擇菜單的外觀(guān)和行為不會(huì)自動(dòng)更新。通過(guò)調(diào)用selectmenu('refresh')方法，選擇菜單會(huì)重新渲染，以反映最新的選項(xiàng)內(nèi)容，讓用戶(hù)在使用選擇菜單時(shí)看到最新的選項(xiàng)。selectmenu('r