不斷學習中，內容會根據進度不斷補充和調整，內容來自書籍，網路和本人實踐，如有錯誤歡迎指正！
1、模板結構1.1 jQuery Mobile單頁模板<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> //user-scalable=no 禁用縮放
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<!--<script src="custom-srcipt-js"></script>--> //自訂指令碼位置
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content">
<p>你好</p> //注意：html檔案的編碼格式要為utf-8，否則有中文會亂碼
</div>
<div data-role="footer" data-position="fixed"> //預設頁尾在內容之後，添加此句後定位到螢幕底部
<h4>Page Footer</h4>
</div>
<script type="text/javascript">
/*Page specific scripts here*/
</script>
</div>
</body>
</html>
1.2 多頁模板<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">/* Shared scripts for all internal and ajax-loaded pages */</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- First Page -->
<div data-role="page" id="home" data-title="Welcome">
<div data-role="header">
<h1>Multi-Page</h1>
</div>
<div data-role="content">
<a href="#contact-info" data-role="button">Contact Us</a>
</div>
<script type="text/javascript"> //多頁面文檔內部javascript
/* Page specific scripts here. */
</script>
</div>
<!-- Second Page -->
<div data-role="page" id="contact-info" data-title="Contacts">
<div data-role="header">
<h1>Contact Us</h1>
</div>
<div data-role="content">
Contact information...
</div>
</div>
（1）每個頁面必須包含唯一id
（2）最初顯示多個頁面時，只有第一個頁面得到增強並顯示
（3）連結到一個內部頁面時，必須通過頁面id來引用，href="#contact",載入頁面的地址multi-page.html#contact
（4）多頁面文檔內部的javascript不能被其他頁面訪問
（5）父文檔head標籤內聲明的所有指令碼，都可以被內部頁面和通過Ajax載入的頁面訪問
2、頁面切換和過度2.1 切換分類（1）一個多頁文檔中，一個內部頁到另一內部頁（Ajax導航）
根據#id <a href="#next">
（2）同一個域範圍內，一個單頁文檔切換到另一單頁文檔（Ajax導航）
<a href="otherDocument.html">Go to next page</a>
（3）當串連到一個多頁面文檔時，必須為其連結添加rel="external"（HTTP）
<a href="multi-page.html" rel="external">Home</a>
（4）外部絕對位址,串連到另一個域(HTTP)
<a href="www.mobileweb.com" data-rel="external"></a>
<a href="www.mobileweb.com" target="_blank"></a>
（5）開啟dailog
<a href="confirmtion.html" data-rel="dialog">Open Dialog</a>
<a href="confirmtion.html" data-role="dialog">Open Dialog</a>
confirmtion.html
<div data-role="page" id="confirm">
注意：如果要開啟一個對話方塊頁面，連結寫data-role="dialog，但是具體的confirmtion.html一定要寫data-role="page"而不是data-role="dailog"，否則彈出的對話方塊頁面中類似綁定事件都將無效！！！
</div>
（6）返回到上一頁面
<a href="back.html" data-direction="reverse">Back</a>
（7）行動裝置 App特殊連結，URI
電話
<a href="tel:+1800229933">Call us free!</a>
Video and VoIP Calls
<a href="facetime:101010">Call me using Facetime</a>
<a href="skype:skype_user?call">Call us using Skype</a>
<a href="mailto:info@mobilexweb.com">Mail us</a>
<a href="mailto:info@mobilexweb.com?subject=Contact%20from%20mobile">Mail us</a>
<a href="mailto:info@mobilexweb.com?subject=Contact&body=This%20is%20the%20body">Mail us</a>
2.2 頁面間過度<a href="otherDocument.html" data-transition="slide">Go to next page</a>
slide slideup slidedown pop fade flip |
The default right-to-left animation. Bottom-to-top animation, mostly used for modal pages. Top-to-bottom animation. The new page will grow from a small point in the middle to a full-screen page. A cross-fade animation between old and new pages. A 2D or 3D rotation animation. 3D is available only on some devices, such as iOS devices. On other devices, such as those that are Android-based, this transition renders a 2D rotation that may not be the effect you really want. |
（1）預設模式（Default：Inline mode）
當頁面content內容超過一屏時，滾動頁面時，頁首和頁尾將隱藏。
<div data-role="header">
<h1>Default</h1>
</div>
（2）固定模式（Fixed）
<div data-role="header" data-position="fixed">
<h1>Fixed</h1>
</div>
<div data-role="footer" data-position="fixed">
</div>
頁首和頁尾位於頂部和底部，位置不變，否則當內容較少是，頁尾緊隨內容之後顯示
（3）全螢幕模式（FullScreen）適用於瀏覽圖片，電子書應用
<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>Fixed</h1>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
頁首和頁尾基於響應來出現和消失
3.2 添加按鈕（通用於頁首和頁尾）（1）只帶有文本按鈕
<a href="#">Done</a>
（2）只帶有表徵圖的按鈕
<a href="#" data-icon="plus" data-iconpos="notext"></a>
（3）既有文本又有表徵圖的按鈕
<a href="#" data-icon="plus" >Done</a>
3.3頁首（1）修改按鈕位置，預設左側對齊(class="ui-btn-left")，可修改到右側對齊
<a href="#" data-icon="plus" class="ui-btn-right">Done</a>
（2）添加回退按鈕
a)在頁面容器添加data-auto-back-btn="true",為某個特定頁面添加回退按鈕
<div data-role="page" data-auto-back-btn="true" data-back-btn-text="Pervious" data-back-btn-theme="e">
b)在綁定mobileinit選項時，全域啟動回退按鈕
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.option.addBackBtn=true;
$.mobile.page.prototype.option.backBtnText="Previous"; //回退按鈕顯示的文字
$.mobile.page.prototype.option.backBtnTheme="b";
});
如果在全域啟用了回退按鈕，可通過在頁首中添加data-auto-back-btn="false"禁用特定頁面回退按鈕
c)回退連結
<a href="home.html" data-rel="back" data-role="button"> Go Back</a>
3.4 頁尾（1）添加永久導航條
ui-btn-active標明載入頁面時選中的項，如果不寫預設是ui-btn-inactive，ui-state-persist表示選中項保持選中狀態
<div data-role="footer" data-id="main" data-position="fixed" data-theme="b"> //建立永久導航條，避免頁面轉換期間閃爍，需要唯一data-id="main"
<div data-role="navbar"> //標記為導航條
<ul>
<li><a href="#" data-icon="star" class="ui-btn-active ui-state-persist">天氣</a></li>
<li><a href="#" data-icon="info" >趨勢</a></li>
<li><a href="setup.html" data-icon="gear" >城市</a></li>
<li><a href="#exit" data-icon="delete" data-rel="dialog" data-transition="pop">退出</a></li>
</ul>
</div>
</div>
（2）帶自訂表徵圖導航條
<!-- tab bar with custom icons -->
<div data-role="footer" class="ui-navbar-custom" data-position="fixed">
<div data-role="navbar" class="ui-navbar-custom">
<ul>
<li><a href="#" id="home" data-icon="custom">Home</a></li>
<li><a href="#" id="movies" data-icon="custom" class="ui-btn-active">Movies</a></li>
<li><a href="#" id="theatres" data-icon="custom">Theatres</a></li>
</ul>
</div>
</div>
<style>
.ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }
.ui-navbar-custom .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#home .ui-icon { background: url(../images/53-house-w.png) 50% 50% no-repeat; background-size: 22px 20px; }
#movies .ui-icon { background: url(../images/107-widescreen-w.png) 50% 50% no-repeat; background-size: 25px 17px; }
#theatres .ui-icon { background: url(../images/15-tags-w.png) 50% 50% no-repeat; background-size: 20px 20px; }
</style>
4、Main roles available in jQuery Mobile 1.0data-role =""
Role |
Description |
page header content footer navbar button controlgroup collapsible collapsible-set fieldcontain listview dialog slider nojs |
Defines a page, the unit that jQuery Mobile uses to show content Header of a page Content of a page Footer of a page Defines a navigation bar, typically inside a header Renders a visual button Renders a component Collapsible panel of content inside a page
Group of collapsible panels (accordion) Container for form fields Content of multiple items as a list Dialog page Visual slider for Boolean values Element that will be hidden on jQuery Mobile’s compatible browsers |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
