入門案例1
<!-- jQuery Mobile依賴HTML5 data-*屬性來支持各種UI元素,過渡和頁面結構.
不支持他們的瀏覽器將以靜默的方式棄用他們 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入jQuery Mobile樣式 -->
<link rel="stylesheet" >
<!-- 引入jQuery庫 -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- 引入jQuery-Mobile樣式 -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 在瀏覽器中顯示的頁面 -->
<div data-role="page">
<!-- 在頁面頂部創建的工具條(通常用于標題或者搜索按鈕) -->
<div data-role="header">
<h1>歡迎來到我的主頁</h1>
</div>
<!-- 定義了頁面的內容,比如文本,圖片,表單,按鈕等. -->
<!-- ui-content類用于在頁面添加內邊距和外邊距 -->
<div data-role="main" class="ui-content">
<p>我現在是一個移動端開發者!!</p>
</div>
<!-- 用于創建頁面底部工具條 -->
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
案例2
<!-- 使用jQuery Mobile,你可以在單個html文件中創建多個不同的頁面,你可以使用不同的href屬性來區分使用
同一個唯一的id的頁面 -->
<!-- 需要注意的是,當web應用有大量的內容(文本,圖片,腳本等)將會嚴重影響加載時間,如果你不想使用內頁鏈接可以
使用外部文件:
<a href="external.html">訪問外部文件</a> -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 第一個頁面,通過錨鏈接指向第二個鏈接 -->
<div data-role="page" id="pageone">
<div data-role="header">
<h1>歡迎來到我的主頁</h1>
</div>
<div data-role="main" class="ui-content">
<p>歡迎! 點擊以下鏈接跳轉到第二個頁面。 </p>
<a href="#pagetwo">跳轉到第二個頁面</a>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
<!-- 第二個頁面,通過錨鏈接指向第二個鏈接 -->
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>歡迎來到我的主頁</h1>
</div>
<div data-role="main" class="ui-content">
<p>這是第二個頁面。點擊以下鏈接跳轉到第一個頁面。</p>
<a href="#pageone">跳轉到第一個頁面</a>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
jquery單頁多應用的開發
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>jquery mobile</title>
<link rel="stylesheet" href="./js/jquery.mobile-1.4.5.min.css">
<!--<script src="./js/jquery-3.1.0.min.js" ></script>-->
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script>
<script src="./js/jquery.mobile-1.4.5.min.js" ></script>
</head>
<body>
<div id="pageone" data-role="page">
<div data-role="header">
<h1>第一個應用</h1>
</div>
<div data-role="main" class="ui-content">寫一個單頁多應用的webapp </div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大廳</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">個人</a> </li>
</ul>
</div>
</div>
</div>
<div id="pagetwo" data-role="page">
<div data-role="header">
<h1>第2個應用</h1>
</div>
<div data-role="main" class="ui-content">寫一個單頁多應用的webapp </div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大廳</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">個人</a> </li>
</ul>
</div>
</div>
</div>
<div id="pagethree" data-role="page">
<div data-role="header">
<h1>第3個應用</h1>
</div>
<div data-role="main" class="ui-content">寫一個單頁多應用的webapp </div>
<div data-role="footer" data-position="fixed"> <div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大廳</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">個人</a> </li>
</ul>
</div>
</div>
</div>
<div id="pagefour" data-role="page">
<div data-role="header">
<h1>第4個應用</h1>
</div>
<div data-role="main" class="ui-content">寫一個單頁多應用的webapp </div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大廳</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">個人</a> </li>
</ul>
</div>
</div>
</div>
</body>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
