tabbed-content.html 1.66 KB
<!DOCTYPE html>
<html>
	<head>
	<meta charset="GBK">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Navbar - jQuery Mobile Demos</title>
	<link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.0.min_wev8.css">
	<link rel="stylesheet" href="_assets/css/jqm-demos_wev8.css">
	<script src="js/jquery_wev8.js"></script>
	<script src="_assets/js/index_wev8.js"></script>
	<script src="js/jquery.mobile-1.4.0.min_wev8.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">
	<div data-demo-html="true">
		<div data-role="tabs">
			<div data-role="navbar">
				<ul>
			      <li><a href="#one" data-theme="a" data-ajax="false">one</a></li>
			      <li><a href="#two"  data-theme="a" data-ajax="false">two</a></li>
			      <li><a href="ajax-content.html"  data-theme="a" data-ajax="false">three</a></li>
			    </ul>
			</div>

			<div id="one" class="ui-content">
			<h1>First tab contents</h1>
			</div>
			<div id="two" class="ui-content">
				<ul data-role="listview">
				    <li><a href="#">Acura</a></li>
				    <li><a href="#">Audi</a></li>
				    <li><a href="#">BMW</a></li>
				    <li><a href="#">Cadillac</a></li>
				    <li><a href="#">Ferrari</a></li>
				</ul>
			</div>
		</div>
		<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
			<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
			<p>Copyright 2013 The jQuery Foundation</p>
		</div><!-- /footer -->
		
	</div>
</div><!-- /page -->
</body>
</html>