mobile导航栏
1.多页面只有一个页头与页尾，单独设置在页内容外面使用jquery加载；data-theme默认有两个主体样式a与b,a是浅灰色，b是深兰色；
data-position有三种a) inline：默认，页眉页脚与内容位于行内；fixed:页眉页脚会留在页面的顶部与尾部；
data-position="fixed" + data-fullscreen="true" 两则放一起单击页面页眉与页脚会在显示与隐藏之间切换，并页眉与页脚伴有透明效果。
data-tap-toggle="false"解决页眉与页脚点击时会有轻微的抖动，及页眉页脚消失的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile-网页基本结构</title>
<script type="text/javascript" src="../js/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.5.js" ></script>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
img{
width:100%,;
max-width:1200px;
margin:0;
padding:0px;
}
</style>
<script>
$(function(){
$("[data-role='header'],[data-role='footer']").toolbar();
})
</script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>加拿大旅游</h1>
</div>
<div id="home" data-role="page">
<div class="ui-content" role="main">
<ul data-role="listview">
<li><a href="#page2">多伦多</a></li>
<li><a href="#page3">尼亚加拉瀑布</a></li>
</ul>
</div>
</div>
<div id="page2" data-role="page">
<div class="ui-content" role="main">
<img src="../images/3.jpg" alt="多伦多">
<div>多伦多</div>
<a href="#home" data-role="button">返回主页</a>
</div>
<div id="page3" data-role="page">
<div class="ui-content" role="main">
<img src="../images/3.jpg" alt="尼亚加拉瀑布">
<div>尼亚加拉瀑布</div>
<a href="#home" data-role="button">返回主页</a>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="b">
<h6>页尾</h6>
</div>
</body>
</html>
2.页眉页脚上的按钮用class="ui-btn-right”放到右边，<h1>标题中加图标可以显示在页眉
<div id="home" data-role="page"> <div data-role="header" data-position="fixed" data-fullscreen="true"> <a href="#" class="ui-btn-right">按钮</a> <h1><img src="../images/icons-png/action-black.png" alt=""> <span>加拿大旅游</span></h1> </div> <div class="ui-content" role="main"> <ul data-role="listview"> <li><a href="#page2">多伦多</a></li> <li><a href="#page3">尼亚加拉瀑布</a></li> </ul> </div> <div data-role="footer" data-position="fixed" data-tap-toggle="false"> <a href="#">按钮</a> </div> </div>
3.导航栏data-role="navbar", class="ui-btn-active ui-state-persist" 前面一个表示当前激活状态，后一个页面切换时保持状态不变。
data-icon显示的图标，data-iconpos图标显示的位置，图标默认显示在上方。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile-网页基本结构</title>
<script type="text/javascript" src="../js/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.5.js" ></script>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="p1" data-role="page">
<div data-role="header" data-position="fixed">
<h1><img src="../images/icons-png/action-black.png" alt="">
<span>导航按钮中的图标</span></h1>
<div data-role="navbar">
<ul>
<li><a href="#p1" data-icon="home" class="ui-btn-active ui-state-persist">主页</a></li>
<li><a href="#p2" data-icon="shop">购物</a></li>
<li><a href="#p3" data-icon="user">用户</a></li>
</ul>
</div>
</div>
<div class="ui-content" role="main">
<div>主页</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>页尾</h1>
<div data-role="navbar" data-iconpos="right">
<ul>
<li><a href="#" data-icon="phone" class="ui-btn-active">联系</a></li>
<li><a href="#" data-icon="calendar">日历</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
</div>
<div id="p2" data-role="page">
<div data-role="header" data-position="fixed">
<h1><img src="../images/icons-png/action-black.png" alt="">
<span>导航按钮中的图标</span></h1>
<div data-role="navbar">
<ul>
<li><a href="#p1" data-icon="home">主页</a></li>
<li><a href="#p2" data-icon="shop" class="ui-btn-active ui-state-persist">>购物</a></li>
<li><a href="#p3" data-icon="user">用户</a></li>
</ul>
</div>
</div>
<div class="ui-content" role="main">
<div>第二页</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>页尾</h1>
<div data-role="navbar" data-iconpos="right">
<ul>
<li><a href="#" data-icon="phone" class="ui-btn-active">联系</a></li>
<li><a href="#" data-icon="calendar">日历</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
</div>
<div id="p3" data-role="page">
<div data-role="header" data-position="fixed">
<h1><img src="../images/icons-png/action-black.png" alt="">
<span>导航按钮中的图标</span></h1>
<div data-role="navbar">
<ul>
<li><a href="#p1" data-icon="home">主页</a></li>
<li><a href="#p2" data-icon="shop">购物</a></li>
<li><a href="#p3" data-icon="user" class="ui-btn-active ui-state-persist">用户</a></li>
</ul>
</div>
</div>
<div class="ui-content" role="main">
<div>第三页</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>页尾</h1>
<div data-role="navbar" data-iconpos="right">
<ul>
<li><a href="#" data-icon="phone" class="ui-btn-active">联系</a></li>
<li><a href="#" data-icon="calendar">日历</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号