mui tab bar 顶部+底部

底部选项卡+div模式

        通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中， 若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；

核心代码：

<nav class="mui-bar mui-bar-tab">
	<a class="mui-tab-item mui-active" href="#tabbar">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-chat">
		<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
		<span class="mui-tab-label">消息</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-contact">
		<span class="mui-icon mui-icon-contact"></span>
		<span class="mui-tab-label">通讯录</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-map">
		<span class="mui-icon mui-icon-gear"></span>
		<span class="mui-tab-label">设置</span>
	</a>
</nav>

<div class="mui-content">
	<div id="tabbar" class="mui-control-content mui-active">
	<div class="title">这是div模式选项卡中的第1个子页面.</div>
	<div class="title">何谓div模式的选项卡？
		其实就是通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；</div>
	<div class="title">
		这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，
		若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；
		因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；</div>
	</div>
</div>

底部选项卡+二级菜单

        操作方式类似与上一种，只是在底部选项卡的基础上延伸出二级菜单

核心代码：

<nav class="mui-bar mui-bar-tab ">
	<a class="mui-tab-item" href="#Popover_0">产品</a>
	<a class="mui-tab-item" href="#Popover_1">方案</a>
	<a class="mui-tab-item" href="#Popover_2">新闻</a>
</nav>
<div class="mui-content">
	<div class="mui-content-padded">
		<p style="text-indent: 22px;">这是包含二级菜单的底部选项卡示例，点击底部菜单，会展开显示对应的二级菜单。</p>
	</div>
</div>

<div id="Popover_0" class="mui-popover mui-bar-popover">
	<div class="mui-popover-arrow"></div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell"><a href="#">iOS</a>
			</li>
			<li class="mui-table-view-cell"><a href="#">Android</a>
			</li>
			<li class="mui-table-view-cell"><a href="#">HTML5</a>
			</li>
		</ul>
	</div>
</div>

       

        综合上述两种模式，如果将内容全部作为div放置于同一个webview中，如果内容较多会造成页面卡顿，甚至卡死崩溃。综合PullRefresh的方法，根据实际内容数据可以接入多个webview分别展示内容区域，而将tab bar ,nav bar ,off canvas 作为外部container的容器部件。

<script type="text/javascript" charset="utf-8">
	//mui初始化
	mui.init();
	var subpages = ['first.html', 'second.html', 'third.html', 'fourth.html'];
	var subpage_style = {
		top: '45px',
		bottom: '51px'
	};
			
	var aniShow = {};
			
	//创建子页面，首个选项卡页面显示，其它均隐藏；
	mui.plusReady(function() {
		var self = plus.webview.currentWebview();
		for (var i = 0; i < 4; i++) {
		        var temp = {};
			var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                        <!--除去首页，其余页面全都隐藏-->
                        if (i > 0) {
				sub.hide();
			}else{
				temp[subpages[i]] = "true";
				mui.extend(aniShow,temp);
			}
			self.append(sub);
		}
	});

        //当前**选项
	var activeTab = subpages[0];
	var title = document.getElementById("title");
	//选项卡点击事件
	mui('.mui-bar-tab').on('tap', 'a', function(e) {
	    var targetTab = this.getAttribute('href');
	    if (targetTab == activeTab) {
		return;
	    }
	    //更换标题
	    title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
	    //显示目标选项卡
	    //若为iOS平台或非首次显示，则直接显示
	    if(mui.os.ios||aniShow[targetTab]){
		plus.webview.show(targetTab);
	    }else{
	    //否则，使用fade-in动画，且保存变量
		var temp = {};
		temp[targetTab] = "true";
		mui.extend(aniShow,temp);
		plus.webview.show(targetTab,"fade-in",300);
	    }
	    //隐藏当前;
	    plus.webview.hide(activeTab);
	    /更改当前活跃的选项卡
	    activeTab = targetTab;
	});

        //自定义事件，模拟点击“首页选项卡”
	document.addEventListener('gohome', function() {
		var defaultTab = document.getElementById("defaultTab");
		//模拟首页点击
		mui.trigger(defaultTab, 'tap');
		//切换选项卡高亮
		var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
		if (defaultTab !== current) {
			current.classList.remove('mui-active');
			defaultTab.classList.add('mui-active');
		}
	});
</script>

顶部选项卡+div模式

核心代码：

<div id="segmentedControl" class="mui-segmented-control">
	<a class="mui-control-item mui-active" href="#item1">待办公文（8）</a>
	<a class="mui-control-item" href="#item2">已办公文</a>
	<a class="mui-control-item" href="#item3">全部公文</a>
</div>

<div id="item1" class="mui-control-content mui-active">
	<div id="scroll" class="mui-scroll-wrapper">
		<div class="mui-scroll">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					第一个选项卡子项-1
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-2
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-3
				</li>
								
			</ul>
		</div>
	</div>
</div>

顶部选项卡+可左右拖动(div)

核心代码：

<div id="slider" class="mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item" href="#item1mobile">
		        待办公文
		</a>
		<a class="mui-control-item" href="#item2mobile">
			已办公文
		</a>
		<a class="mui-control-item" href="#item3mobile">
			全部公文
		</a>
	</div>
        <!--选中时的下划线条-->
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
        <!--对应菜单的滑动选择内容-->
        <div class="mui-slider-group">
		<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
			<div id="scroll1" class="mui-scroll-wrapper">
				<div class="mui-scroll">
				       <ul class="mui-table-view">
						<li class="mui-table-view-cell">
							第一个选项卡子项-1
						</li>
						<li class="mui-table-view-cell">
							第一个选项卡子项-2
						</li>
						<li class="mui-table-view-cell">
							第一个选项卡子项-3
						</li>
									
					</ul>
				  </div>
			  </div>
		  </div>	
	</div>
</div>

左侧选项卡+div模式

核心代码：

<div class="mui-content mui-row mui-fullscreen">
	<div class="mui-col-xs-3">
		<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
		</div>
	</div>
	<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
		<div id="item1" class="mui-control-content mui-active">
		</div>
		<div id="item2" class="mui-control-content">
		</div>
		<div id="item3" class="mui-control-content">
		</div>
	</div>
</div>

项目源码在HBuilder中的mui官方示例demo中都有。