乔军
乔军
  • 发布:2015-12-16 14:10
  • 更新:2015-12-16 14:10
  • 阅读:4427

使用tab底部菜单实现切换,并且代码不放在不同的html文件里的解决思路

分类:MUI
mui

底部菜单

	<nav id="bottomnav" class="mui-bar mui-bar-tab">  
			<a id="home"class="mui-tab-item mui-active">  
				<span class="mui-icon mui-icon-home"></span>  
				<span class="mui-tab-label">首页</span>  
			</a>  
			<a id='resource' class="mui-tab-item">  
				<span class="mui-icon mui-icon-image"></span>  
				<span class="mui-tab-label">教学资源</span>  
			</a>  
			<a id="center" class="mui-tab-item" href="#tabbar-with-contact">  
				<span class="mui-icon mui-icon-contact"></span>  
				<span class="mui-tab-label">个人中心</span>  
			</a>  
		</nav>

直接通过opWindow发放打开

document.getElementById('resource').addEventListener('tap',function(){  
				mui.openWindow({  
						url: "resource.html",  
						id: "resource",  
						show: {  
							aniShow: 'zoom-fade-out',  
							duration: 300  
						}  
					});  
  
			});

但是这样有个问题就是侧滑菜单总是被遮住,大家都是如何实现底部侧滑菜单的显示的,我的是web系统,webview应该不能用!

index.html

