HTML5开发移动web应用—JQuery Mobile(1)
生活随笔
收集整理的這篇文章主要介紹了
HTML5开发移动web应用—JQuery Mobile(1)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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> 根據上面的例子，我們首先研究一下，基本的JQuery Mobile框架的使用方法。
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)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue init webpack命令出错
- 下一篇： MyChrome制作Chrome浏览器便