Home >Web Front-end >H5 Tutorial >Xiaoqiang's HTML5 mobile development road (43) - JqueryMobile header, toolbar and tab bar navigation

Xiaoqiang's HTML5 mobile development road (43) - JqueryMobile header, toolbar and tab bar navigation

黄舟
黄舟Original
2017-02-15 13:18:301644browse

1. Header

1. Add header and footer

	<p data-role="header">
		<h1>第 1 页</h1>
	</p>
	<p data-role="footer">
		<h4>页面脚注</h4>
	</p>

The default header is displayed at the top edge of the screen, and the header will slide when the screen is scrolled. Outside the screen, you can create a fixed header by adding the data-position attribute

	<p data-role="header" data-position="fixed">
		<h1>第 1 页</h1>
	</p>
	<p data-role="footer" data-position="fixed">
		<h4>页面脚注</h4>
	</p>

You can use the date-theme attribute to adjust the theme of the header. The default theme is black data-theme="a"

 



jQuery Mobile Web 应用程序



 
 

<p data-role="header" data-position="fixed"> <h1>第 1 页</h1> </p>

<p data-role="footer" data-position="fixed"> <h4>页面脚注</h4> </p>

第 2 页

内容

<p data-role="footer"> <h4>页面脚注</h4> </p>

第 3 页

内容

<p data-role="footer"> <h4>页面脚注</h4> </p>

第 4 页

内容

<p data-role="footer"> <h4>页面脚注</h4> </p>


After adding data-fullscreen="true" to the page container, the header and footer will appear when you click on the screen, and they will disappear when you click again.

2. Add a return button

	<p data-role="header" data-position="fixed">
    	<a href="#" data-icon="back">返回</a>
		<h1>第 1 页</h1>
        <a href="#" data-icon="plus" data-iconpos="notext"/>
	</p>


##There is a text icon button on the left and a pure icon button on the right .

3. Add segmented toolbar

	<p data-role="header" data-position="fixed">
    	<a href="#" data-icon="back">返回</a>
		<h1>第 1 页</h1>
        <a href="#" data-icon="plus" data-iconpos="notext"/>
        <p 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>
        </p>
	</p>
<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>



##4. Tag navigation bar

	<p data-role="footer" data-position="fixed">
		<p 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>
        </p>
	</p>



The above is the content of Xiaoqiang’s HTML5 mobile development path (43) - JqueryMobile header, toolbar and tab bar navigation. For more related content, please Follow the PHP Chinese website (www.php.cn)!




Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn