JqueryMobile是一個移動Web應用的框架.
官網地址:
http://www.jquerymobile.com
現在很多系統都需要支持移動辦公,通常能的web應用無法在手機或平板中取得很好的效果.
有些人選擇做成app,但這最少要支持android和ios.至少開發兩套代碼,故使用jquerymobile來做成web系統,即省事,客戶有能在移動端取得良好的體驗.
簡單效果如下:
實現過程
1、去JqueryMobel官網下載壓縮包，使用1.3.2版。解壓後如下：
2、在web工程的相應jsp頁面中引入相應的css和js，代碼如下：
3、從官網下載的包中包含大量的demos，查看裏面的代碼即可，這裏使用的代碼如下：
<div data-role="page" id="pageone">
<div data-role="header">
<h1>I am head</h1>
</div>
<div data-role="content">
<p>hello world</p>
</div>
<div data-role="footer">
<h1>I am foot</h1>
</div>
</div>解釋
1、第一個div中的data-role=“page”表示此DIV代表着一個頁面。其實一個html或jsp頁面中可以定義多個page，每一個page在實際訪問效果中以單獨的頁面顯示，下面的例子有詳細的解釋。
2、data-role="header"表示上方工具條。
3、data-role="footer"表示下面的部分。
示例2
效果如下：
點擊頁面的超鏈接之後：
在點擊超鏈接又回到第一個頁面。
代碼如下：
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>I am head</h1>
</div>
<div data-role="content">
<p>hello world</p>
<a href="#pagetwo">轉到頁面2</a>
</div>
<div data-role="footer">
<h1>I am foot</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>I am head</h1>
</div>
<div data-role="content">
<a href="#pageone">回到頁面1</a>
</div>
<div data-role="footer">
<h1>I am foot</h1>
</div>
</div>
</body>1、此時可以理解data-role="page"的作用了吧，代表着訪問時顯示的一個頁面。一個實際的HTML中可以有多個page。
2、page中的header、content、footer缺一不可，我之前準備只保留content。經試驗，樣式沒有加上，失敗。
示例3
將頁面顯示爲對話框。效果如下：
點擊“顯示對話框”後：
代碼如下：
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>I am head</h1>
</div>
<div data-role="content">
<p>hello world</p>
<a href="#pagetwo" data-rel="dialog">顯示對話框</a>
</div>
<div data-role="footer">
<h1>I am foot</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>I am head</h1>
</div>
<div data-role="content">
<p>這裏是對話框</p>
<a href="#pageone">回到頁面1</a>
</div>
<div data-role="footer">
<h1>I am foot</h1>
</div>
</div>
</body>1、跟例子2基本一樣，只是在第一個page的超鏈接中加入了data-rel="dialog"屬性即可。