web app 是基於web的應用程序,是針對移動設備優化後的web站點,它具備php
等優勢。開發web app使用的技術:前端 html5 + css + JavaScript / 後端 php | java | .net。css
隨着 html5 的發展,咱們能使用愈來愈多的功能,好比:地理定位、本地數據儲存、音視頻播放、調用照相機、GPU硬件加速等等。html
web app具備原生應用程序特性,同時也具備web應用程序特性。web app能從一個應用,挑轉到另一個web app應用,這樣就提升了用戶體驗。前端
jQuery Mobile 是建立移動 web 應用程序的框架,是 JQuery在手機上和平板上的一個版本。它適用於全部流行的智能手機和平板電腦,使用 HTML5 和 CSS3 經過儘量少的腳本對頁面進行佈局。它屏蔽了瀏覽器之間的差別,高級的瀏覽器可使用高級的樣式和功能;對於低級的瀏覽器能自動降級。html5
JQM(JQuery Mobile的簡寫,如下相同)提供了一整套的UI組件(組件的方法與屬性)、瀏覽器的事件以及官方文檔。java
所需的「材料」以下表所示:jquery
軟件及類庫 | 下載地址 |
JQuery Mobile 類庫 | http://jquerymobile.com/download/ |
JQuery Mobile 官方文檔 | http://api.jquerymobile.com/category/all/ |
JQuery Mobile 官方demo | http://demos.jquerymobile.com/1.4.5/ |
JQuery Mobile 中文文檔 | http://www.jqmapi.com/api1.2/index.html |
文件夾佈局及源文件安排以下圖:web
index.html 的頭部信息源代碼以下:後端
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"" href="jquery.mobile-1.4.5.css"> <script src="jquery.js"></script> <script src="jquery.mobile-1.4.5.js"></script> </head>
注意:屬性值不加雙引號(」」)括起來也是能夠的。api
其中,
<meta name="viewport" content="width=device-width, initial-scale=1">
用來初始化移動設備的屏幕顯示:頁面寬度等於設備寬度,縮放比例設置爲1也就是禁止縮放。
在網頁的HTML中,插入以下代碼:
<body> <div data-role="page"> <div data-role="header"> <h1>馮煜博的JQM學習</h1> </div> <div data-role="content"> <p>我是一名自由的開發者!</p> </div> <div data-role="footer"> <h1>頁腳文本</h1> </div> </div> </body>
效果以下圖:
例子中,html代碼<div>的屬性值釋義以下:
在 jQuery Mobile,能夠在單一 HTML 文件中建立多個頁面。經過惟一的 id 來分隔每張頁面,並使用 href 屬性來鏈接彼此,完整的<body>示例代碼以下:
<body> <div data-role="page" id="index"> <div data-role="header"> <h1>馮煜博的JQM學習</h1> </div> <div data-role="content"> <p>我是一名自由的開發者!</p> <a href="#pagetwo">轉到頁面一</a> </div> <div data-role="footer"> <h1>頁腳文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#index">轉到頁面一</a> </div> </div> </body>
顯示的效果及頁面間跳轉以下圖:
JQuery Mobile擁有許多頁面事件,從w3school事件文檔截取以下表:
pagebeforecreate | 在頁面建立前觸發。 |
pagecreate | 在頁面建立時觸發,還未加載頁面元素。 |
pageinit | 當頁面已經初始化完成時觸發。 |
pageload | 在頁面成功加載並插入 DOM 後觸發。 |
pagebeforeload | 在做出任何加載請求以前觸發。 |
pagebeforeshow | 「去的頁面」以前,過渡動畫開始以前觸發。頁面2 |
pagebeshow | 「去的頁面」開始加載,過渡動畫完成以後觸發。頁面2 |
pagebeforehide | 「來的頁面」觸發,過渡動畫開始前觸發。頁面1 |
pagehide | 「來的頁面」觸發,過渡動畫完成後觸發。頁面1 |
<div data-role="page" id="index"> <div data-role="header"> <h1>馮煜博的JQM學習</h1> </div> <div data-role="content"> <p>我是一名自由的開發者!</p> <a href="#pagetwo">轉到頁面一</a> </div> <div data-role="footer"> <h1>頁腳文本</h1> </div> </div> <script> $(document).on("pageinit", "#index", function(){ alert("pageinit 被觸發"); }); </script>
詳情能夠參閱w3school列表內容文檔
表格的代碼以下:
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive"> <thead> <tr> <th>表標題1</th> <th>表標題2</th> <th>表標題3</th> </tr> </thead> <tbody> <td>表元素1</td> <td>表元素2</td> <td>表元素3</td> </tbody> </table>
更多示例及代碼,詳見JQuery Mobile官方Demo之table
在JQuery中,綁定事件的方法使用 ready() 。
$(document).ready(function(){
//此處是JQuery事件
});
在JQuery Mobile中,推薦使用 on() 方法綁定事件。
$(document).on("pageinit", "#page", function(){
//當頁面已經初始化而且完善樣式後發生。
});
在頁面中,咱們有一個列表(ul/ol)。
<ul data-role="listview" data-inset="true" id="list"> <li><a href="#">i am a</a></li> </ul>
爲了給其中的<a>添加單擊事件,咱們作以下操做:
$(document).on("pageinit", "#index", function(){ $("#list").on("click", "a", function(){ //事件體 alert("you click a!"); }); });
這是一種方法,也能夠另外一種:
$(document).on("pageinit", "#index", function(){ $("#list").on("click", "a",fun); }); var fun = function(){ alert("i am a"); }
setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式——w3school文檔。
//寫法一 setTimeout("alert('3 seconds!')",3000) //寫法二 setTimeout(function(){ alert("3 seconds"); }, 3000);
推薦使用第一種方法聲明一個函數:
var 函數名稱 = function(){ //方法體 }
不建議使用第二種方法聲明一個函數:
function 函數名稱(){ //方法體 }
對於以下代碼,咱們但願加入新的一行(<li><a href="#">i am a</a></li>)
<ul data-role="listview" data-inset="true" id="list"> <li><a href="#">i am a</a></li> </ul>
因而咱們調用該方法:
$("#list").append("<li><a href=\"#\">i am a</a></li>");
可是顯示的效果不盡如人意,以下圖。
其實,咱們應該多加入一行JQuery代碼,使腳本刷新樣式。完整的添加元素代碼以下:
$("#list").append("<li><a href=\"#\">i am a</a></li>"); $("#list").listview("refresh"); //刷新樣式必備