Android+Jquery Mobile學習系列(2)-HTML5/Jquery Mobile基礎

時間 2019-11-07

標籤 android+jquery android jquery mobile 學習系列 html5 html 基礎欄目 Android 简体版

原文原文鏈接

本章介紹兩個關鍵字[HTML5]和[Jquery Mobile]，簡單說這二者的關係是：HTML5做爲主體，Jquery Mobile在HTML5的基礎上對其進行了優化、裝飾。javascript

HTML5

HTML5你們早就不陌生了，HTML最新版本，提供了不少富客戶端功能支持，可是在臺式系統由於受到某些瀏覽器限制發展緩慢，而移動設備由於沒有舊包袱，全部廠家都在向HTML5靠齊，所以移動設備（特別是最新的設備）的瀏覽器對HTML5支持度很是高。因此大多數智能移動設備上都能跑HTML5應用。css

關於HTML5，並非你想像中的那麼神祕。說白了，HTML5功能也是由HTML標籤來實現，只是這些標籤之前沒有出現過，你能夠像之前編寫普通html頁面那樣添加上HTML5某些新特性標籤，而後在支持HTML5的瀏覽器（好比chrome）上運行。想比較全面瞭解HTML5，我建議新手花一兩個小時過一遍w3cschool的HTML5教程，很是簡潔，可是能讓你瞭解什麼叫HTML5。html

JQuery Mobile

jQuery Mobile是用於建立移動web應用的前端開發框架，可使用於智能手機與平板電腦，它使用 HTML5 & CSS3 最小的腳原本佈局網頁。你們都知道，HTML原生的控件並非那麼「炫」，Jquery Mobile的主要做用之一是幫助不懂UI的開發人員讓本身的HTML有「炫」的感受。另外Jquery Mobile對HTML還提供了一些性能上的優化（好比Ajax轉場，提升頁面切換速度），而且提供了一些新的js事件供開發者調用。注：Jquery Mobile依賴於Jquery，因此HTML須要引用Jquery。前端

Jquery Mobile須要學習的內容蠻多的，我建議新手全面地過一遍Jquery Mobile的教程再作應用，我除了看w3cschool的教程外，還看了這位做者的文章，最近還發現Jquer Mobile中文API網站也很不錯。html5

簡單示例

首先到jquery mobile官網下載本身須要的版本，默認下載下來的文件包含Jquery Mobile和Jquery的js，同時也提供了不少Demo供參考。java

注：*.min.*系列是壓縮過的文件，文件大小要比完整源碼小不少，應用正式上線時最好用min文件，可以提升頁面加載文件效率。
jquery

而後隨意建一個HTML文件，注意頁面頭部要有<!DOCTYPE html>標籤，頁面引用如下三個必備文件（文件位置根據你的HTML相對位置來決定）。web

Html代碼

<link rel="stylesheet" href="../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" type="text/css">
<script src="../scripts/jquery.mobile-1.3.2/jquery.js" type="text/javascript" ></script>
<script src="../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript" ></script>

在<Body>標籤中編寫頁面元素，跟傳統的HTML有所不一樣的是，jquery mobile把一個<div data-role="page">當作一個頁面，在page中能夠定義三個主體區：頭部header、內容區content和底部footer，一個簡單的示例以下。chrome

Html代碼

<body>
<div data-role="page">
<div data-role="header">
<h1>歡迎來到個人主頁</h1>
</div>
<div data-role="content">
<p>我如今是一個移動端開發者!!</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>

