入门案例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" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入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" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<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>
