小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
生活随笔
收集整理的這篇文章主要介紹了
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、頁眉
1、添加頁眉和頁腳
<div data-role="header"><h1>第 1 頁</h1></div> <div data-role="footer"><h4>頁面腳注</h4></div>默認的頁眉在屏幕的頂部邊緣顯示，而且在在屏幕滾動時，頁眉會滑出屏幕之外，通過添加data-position屬性可以創建一個固定的頁眉 <div data-role="header" data-position="fixed"><h1>第 1 頁</h1></div> <div data-role="footer" data-position="fixed"><h4>頁面腳注</h4></div>可以使用date-theme屬性來調整頁眉的主題，默認主題是黑色data-theme="a"<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 應用程序</title> <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page"><div data-role="header" data-position="fixed"><h1>第 1 頁</h1></div><div data-role="content"> <ul data-role="listview"><li><a href="#page2">第 2 頁</a></li><li><a href="#page3">第 3 頁</a></li><li><a href="#page4">第 4 頁</a></li><li><a href="#page2">第 2 頁</a></li><li><a href="#page3">第 3 頁</a></li><li><a href="#page4">第 4 頁</a></li><li><a href="#page2">第 2 頁</a></li><li><a href="#page3">第 3 頁</a></li><li><a href="#page4">第 4 頁</a></li><li><a href="#page2">第 2 頁</a></li><li><a href="#page3">第 3 頁</a></li><li><a href="#page4">第 4 頁</a></li><li><a href="#page2">第 2 頁</a></li><li><a href="#page3">第 3 頁</a></li><li><a href="#page4">第 4 頁</a></li><li><a href="#page2">第 2 頁</a></li><li><a href="#page3">第 3 頁</a></li><li><a href="#page4">第 4 頁</a></li><li><a href="#page2">第 2 頁</a></li><li><a href="#page3">第 3 頁</a></li><li><a href="#page4">第 4 頁</a></li><li><a href="#page2">第 2 頁</a></li><li><a href="#page3">第 3 頁</a></li><li><a href="#page4">第 4 頁</a></li></ul> </div><div data-role="footer" data-position="fixed"><h4>頁面腳注</h4></div> </div><div data-role="page" id="page2"><div data-role="header"><h1>第 2 頁</h1></div><div data-role="content"> 內容 </div><div data-role="footer"><h4>頁面腳注</h4></div> </div><div data-role="page" id="page3"><div data-role="header"><h1>第 3 頁</h1></div><div data-role="content"> 內容 </div><div data-role="footer"><h4>頁面腳注</h4></div> </div><div data-role="page" id="page4"><div data-role="header"><h1>第 4 頁</h1></div><div data-role="content"> 內容 </div><div data-role="footer"><h4>頁面腳注</h4></div> </div></body> </html>在頁面容器中添加data-fullscreen="true"后點擊屏幕會出現頁眉頁腳，再次點擊會消失。
二、添加返回按鈕
<div data-role="header" data-position="fixed"><a href="#" data-icon="back">返回</a><h1>第 1 頁</h1><a href="#" data-icon="plus" data-iconpos="notext"/></div>左邊是文本圖標按鈕，右邊是純圖標按鈕。
三、添加分段工具欄
<div data-role="header" data-position="fixed"><a href="#" data-icon="back">返回</a><h1>第 1 頁</h1><a href="#" data-icon="plus" data-iconpos="notext"/><div data-role="controlgroup" data-type="horizontal" align="center" class="segment-control"><a href="#" data-role="button" class="ui-control-active">菜單一</a><a href="#" data-role="button" class="ui-control-inactive">菜單二</a><a href="#" data-role="button" class="ui-control-inactive">菜單三</a></div></div><style style="text/css">.segment-control{text-align:center;margin:0.2em;}.ui-control-active, .ui-control-inactive{border-style:solid; border-color:gray;}.ui-control-active{background:#BBB;}.ui-control-inactive{background:#DDD;} </style>四、標簽導航欄
<div data-role="footer" data-position="fixed"><div data-role="navbar"><ul><li><a href="#" data-icon="arrow-l">A</a></li><li><a href="#" data-icon="back">B</a></li><li><a href="#" data-icon="star">C</a></li><li><a href="#" data-icon="plus">D</a></li><li><a href="#" data-icon="arrow-r">E</a></li></ul></div></div>轉載于:https://www.cnblogs.com/lanzhi/p/6469105.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到骨灰罐是什么意思
- 下一篇： Win8 HTML5与JS编程学习笔记（