Back
Overview | Project
TAU UI Components / components / navigationelements / tabs /

tabs_with_icon_scroll.html

<!DOCTYPE html>
<html>

<head>
	<meta content="width=device-width, user-scalable=no" name="viewport" />
	<link href="../../../lib/tau/mobile/theme/default/tau.css" rel="stylesheet" />
	<link href="../../../css/style.css" rel="stylesheet" />
	<script data-build-remove="false" src="../../../lib/tau/mobile/js/tau.js">
	</script>
</head>

<body>
	<div class="ui-page">
		<div class="ui-tabs">
			<div class="ui-tabbar">
				<ul>
					<li class="ui-li-anchor">
						<a class="ui-tab-active" data-icon="naviframe-call" href="#">
							Tab 1
						</a>
					</li>
					<li class="ui-li-anchor">
						<a data-icon="naviframe-favorite" href="#">
							Tab 2
						</a>
					</li>
					<li class="ui-li-anchor">
						<a data-icon="naviframe-search" href="#">
							Tab 3
						</a>
					</li>
					<li class="ui-li-anchor">
						<a data-icon="naviframe-call" href="#">
							Tab 4
						</a>
					</li>
					<li class="ui-li-anchor">
						<a data-icon="naviframe-favorite" href="#">
							Tab 5
						</a>
					</li>
					<li class="ui-li-anchor">
						<a data-icon="naviframe-search" href="#">
							Tab 6
						</a>
					</li>
					<li class="ui-li-anchor">
						<a data-icon="naviframe-call" href="#">
							Tab 7
						</a>
					</li>
				</ul>
			</div>
			<div class="ui-section-changer">
				<div>
					<section class="ui-section-active">
						<ul class="ui-listview">
							<li class="ui-li-anchor">
								<a href="#">
									List 1
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 2
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 3
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 4
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 5
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 6
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 7
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 8
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 9
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 10
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 11
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 12
								</a>
							</li>
						</ul>
					</section>
					<section>
						<ul class="ui-listview">
							<li class="ui-li-anchor">
								<a href="#">
									List 1
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 2
								</a>
							</li>
						</ul>
					</section>
					<section>
						<ul class="ui-listview">
							<li class="ui-li-anchor">
								<a href="#">
									List 1
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 2
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 3
								</a>
							</li>
						</ul>
					</section>
					<section>
						<ul class="ui-listview">
							<li class="ui-li-anchor">
								<a href="#">
									List 1
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 2
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 3
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 4
								</a>
							</li>
						</ul>
					</section>
					<section>
						<ul class="ui-listview">
							<li class="ui-li-anchor">
								<a href="#">
									List 1
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 2
								</a>
							</li>
						</ul>
					</section>
					<section>
						<ul class="ui-listview">
							<li class="ui-li-anchor">
								<a href="#">
									List 1
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 2
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 3
								</a>
							</li>
						</ul>
					</section>
					<section>
						<ul class="ui-listview">
							<li class="ui-li-anchor">
								<a href="#">
									List 1
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 2
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 3
								</a>
							</li>
							<li class="ui-li-anchor">
								<a href="#">
									List 4
								</a>
							</li>
						</ul>
					</section>
				</div>
			</div>
		</div>
	</div>
</body>

</html>