jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第9章 jQuery Mobile移動頁面開發(fā)_第1頁
jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第9章 jQuery Mobile移動頁面開發(fā)_第2頁
jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第9章 jQuery Mobile移動頁面開發(fā)_第3頁
jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第9章 jQuery Mobile移動頁面開發(fā)_第4頁
jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第9章 jQuery Mobile移動頁面開發(fā)_第5頁
已閱讀5頁，還剩65頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

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

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

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

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

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

先定一個(gè)小目標(biāo)！掌握jQueryMobile的引入，能夠獨(dú)立完成jQueryMobile的引入，以及完成移動版的用戶界面布局2.引入jQueryMobile知識儲備2.引入jQueryMobile下載jQueryMobile后，如果想要在項(xiàng)目中使用jQueryMobile，需要在HTML文件中引入jQueryMobile。知識儲備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>知識儲備2.引入jQueryMobile注意：由于jQueryMobile依賴于jQuery，所以在引入jquery.mobile-1.4.5.min.js文件之前，需要先引入jquery.1.11.1.min.js文件。根據(jù)jquery.mobile-1.4.5.min.js的官方文檔說明，該版本支持jQuery1.8~1.11.x版本與2.1版本。這里使用的jQuery版本為1.11.1。知識儲備2.引入jQueryMobile下面演示如何創(chuàng)建一個(gè)移動設(shè)備頁面，示例代碼如下。<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>知識儲備上述示例代碼運(yùn)行后，打開Chrome瀏覽器的開發(fā)者工具，進(jìn)入移動設(shè)備調(diào)試模式，將移動設(shè)備的視口寬度設(shè)置為375px，移動設(shè)備頁面布局效果如下圖所示。2.引入jQueryMobile

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

<divdata-role="navbar">

<ul>

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

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

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

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

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

先定一個(gè)小目標(biāo)！掌握選擇菜單組件的使用方法，能夠完成選擇菜單的制作1.選擇菜單組件jQueryMobile提供了選擇菜單組件，可用于在移動應(yīng)用程序中創(chuàng)建具有選擇功能的菜單。知識儲備1.選擇菜單組件知識儲備選擇菜單組件既可以用來收集用戶的輸入，也可以用于進(jìn)行篩選操作。通過選擇菜單，用戶可以方便地選擇所需的選項(xiàng)。1.選擇菜單組件使用選擇菜單組件可以創(chuàng)建單選菜單、多選菜單以及單選分組菜單。對于單選菜單，用戶只能選擇其中的一個(gè)選項(xiàng)。對于多選菜單，用戶可以選擇多個(gè)選項(xiàng)。單選分組菜單則將選項(xiàng)分組展示，用戶只能在所有分組中選擇一個(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)容對齊。同時(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)不顯示文字。知識儲備1.選擇菜單組件（2）添加選擇菜單的選項(xiàng)在選擇菜單容器的內(nèi)部添加選項(xiàng)的具體實(shí)現(xiàn)步驟如下。知識儲備使用<option>標(biāo)簽創(chuàng)建選擇菜單的選項(xiàng)。設(shè)置value屬性，以定義選項(xiàng)的值和顯示文本。設(shè)置disabled屬性，以禁用特定選項(xiàng)。（3）添加含有分隔項(xiàng)的菜單當(dāng)選擇菜單中含有多個(gè)類別時(shí)，可以在<select>標(biāo)簽內(nèi)部使用<optgroup>標(biāo)簽創(chuàng)建含有分隔項(xiàng)的選項(xiàng)，可通過為<optgroup>標(biāo)簽設(shè)置label屬性定義分隔項(xiàng)的名稱。1.選擇菜單組件知識儲備1.選擇菜單組件下面演示如何使用選擇菜單組件制作選擇食物的菜單，示例代碼如下。<body>

<divdata-role="page">

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

<labelfor="food">請選擇食物：</label>

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

<option>請選擇</option>

<optgrouplabel="水果">

<optionvalue="1">蘋果</option>

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

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

</optgroup>知識儲備1.選擇菜單組件>>接上頁代碼

<optgrouplabel="蔬菜">

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

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

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

</optgroup>

</select>

</div>

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論