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

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

黄舟

Release： 2017-02-15 13:18:30

Original

1591 people have browsed it

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