<!DOCTYPE html>  
<html>  
  
	<head>  
		<meta charset="utf-8">  
		<title>Hello MUI</title>  
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
		<meta name="apple-mobile-web-app-capable" content="yes">  
		<meta name="apple-mobile-web-app-status-bar-style" content="black">  
  
		<link rel="stylesheet" href="css/mui.css">  
		<style>  
			#menu {  
				background: #fff;  
			}  
			  
			#menu li {  
				border: 0;  
				padding: 5px 0 5px 0;  
			}  
			  
			#menu a {  
				padding: 5px 0 0 0;  
				;  
			}  
			  
			#menu a span {  
				padding: 11px;  
				border-radius: 35px;  
				;  
			}  
			  
			#menu a div {  
				font-size: 13px;  
				;  
			}  
			  
			.goodstdl {  
				display: block;  
				float: left;  
				width: 50%;  
				height: 70px;  
			}  
			  
			.goodstdl .goodstdimg {  
				width: 50px;  
				height: 50px;  
			}  
			  
			.goodstdl .goodstdimg img {  
				width: 50px;  
				height: 50px;  
				border-radius: 5px;  
			}  
			  
			.goodstdl .goodstdtxt {  
				font-size: 11px;  
				line-height: 25px;  
				width: 80px;  
				height: 50px;  
				position: absolute;  
				top: 7px;  
				left: 70px;  
				color: #ACACB4;  
			}  
			  
			.goodstdr {  
				display: block;  
				float: left;  
				width: 50%;  
				height: 70px;  
			}  
			  
			.goodstdr .goodstdimg {  
				width: 50px;  
				height: 50px;  
				position: absolute;  
				top: 7px;  
				right: 85px;  
			}  
			  
			.goodstdr .goodstdimg img {  
				width: 50px;  
				height: 50px;  
				border-radius: 5px;  
			}  
			  
			.goodstdr .goodstdtxt {  
				font-size: 11px;  
				line-height: 25px;  
				width: 80px;  
				height: 50px;  
				position: absolute;  
				top: 7px;  
				right: 0px;  
				color: #ACACB4;  
			}  
			  
			.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {  
				padding-left: 23px;  
			}  
			  
			.mui-table-view-cell.mui-collapse .mui-table-view {  
				margin-bottom: 1px;  
			}  
		</style>  
	</head>  
  
	<body>  
		<header class="mui-bar mui-bar-nav">  
			<a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>  
			<h1 class="mui-title">小树苗幼儿园</h1>  
		</header>  
		<nav id="bottomnav" class="mui-bar mui-bar-tab">  
			<a id="home"class="mui-tab-item mui-active">  
				<span class="mui-icon mui-icon-home"></span>  
				<span class="mui-tab-label">首页</span>  
			</a>  
			<a id='resource' class="mui-tab-item">  
				<span class="mui-icon mui-icon-image"></span>  
				<span class="mui-tab-label">教学资源</span>  
			</a>  
			<a id="center" class="mui-tab-item" href="#tabbar-with-contact">  
				<span class="mui-icon mui-icon-contact"></span>  
				<span class="mui-tab-label">个人中心</span>  
			</a>  
		</nav>  
		<div class="mui-content">  
			<!--slider-->  
			<div id="slider" class="mui-slider" style="height:230px;">  
				<div class="mui-slider-group mui-slider-loop">  
					<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->  
					<div class="mui-slider-item mui-slider-item-duplicate">  
						<a href="#">  
							<img src="images/111.jpg">  
						</a>  
					</div>  
					<!-- 第一张 -->  
					<div class="mui-slider-item">  
						<a href="#">  
							<img src="images/222.jpg">  
						</a>  
					</div>  
					<!-- 第二张 -->  
					<div class="mui-slider-item">  
						<a href="#">  
							<img src="images/111.jpg">  
						</a>  
					</div>  
					<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->  
					<div class="mui-slider-item mui-slider-item-duplicate">  
						<a href="#">  
							<img src="images/222.jpg">  
						</a>  
					</div>  
				</div>  
				<div class="mui-slider-indicator">  
					<div class="mui-indicator mui-active"></div>  
					<div class="mui-indicator"></div>  
				</div>  
			</div>  
			<!--menu-->  
			<ul id="menu" class="mui-table-view mui-grid-view mui-grid-9">  
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">  
					<a href="notice.html">  
						<span class="iconfont icon-mail5" style="background:#3498DB;color:#FFF;"></span>  
						<div class="mui-media-body">通知</div>  
					</a>  
				</li>  
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">  
					<a href="safe.html">  
						<span class="iconfont icon-shield" style="background:#F39C12;color:#FFF;"><!--<span class="mui-badge">5</span>--></span>  
						<div class="mui-media-body">安全</div>  
					</a>  
				</li>  
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">  
					<a href="resource.html">  
						<span class="iconfont icon-earth" style="background:#1ABC9C;color:#FFF;"></span>  
						<div class="mui-media-body">资源</div>  
					</a>  
				</li>  
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">  
					<a href="sharecontent.html">  
						<span class="iconfont icon-share2" style="background:#E74C3C;color:#FFF;"></span>  
						<div class="mui-media-body">分享</div>  
					</a>  
				</li>  
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">  
					<a href="look.html">  
						<span class="iconfont icon-eye" style="border:2px solid #78BA00;color:#78BA00;padding:9px;"></span>  
						<div class="mui-media-body">每日观察</div>  
					</a>  
				</li>  
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">  
					<a href="growrec.html">  
						<span class="iconfont icon-quill" style="border:2px solid #8E44AD;color:#8E44AD;padding:9px;"></span>  
						<div class="mui-media-body">成长日记</div>  
					</a>  
				</li>  
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">  
					<a href="ask.html">  
						<span class="iconfont icon-mic" style="border:2px solid #F1C40E;color:#F1C40E;padding:9px;"></span>  
						<div class="mui-media-body">学问吧</div>  
					</a>  
				</li>  
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">  
					<a href="#">  
						<span class="iconfont icon-manwoman" style="border:2px solid #57D580;color:#57D580;padding:9px;"></span>  
						<div class="mui-media-body">在线互动</div>  
					</a>  
				</li>  
			</ul>  
			<div class="mui-card" style="margin:10px 0 0 0;border-radius:0;border:0;">  
				<ul class="mui-table-view">  
					<li class="mui-table-view-cell mui-collapse" style="padding:10px 15px;">  
						<a class="mui-navigate-right" href="#" style="background:#fff;"><span class="mui-icon mui-icon-star" style="color:#EC971F;"></span>&nbsp;优秀学生</a>  
						<div class="mui-collapse-content">  
							<a class="goodstdl" >  
								<div class="goodstdimg">  
									<img src="images/girl.jpg">  
								</div>  
								<div class="goodstdtxt">  
									姓名:黄子珊  
									<br> 班级:大一班  
								</div>  
							</a>  
							<a class="goodstdr">  
								<div class="goodstdimg">  
									<img src="images/girl.jpg">  
								</div>  
								<div class="goodstdtxt">  
									姓名:黄子珊  
									<br> 班级:大一班  
								</div>  
							</a>  
						</div>  
					</li>  
  
					<li class="mui-table-view-cell mui-collapse" style="padding:10px 15px;">  
						<a class="mui-navigate-right" href="#" style="background:#fff;"><span class="mui-icon mui-icon-navigate" style="color:#EC971F;"></span>&nbsp;学校新闻</a>  
						<div class="mui-collapse-content" style="padding:0px;margin-top:0px;">  
							<ul class="mui-table-view">  
								<li class="mui-table-view-cell mui-media">  
									<a href="noticedetail.html">  
										<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">  
										<div class="mui-media-body">  
											喜讯小树苗获最佳  
											<p class='mui-ellipsis'>2015-03-03</p>  
										</div>  
									</a>  
								</li>  
								<li class="mui-table-view-cell mui-media">  
									<a href="javascript:;">  
										<img class="mui-media-object mui-pull-left" src="images/muwu.jpg">  
										<div class="mui-media-body">  
											我校新校区搬迁  
											<p class='mui-ellipsis'>2015-03-03</p>  
										</div>  
									</a>  
								</li>  
								<li class="mui-table-view-cell mui-media">  
									<a href="javascript:;">  
										<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">  
										<div class="mui-media-body">  
											关注儿童成长  
											<p class='mui-ellipsis'>2015-03-03</p>  
										</div>  
									</a>  
								</li>   
							</ul>  
						</div>  
					</li>  
				</ul>  
				<div style="height:50px;background: #EFEFF4;"></div>  
			</div>  
		</div>  
		<script src="js/mui.min.js"></script>  
		<script src="js/update.js" type="text/javascript" charset="utf-8"></script>  
		<script>  
		mui.init({  
			preloadLimit:1  
		});  
