HTML5開發移動web應用—JQuery Mobile(1)

時間 2019-12-07

標籤 html5 html 開發移動 web 應用 jquery mobile 欄目 HTML5 简体版

原文原文鏈接

JQuery Mobile是一個簡單易用的web移動app開發框架。使用它就像使用jQuery同樣，引入必要的文件就能夠。css

最基礎的jQuery Mobile文件的結構代碼例如如下：html

<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>在此處插入標題</h1>
  </div>
  <div data-role="content">
    <p>在此處插入正文</p>
  </div>
  <div data-role="footer">
    <h1>在此處插入頁腳文本</h1>
  </div>
</div> 
</body>

依據上面的樣例，咱們首先研究一下。主要的JQuery Mobile框架的用法。

一、data-roleweb

經過data-role，咱們可以定義頁面中某個部分的做用。而JQuery Mobile會依據定義的值，本身主動進行解析，爲其設定對應的樣式或功能。在上面的代碼中。咱們首先定義了一個data-role爲page的div，代表這個div及其內部的所有組件都是一個單獨的頁面（以後會具體解說）。以後，是手機頁面中很普通的結構定義：header、content以及footer,他們也各自經過data-role來實現各自的角色的定義。app

二、全然的html框架

可以看出，JQuery Mobile在實現頁面佈局的時候採用html+css的形式，特表依賴在標籤中的定義，和咱們以前學習的Sencha Touch等框架大相徑庭。這決定了JQuery Mobile在使用起來更加簡便，學習成本更低：沒有複雜的載入機制，沒有龐大的JavaScript代碼，僅僅要在html內部進行標籤的定義就可以實現頁面的基本佈局。佈局

三、id的使用post

咱們爲page也定義了一個id。在JQuery Mobile中，id非常常使用藥。它有一個很是大的做用就是實現頁面的轉換。學習

id代表了頁面。在跳轉時調用就能夠轉到指定的界面中。spa