HTML5開發移動web應用—JQuery Mobile(1)
阿新 • • 發佈：2017-07-22
框架 one 樣式 手機 div pre 都是 指定 學習
JQuery Mobile是一個簡單易用的web移動app開發框架。使用它就像使用jQuery一樣，引入必要的文件就可以。
最基礎的jQuery Mobile文件的結構代碼例如以下：
<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>1、data-role
通過data-role，我們能夠定義頁面中某個部分的作用。而JQuery Mobile會依據定義的值，自己主動進行解析，為其設定對應的樣式或功能。在上面的代碼中。我們首先定義了一個data-role為page的div，表明這個div及其內部的全部組件都是一個單獨的頁面（之後會具體解說）。之後，是手機頁面中很普通的結構定義：header、content以及footer,他們也各自通過data-role來實現各自的角色的定義。
2、全然的html
能夠看出，JQuery Mobile在實現頁面布局的時候採用html+css的形式，特表依賴在標簽中的定義，和我們之前學習的Sencha Touch等框架截然不同。這決定了JQuery Mobile在使用起來更加簡便，學習成本更低：沒有復雜的載入機制，沒有龐大的JavaScript代碼，僅僅要在html內部進行標簽的定義就能夠實現頁面的基本布局。
3、id的使用
我們為page也定義了一個id。在JQuery Mobile中，id非經常使用藥。它有一個非常大的作用就是實現頁面的轉換。
id表明了頁面。在跳轉時調用就可以轉到指定的界面中。
HTML5開發移動web應用—JQuery Mobile(1)