//			document.getElementById('home').addEventListener('tap',function(){  
//				mui.openWindow({  
//						url: "index.html",  
//						id: "index",  
//						show: {  
//							aniShow: 'zoom-fade-out',  
//							duration: 300  
//						}  
//					});  
//				document.getElementById('resource').hide();  
//			});  
			document.getElementById('resource').addEventListener('tap',function(){  
				mui.openWindow({  
						url: "resource.html",  
						id: "resource",  
						show: {  
							aniShow: 'zoom-fade-out',  
							duration: 300  
						}  
					});  
  
			});  
			document.getElementById('center').addEventListener('tap',function(){  
				mui.openWindow({  
						url: "center.html",  
						id: "center",  
						show: {  
							aniShow: 'zoom-fade-out',  
							duration: 300  
						}  
					});  
			});  
			var menu = null,  
				main = null;  
			var showMenu = false;  
			//			mui.init({  
			//				swipeBack: false,  
			//				statusBarBackground: '#f7f7f7',  
			//				gestureConfig: {  
			//					doubletap: true  
			//				},  
			//				subpages: [{  
			//					id: 'list',  
			//					url: 'list.html',  
			//					styles: {  
			//						top: '45px',  
			//						bottom: 0,  
			//						bounce: 'vertical'  
			//					}  
			//				}]  
			//			});  
			mui.plusReady(function() {  
				//仅支持竖屏显示  
				plus.screen.lockOrientation("portrait-primary");  
				main = plus.webview.currentWebview();  
				main.addEventListener('maskClick', closeMenu);  
				//处理侧滑导航,为了避免和子页面初始化等竞争资源,延迟加载侧滑页面;  
				setTimeout(function() {  
					menu = mui.preload({  
						id: 'index-menu',  
						url: 'index-menu.html',  
						styles: {  
							left: 0,  
							width: '70%',  
							zindex: -1  
						},  
						show: {  
							aniShow: 'none'  
						}  
					});  
				}, 200);  
			});  
			var isInTransition = false;  
			/**  
			 * 显示侧滑菜单  
			 */  
			function openMenu() {  
				if (isInTransition) {  
					return;  
				}  
				if (!showMenu) {  
					//侧滑菜单处于隐藏状态,则立即显示出来;  
					isInTransition = true;  
					menu.setStyle({  
						mask: 'rgba(0,0,0,0)'  
					}); //menu设置透明遮罩防止点击  
					menu.show('none', 0, function() {  
						//主窗体开始侧滑并显示遮罩  
						main.setStyle({  
							mask: 'rgba(0,0,0,0.4)',  
							left: '70%',  
							transition: {  
								duration: 150  
							}  
						});  
						mui.later(function() {  
							isInTransition = false;  
							menu.setStyle({  
								mask: "none"  
							}); //移除menu的mask  
						}, 160);  
						showMenu = true;  
					});  
				}  
			};  
			/**  
			 * 关闭菜单  
			 */  
			function closeMenu() {  
				if (isInTransition) {  
					return;  
				}  
				if (showMenu) {  
					//关闭遮罩;  
					//主窗体开始侧滑;  
					isInTransition = true;  
					main.setStyle({  
						mask: 'none',  
						left: '0',  
						transition: {  
							duration: 200  
						}  
					});  
					showMenu = false;  
					//等动画结束后,隐藏菜单webview,节省资源;  
					mui.later(function() {  
						isInTransition = false;  
						menu.hide();  
					}, 300);  
				}  
			};  
			//点击左上角侧滑图标,打开侧滑菜单;  
			document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {  
				if (showMenu) {  
					closeMenu();  
				} else {  
					openMenu();  
				}  
			});  
			//敲击顶部导航,内容区回到顶部  
			document.querySelector('header').addEventListener('doubletap', function() {  
				main.children()[0].evalJS('mui.scrollTo(0, 100)');  
			});  
			//主界面向右滑动,若菜单未显示,则显示菜单;否则不做任何操作  
			window.addEventListener("swiperight", openMenu);  
			//主界面向左滑动,若菜单已显示,则关闭菜单;否则,不做任何操作;  
			window.addEventListener("swipeleft", closeMenu);  
			//侧滑菜单触发关闭菜单命令  
			window.addEventListener("menu:close", closeMenu);  
			window.addEventListener("menu:open", openMenu);  
			//重写mui.menu方法,Android版本menu按键按下可自动打开、关闭侧滑菜单;  
			mui.menu = function() {  
					if (showMenu) {  
						closeMenu();  
					} else {  
						openMenu();  
					}  
				}  
				//处理右上角关于图标的点击事件;  
			var subWebview = null,  
				template = null;  
			document.getElementById('info').addEventListener('tap', function() {  
				mui.openWindow({  
						url: "info.html",  
						id: "info",  
						show: {  
							aniShow: 'zoom-fade-out',  
							duration: 300  
						}  
					});  
  
			});  
			//首页返回键处理  
			//处理逻辑:1秒内,连续两次按返回键,则退出应用;  
			var first = null;  
			mui.back = function() {  
				if (showMenu) {  
					closeMenu();  
				} else {  
					//首次按键,提示‘再按一次退出应用’  
					if (!first) {  
						first = new Date().getTime();  
						mui.toast('再按一次退出应用');  
						setTimeout(function() {  
							first = null;  
						}, 1000);  
					} else {  
						if (new Date().getTime() - first < 1000) {  
							plus.runtime.quit();  
						}  
					}  
				}  
			};  
		</script>  
	</body>  
  
