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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第9章jQueryMobile移動頁面開發(fā)《jQuery前端開發(fā)任務驅動教程》學習目標/Target

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

掌握導航欄組件的使用方法，能夠完成導航欄的制作掌握列表視圖組件的使用方法，能夠完成列表視圖的制作掌握選擇菜單組件的使用方法，能夠完成選擇菜單的制作學習目標/Target

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

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

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

先定一個小目標！掌握jQueryMobile的引入，能夠獨立完成jQueryMobile的引入，以及完成移動版的用戶界面布局2.引入jQueryMobile知識儲備2.引入jQueryMobile下載jQueryMobile后，如果想要在項目中使用jQueryMobile，需要在HTML文件中引入jQueryMobile。知識儲備2.引入jQueryMobile在HTML文件中引入jQueryMobile，具體如下。使用<link>標簽引入核心樣式表文件，示例代碼如下。<head><linkrel="stylesheet"href="mobile-1.4.5/jquery.mobile-1.4.5.min.css"></head>使用<script>標簽引入核心腳本文件，示例代碼如下。<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)建一個移動設備頁面，示例代碼如下。<body>

<divdata-role="page">

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

<h1>頭部欄</h1>

</div>

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

<p>主體內容</p>

</div>

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

<h4>底部欄</h4>

</div>

</div></body>知識儲備上述示例代碼運行后，打開Chrome瀏覽器的開發(fā)者工具，進入移動設備調試模式，將移動設備的視口寬度設置為375px，移動設備頁面布局效果如下圖所示。2.引入jQueryMobile

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

<divdata-role="navbar">

<ul>

<li><ahref="#">主頁</a></li>

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

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

<li><ahref="#">設置</a></li>

</ul>

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

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

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

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

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

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

<optgrouplabel="蔬菜">

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

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

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

</optgroup>

</select>

</div>

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

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

溫馨提示

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

評論

0/150

提交評論