Xiaoqiang's HTML5 mobile development road (43) - JqueryMobile header, toolbar and tab bar navigation-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

黄舟

Feb 15, 2017 pm 01:18 PM

1. Header

1. Add header and footer

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

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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>
	
	
		

			第 2 页
            第 3 页
			第 4 页
            第 2 页
            第 3 页
			第 4 页
            第 2 页
            第 3 页
			第 4 页
            第 2 页
            第 3 页
			第 4 页
            第 2 页
            第 3 页
			第 4 页
            第 2 页
            第 3 页
			第 4 页
            第 2 页
            第 3 页
			第 4 页
            第 2 页
            第 3 页
			第 4 页
				
	
	<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>

Copy after login

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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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 of this Website

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