</html>

resource.html

<!DOCTYPE html>  
<html>  
  
	<head>  
		<meta charset="utf-8">  
		<title>教学资源</title>  
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
		<meta name="apple-mobile-web-app-capable" content="yes">  
		<meta name="apple-mobile-web-app-status-bar-style" content="black">  
  
		<!--标准mui.css-->  
		<link rel="stylesheet" href="css/mui.css">  
		<!--App自定义的css-->  
		<link rel="stylesheet" type="text/css" href="css/app.css" />  
	</head>  
  
	<body>  
  
		<style>  
			.mui-control-content {  
				background-color: white;  
				min-height: 500px;  
			}  
			  
			.mui-control-content .mui-loading {  
				margin-top: 50px;  
			}  
			  
			#menu {  
				margin-top: 1px;  
			}  
			  
			#menu li {  
				padding: 5px 15px;  
			}  
			  
			#reccontent li a img {  
				border-radius: 5px;  
			}  
			  
			#reccontent li a div {  
				font-size: 12px;  
			}  
			  
			.mui-grid-view.mui-grid-9 .mui-media .iconfont {  
				font-size: 1.2em;  
			}  
		</style>  
		<header class="mui-bar mui-bar-nav">  
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
			<h1 class="mui-title">教学资源</h1>  
		</header>  
		<nav id="bottomnav" class="mui-bar mui-bar-tab">  
			<a id="home" class="mui-tab-item ">  
				<span class="mui-icon mui-icon-home"></span>  
				<span class="mui-tab-label">首页</span>  
			</a>  
			<a id='resource' class="mui-tab-item mui-active">  
				<span class="mui-icon mui-icon-image"></span>  
				<span class="mui-tab-label">教学资源</span>  
			</a>  
			<a id="center" class="mui-tab-item" href="#tabbar-with-contact">  
				<span class="mui-icon mui-icon-contact"></span>  
				<span class="mui-tab-label">个人中心</span>  
			</a>  
		</nav>  
		<div class="mui-content">  
			<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>  
				</div>  
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></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 id="menu" class="mui-table-view mui-grid-view mui-grid-9" style="background:#fff;">  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-wallet" style="color:#24be82;"></span>  
											<div class="mui-media-body" style="color:#24be82;">绘本</div>  
										</a>  
									</li>  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-music" style="color:#CF2D28;"></span>  
											<div class="mui-media-body" style="color:#CF2D28;">儿歌</div>  
										</a>  
									</li>  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-pencil2" style="color:#99d91d;"></span>  
											<div class="mui-media-body" style="color:#99d91d;">故事</div>  
										</a>  
									</li>  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-map" style="color:#dc4e16;"></span>  
											<div class="mui-media-body" style="color:#dc4e16;">古诗</div>  
										</a>  
									</li>  
								</ul>  
								<div style="height:10px;background:#EFEFF4;"></div>  
								<div style=" height:38px;line-height:38px;font-size:16px;font-weight:500;padding-left:6px;color:#4d4d4d;border-bottom:1px solid #EFEFF4">  
									<span style="border-left:6px solid #41b9f5;padding-left:6px;">推荐资源</span>  
								</div>  
								<div class="mui-content" style="background-color:#fff">  
									<ul id="reccontent" class="mui-table-view mui-grid-view">  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#">  
												<img class="mui-media-object" src="images/shuijiao.jpg">  
												<div class="mui-media-body">幸福就是可以一起睡觉</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#">  
												<img class="mui-media-object" src="images/muwu.jpg">  
												<div class="mui-media-body">想要一间这样的木屋,静静的喝咖啡</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#"><img class="mui-media-object" src="images/cbd.jpg">  
												<div class="mui-media-body">Color of SIP CBD</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#">  
												<img class="mui-media-object" src="images/yuantiao.jpg">  
												<div class="mui-media-body">静静看这世界</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#"><img class="mui-media-object" src="images/cbd.jpg">  
												<div class="mui-media-body">Color of SIP CBD</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#">  
												<img class="mui-media-object" src="images/yuantiao.jpg">  
												<div class="mui-media-body">静静看这世界</div>  
											</a>  
										</li>  
									</ul>  
								</div>  
							</div>  
						</div>  
					</div>  
					<div id="item2mobile" class="mui-slider-item mui-control-content">  
						<div id="scroll1" class="mui-scroll-wrapper">  
							<div class="mui-scroll">  
								<ul id="menu" class="mui-table-view mui-grid-view mui-grid-9" style="background:#fff;">  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-happy" style="color:#EC971F;"></span>  
											<div class="mui-media-body" style="color:#EC971F;">益智</div>  
										</a>  
									</li>  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-music" style="color:#DD524D;"></span>  
											<div class="mui-media-body" style="color:#DD524D;">歌舞</div>  
										</a>  
									</li>  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-wallet" style="color:#24be82;"></span>  
											<div class="mui-media-body" style="color:#24be82;">绘本</div>  
										</a>  
									</li>  
  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-pencil2" style="color:#99d91d;"></span>  
											<div class="mui-media-body" style="color:#99d91d;">学习</div>  
										</a>  
									</li>  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-joomla" style="color:#c8dc23;"></span>  
											<div class="mui-media-body" style="color:#c8dc23;">艺术</div>  
										</a>  
									</li>  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-hammer" style="color:#8b16dc;"></span>  
											<div class="mui-media-body" style="color:#8b16dc;">制作</div>  
										</a>  
									</li>  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-key3" style="color:#dc16b9;"></span>  
											<div class="mui-media-body" style="color:#dc16b9;">谜语</div>  
										</a>  
									</li>  
  
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">  
										<a href="#">  
											<span class="iconfont icon-heart2" style="color:#dc4e16;"></span>  
											<div class="mui-media-body" style="color:#dc4e16;">健康</div>  
										</a>  
									</li>  
								</ul>  
								<div style="height:10px;background:#EFEFF4;"></div>  
								<div style=" height:38px;line-height:38px;font-size:16px;font-weight:500;padding-left:6px;color:#4d4d4d;border-bottom:1px solid #EFEFF4">  
									<span style="border-left:6px solid #41b9f5;padding-left:6px;">推荐资源</span>  
								</div>  
								<div class="mui-content" style="background-color:#fff">  
  
									<ul id="reccontent" class="mui-table-view mui-grid-view">  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#">  
												<img class="mui-media-object" src="images/shuijiao.jpg">  
												<div class="mui-media-body">幸福就是可以一起睡觉</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#">  
												<img class="mui-media-object" src="images/muwu.jpg">  
												<div class="mui-media-body">想要一间这样的木屋,静静的喝咖啡</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#"><img class="mui-media-object" src="images/cbd.jpg">  
												<div class="mui-media-body">Color of SIP CBD</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#">  
												<img class="mui-media-object" src="images/yuantiao.jpg">  
												<div class="mui-media-body">静静看这世界</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#"><img class="mui-media-object" src="images/cbd.jpg">  
												<div class="mui-media-body">Color of SIP CBD</div>  
											</a>  
										</li>  
										<li class="mui-table-view-cell mui-media mui-col-xs-4">  
											<a href="#">  
												<img class="mui-media-object" src="images/yuantiao.jpg">  
												<div class="mui-media-body">静静看这世界</div>  
											</a>  
										</li>  
									</ul>  
								</div>  
							</div>  
						</div>  
					</div>  
				</div>  
				<script src="js/mui.min.js"></script>  
				<script>  
					document.getElementById('home').addEventListener('tap', function() {  
						mui.openWindow({  
							url: "index.html",  
							id: "index",  
							show: {  
								aniShow: 'zoom-fade-out',  
								duration: 300  
							}  
						});  
					});  
					document.getElementById('resource').addEventListener('tap', function() {  
						mui.openWindow({  
							url: "resource.html",  
							id: "resource",  
							show: {  
								aniShow: 'zoom-fade-out',  
								duration: 300  
							}  
						});  
					});  
					document.getElementById('center').addEventListener('tap', function() {  
						mui.openWindow({  
							url: "center.html",  
							id: "center",  
							show: {  
								aniShow: 'zoom-fade-out',  
								duration: 300  
							}  
						});  
					});  
					mui.init({  
						swipeBack: false  
					});  
					(function($) {  
						$('.mui-scroll-wrapper').scroll({  
							indicators: false //是否显示滚动条  
						});  
						var html2 = '<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><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';  
						var html3 = '<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><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';  
						var item2 = document.getElementById('item2mobile');  
						var item3 = document.getElementById('item3mobile');  
						//			document.getElementById('slider').addEventListener('slide', function(e) {  
						//				if (e.detail.slideNumber === 1) {  
						//					if (item2.querySelector('.mui-loading')) {  
						//						setTimeout(function() {  
						//							item2.querySelector('.mui-scroll').innerHTML = html2;  
						//						}, 500);  
						//					}  
						//				} else if (e.detail.slideNumber === 2) {  
						//					if (item3.querySelector('.mui-loading')) {  
						//						setTimeout(function() {  
						//							item3.querySelector('.mui-scroll').innerHTML = html3;  
						//						}, 500);  
						//					}  
						//				}  
						//			});  
						var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');  
						$('.mui-input-group').on('change', 'input', function() {  
							if (this.checked) {  
								sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-' + this.value;  
								//force repaint  
								sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));  
							}  
						});  
					})(mui);  
				</script>  
  
	</body>  
  
</html>
2015-12-16 14:10 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复