當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

發(fā)布時間：2023/11/29 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、頁眉

1、添加頁眉和頁腳

<div data-role="header"><h1>第 1 頁</h1></div> <div data-role="footer"><h4>頁面腳注</h4></div>默認的頁眉在屏幕的頂部邊緣顯示，而且在在屏幕滾動時，頁眉會滑出屏幕之外，通過添加data-position屬性可以創(chuàng)建一個固定的頁眉 <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"后點擊屏幕會出現(xiàn)頁眉頁腳，再次點擊會消失。

二、添加返回按鈕

左邊是文本圖標按鈕，右邊是純圖標按鈕。

三、添加分段工具欄

<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>

四、標簽導航欄

轉載于:https://www.cnblogs.com/lanzhi/p/6469105.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。