mui 基于tabbar的再次封装

界面图：

相关代码：

TabBar.js

function tabbar() {
	this.subpages = []; //页面的html
	this.tabBarTitles = []; //标题名
	this.tabBarSelectImages = []; //选中的图片
	this.tabBarUnSelectImages = []; //未选中的图片
	this.tabBarSelectTextColor = []; //选中的文本颜色
	this.tabBarUnSelectTextColor = []; //未选中的文本颜色
	this.defaultSelectIndex = 0; //默认选中的索引
	var subpage_style = {
		top: '0px',
		bottom: '51px'
	};
	var aniShow = {};
	var aArr = []; //a标签数组
	var imgArr = []; //img标签数组
	var labelSpanArr = []; //span标签数组
	
	this.init = function() { //添加视图
		var nav = document.querySelector("nav");
		for(var i = 0; i < tabbar.subpages.length; i++) {
			var a = document.createElement("a");
			a.className = "mui-tab-item mui-active";
		    a.href = tabbar.subpages[i];
			a.id = i;
			aArr.push(a);
			nav.appendChild(a);
			
			var span = document.createElement("span");
			span.className = "mui-icon";
		    	var img = document.createElement("img");
		    img.width = "20";
		    img.height = "20";
		    	if(i == tabbar.defaultSelectIndex) {
		    		img.src = tabbar.tabBarSelectImages[i];
			}else {
		    		img.src = tabbar.tabBarUnSelectImages[i];
			}
			imgArr.push(img);
			span.appendChild(img);
			a.appendChild(span);

			var span2 = document.createElement("span");
			span2.className = "mui-tab-label";
			span2.innerHTML = tabbar.tabBarTitles[i];
			if(i == tabbar.defaultSelectIndex) {
				span2.style.color = tabbar.tabBarSelectTextColor[i];
			}else {
				span2.style.color = tabbar.tabBarUnSelectTextColor[i];
			}
			labelSpanArr.push(span2);
			a.appendChild(span2);
		}
	}

	this.showTabBar = function() {
		//创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for(var i = 0; i < tabbar.subpages.length; i++) {
				var temp = {};
				var sub = plus.webview.create(tabbar.subpages[i], tabbar.subpages[i], subpage_style);
				if(i == tabbar.defaultSelectIndex) {
					temp[tabbar.subpages[i]] = "true";
					mui.extend(aniShow, temp);
				} else {
					sub.hide();
				}
				self.append(sub);
			}
		});
		//当前激活选项
		var activeTab = tabbar.defaultSelectIndex;
		//选项卡点击事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			var id = this.getAttribute('id');
			if(targetTab == id) {
				return;
			}
			for (var i=0; i<labelSpanArr.length; i++) {
				var label = labelSpanArr[i];
				label.style.color = tabbar.tabBarUnSelectTextColor[i];
				var img = imgArr[i];
				img.src = tabbar.tabBarUnSelectImages[i];
			}
			labelSpanArr[id].style.color = tabbar.tabBarSelectTextColor[id];
			imgArr[id].src = tabbar.tabBarSelectImages[id];

			//显示目标选项卡
			//若为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 = id;
		});
	}
}

使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/mui.min.js"></script>
		<script src="libs/TabBar.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<nav id="nav" class="mui-bar mui-bar-tab" style="background:black;">
		</nav>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			var tabbar = new tabbar();
			tabbar.subpages = ['swiper.html', 'tab-webview-subpage-about.html', 'tab-webview-subpage-setting.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html'];
			tabbar.tabBarSelectTextColor = ['blue', 'blue', 'blue', 'blue', 'blue'];
			tabbar.tabBarUnSelectTextColor = ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF'];
			tabbar.tabBarTitles = ['上下翻页', '首要', '消息', '通讯录', '设置'];
			tabbar.tabBarSelectImages = ['images/live_icon_s.png', 'images/chart_icon_s.png', 'images/map_icon_s.png', 'images/up_data_s.png', 'images/up_data_s.png'];
			tabbar.tabBarUnSelectImages = ['images/live_icon_u.png', 'images/chart_icon_u.png', 'images/map_icon_u.png', 'images/updata_icon_u.png', 'images/updata_icon_u.png'];
			tabbar.defaultSelectIndex = 2;
			tabbar.init();
			tabbar.showTabBar();
		</script>
	</body>
</html>

mui 基于tabbar的再次封装

猜你喜欢