<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会议管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta content="telephone=no,email=no" name="format-detection">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<link rel="stylesheet" href="../css/mui.min.css" />
<style>
.my_bk{
background:#FFFFFF;
}
</style>
</head>
<body>
<nav class="mui-bar mui-bar-tab my_bk">
<a class="mui-tab-item mui-active" href="room.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">会议室</span>
</a>
<a class="mui-tab-item" href="approve.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">审批会议</span>
</a>
</nav>
<div class="mui-content my_bk">
<!--<div id="room" class="mui-control-content mui-active">
</div>
<div id="approve" class="mui-control-content">
</div>-->
</div>
</body>
<script type="text/javascript" src="../js/jquery1.11.1.min.js" ></script>
<script type="text/javascript" src="../js/mui.min.js" ></script>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
var defaultpage = "room.html"; // 定义默认选项卡子页面
// 定义所有子页面
var subpages=['room.html', 'approve.html'];
//当前显示选择卡
var activeTab = subpages[0];
var createIframe = function (el, opt) {
var elContainer = document.querySelector(el);
var wrapper = document.querySelector(".mui-iframe-wrapper");
if(!wrapper){
// 创建wrapper 和 iframe
wrapper = document.createElement('div');
wrapper.className = 'mui-iframe-wrapper';
for(var i in opt.style){
wrapper.style[i] = opt.style[i];
}
var iframe = document.createElement('iframe');
iframe.src = opt.url;
iframe.id = opt.id || opt.url;
iframe.name = opt.id;
wrapper.appendChild(iframe);
elContainer.appendChild(wrapper);
}else{
var iframe = wrapper.querySelector('iframe');
iframe.src = opt.url;
iframe.id = opt.id || opt.url;
iframe.name = iframe.id;
}
}
createIframe('.mui-content',{
url: activeTab,
style: {
top: '0px',//设置距离顶部的距离
bottom: '50px'//设置距离底部的距离
}
});
//选择卡点击事件
mui('.mui-bar-tab').on('tap','a',function(e){
// 获取目标子页的id
var targetTab = this.getAttribute('href');
// 创建iframe代替子页面
createIframe('.mui-content',{
url: targetTab,
style: {
top: '0px',//设置距离顶部的距离
bottom: '50px'//设置距离底部的距离
}
});
});
</script>
</body>
</html>