tabbar.html

<div data-page="tabbar" class="page" style="padding: 5px 9px;"><!--no-tabbar-->

	<!--HEADER開始-->
	<div class="navbar">
		<div class="navbar-inner">
			<div class="left">
				<a href="#" class="back link"><i class="icon icon-back"></i><span>上一頁</span></a>
			</div>
			<div class="center">
				tabbar
			</div>
			<div class="right">
				<a href="#" data-panel="right" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
			</div>
		</div>
	</div>
	<!--HEADER結束-->

	<!--要捲動的頁面區塊開始-->
	<div class="page-content">
	<style>
	
	</style>
	
		<div class="list-block">
			<ul>
				<li>
					<a href="#" class="item-link hide-tabbar">
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-f7"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">關閉tabbar</div>
							</div>
						</div>
					</a>
				</li>
				<li>
					<a href="#" class="item-link show-tabbar">
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-f7"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">打開tabbar</div>
							</div>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!--要捲動的頁面區塊開始-->
	
	<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2">
                <span class="badge bg-red">5</span>
            </i>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4">
                <span class="badge bg-green">15</span>
            </i>
        </a>
    </div>
</div>
  
</div>