前面說了一個<div data-role="page">標籤表示一個頁面，那麼jquery mobile支持一個<body>標籤中存在多個page，它們的ID必定要不一樣，便於區分。頁面初次加載時，默認只顯示第一個page！而多個頁面切換很是簡單，只須要在跳轉連接中加[#目標page的ID]便可。以下代碼實現的功能是：點擊[頁面②]連接後頁面切換到id爲pagetwo的頁面，而後點擊[頁面①]，又會回到pageone頁面。api

Html代碼

<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">頁面②</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">頁面①</a>
</div>
</div>

若是要讓第二個頁面以dialog彈出框的形式顯示，則只須要在跳轉的<a>標籤中增長一個屬性[data-rel="dialog"]。不過若是pagetwo只有一個data-role=content內容區的話，彈出框是沒有關閉按鈕的，因此你須要給pagetwo定義一個header。

Html代碼

<div data-role="page" id="pageone">
<div data-role="content">
<p>Welcome!</p>
<a href="#pagetwo" data-rel="dialog">頁面②</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1></h1>
</div>
<div data-role="content">
<p>Goodbye!</p>
<a href="#pageone">頁面①</a>
</div>
</div>

至於其它jquery mobile控件，這裏就不贅述了，你們能夠自行去相關教程網站學習瞭解。

下面介紹一點jquery mobile的事件和方法。

jquery mobile用得最多的事件恐怕是pageinit，這個是指定page加載完成時調用的。而jquery的ready()反而用得比較少（這個後面章節說）。

Js代碼

$(document).on("pageinit","#pageone",function(){
alert("頁面初始化");
});

而後還有一些好玩的屏幕左右滑動事件和上下滾動事件。

Js代碼

$(document).on("swipeleft",function(){
alert("向左滑動");
});
$(document).on("swiperight","#pagethree",function(){
alert("向右滑動");
});
$(document).on("scrollstart",function(){//關聯事件：scrollstop
//滾動頁面注：不論上下滑動仍是左右滑動都會觸發
});

還有一個是頁面轉場時用到的pagebeforechange事件，用於給第二個頁面進行參數傳遞，你只要輸入pagebeforechange關鍵字，網上全是說它進行參數傳遞的文章。

Js代碼

$(document).unbind("pagebeforechange").bind("pagebeforechange", function(e, data) {
});

傳統頁面的跳轉多是經過window.location來完成，jquery mobile提供了自帶的轉場方法，這種跳轉是經過Ajax加載第二個頁面，從速度上要比第一個高，可是用這種方式要注意不少問題（這個後面文章說明）。

Js代碼

$.mobile.changePage("xx/two.html")

注：若是使用<a href="xx/tow.html">的形式到下一頁，默認也是使用jquery mobile的changePage跳轉的。

下面來一個完整的示例，這個示例在chrome下就看獲得效果，下面代碼中有不少註釋說明，你們自行消化理解吧。

Html代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" type="text/css">
<script src="../../scripts/jquery.mobile-1.3.2/jquery.js" type="text/javascript" >
</script>
<script src="../../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript" >
</script>
<script src="../../scripts/bless.ui.core.js" type="text/javascript" >
</script>
<title>
</title>
<script type="text/javascript">
$(document).on("pageinit","#pageone",function(){
alert("頁面初始化");
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed">
<a href="#" id="changePage" data-icon="arrow-l" data-transition="slide" data-direction="reverse">
返回
</a>
<h1>
歡迎訪問個人主頁
</h1>
<div data-role="navbar">
<ul>
<li>
<a href="#pageone" class="ui-btn-active">
首頁
</a>
</li>
<li>
<a href="#pagetwo" data-rel="dialog">
頁面二
</a>
</li>
</ul>
</div>
</div>
<div data-role="content">
<form method="post" action="#">
<div data-role="fieldcontain">
<input type="hidden" name="id" id="id">
<input type="hidden" name="deleteFlag" id="deleteFlag">
<input type="hidden" name="userType" id="userType">
<label for="name">
姓名：
</label>
<input type="text" name="name" id="name" placeholder="您的姓名...">
<br>
<label for="sex">
性別：
</label>
<input type="radio" name="sex" id="mail" value="1" checked="checked">
<label for="mail">
男
</label>
<input type="radio" name="sex" id="femail" value="2">
<label for="femail">
女
</label>
<br>
<label for="birthday">
生日：
</label>
<input type="date" name="birthday" id="birthday" >
<br>
<label for="mobilePhone">
手機號碼：
</label>
<input type="text" data-clear-btn="true" name="mobilePhone" id="mobilePhone" placeholder="您的手機號碼...">
<br>
<label for="email">
電子郵箱：
</label>
<input type="email" data-clear-btn="true" name="email" id="email" placeholder="您的電子郵箱...">
<br>
</div>
<input type="button" id="save" data-inline="true" value="提交">
</form>
</div>
<div data-role="footer">
<h1>
頁腳文本
</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>
頁面2
</h1>
</div>
<div data-role="content">
<p>
這是頁面2
</p>
</div>
<div data-role="footer">
<h1>
頁腳文本
</h1>
</div>
</div>
</body>
</html>

注意事項

這段是2014-4-14補充。

在愈來愈深刻的開發學習中，發現了jquery mobile不少須要注意的地方，這裏統一說明。

一、全部HTML元素幾乎都被jquery mobile更改過，由於JQM在作頁面渲染的時候,爲了使樣式跟客戶端程序類似, 隱藏了原始的標籤而後用一些新的標籤和自定義的樣式來表現原標籤,其實新樣式的標籤已經不是原來的標籤。

好比頁面有一個ListView，你想經過javascript動態append一個新的ListView，這時最終效果絕對不是JqueryMobile提供的那種樣式（這個能夠經過桌面瀏覽器看代碼知道）。要想讓動態建立的元素被Jquery Mobile渲染，就必須調用它提供的一些方法來刷新當前組件。具體的內容可參考這個博客《jQuery Mobile動態刷新頁面樣式》

二、移動設備javascript調試問題，在開發中常常會有一些javascript錯誤，最頭疼的是不知道怎麼調試，若是手機也有「開發者調試模式」就行了，惋惜沒有！根據我目前的經驗，調試能夠用兩種方法：一個拷貝代碼到電腦，經過PC瀏覽器來調試；另外一個看LogCat日誌，javascript報錯都會在日誌中體現，以下圖所示，首先看錯誤信息是什麼，而後看錯誤文件在哪兒，最後一個關鍵是看提示在文件哪一行出問題，而後你就能夠跟過去看問題所在了。下圖異常緣由是bless.insurer.js文件第25行，名爲"DOM"的對象不存在。

三、對於動態操做Button按鈕，最好使用<a>標籤來實現，而<input type="button">徹底不推薦，由於jquery mobile爲了渲染出按鈕的樣式，會把input button隱藏，而用div來替代其內容，這時開發人員想經過javascript來隱藏/顯示/更改按鈕文字的話，是沒效果的。

對按鈕的經常使用操做以下：

Js代碼

$("#save").hide(); //隱藏按鈕
$("#save").show(); //顯示按鈕
$("#save").find(".ui-btn-text").html("修改"); //修改按鈕文字
$("body").append("<a href=\"javascript:void(0);\" data-role=\"button\" id=\"del\">刪除</a>")
$("#del").button();//動態新增一個按鈕