老规矩先贴代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="The complete style of the Bootflat Framework.">
<title>科研信息录入</title>
<!-- site css -->
<link rel="stylesheet" href="../css/site.min.css" />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../js/site.min.js"></script>
<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />
<link href="../css/mui.min.css" rel="stylesheet" />
<style>
ul {
font-size: 14px;
color: #8f8f94;
}
/*跨webview需要手动指定位置*/
.mui-popover {
height: 200px;
width: 140px;
}
/*三角的位置*/
.mui-popover-arrow {
top: 500px;
right: 60px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
<button id='homeing' class=" mui-pull-left mui-btn-link">主页</button>
<h1 class="mui-title">SRM科研管理系统</h1>
<button id='setting' class=" mui-pull-right mui-btn-link">设置</button>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#Papers">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">论文</span>
</a>
<a class="mui-tab-item" href="#Writing">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">著作</span>
</a>
<a class="mui-tab-item" href="#Patent">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">专利</span>
</a>
<a class="mui-tab-item" href="#more">
<span class="mui-icon mui-icon-more"></span>
<span class="mui-tab-label">更多</span>
</a>
</nav>
<div class="mui-content">
<div id="Papers" class="mui-control-content mui-active" style="padding:5px">
<div class="mui-input-group">
<div class="list-group-item active">论文管理</div>
<ul id="Papers_List" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
</ul>
</div>
</div>
<div id="Writing" class="mui-control-content" style="padding:5px;">
<div class="mui-input-group">
<div class="list-group-item active">著作管理</div>
</div>
</div>
<div id="Patent" class="mui-control-content " style="padding:5px">
<div class="mui-input-group">
<div class="list-group-item active">专利管理</div>
</div>
</div>
<div id="Software" class="mui-control-content " style="padding:5px">
<div class="mui-input-group">
<div class="list-group-item active">软件管理</div>
</div>
</div>
<div id="Award" class="mui-control-content " style="padding:5px">
<div class="mui-input-group">
<div class="list-group-item active">获奖管理</div>
</div>
</div>
<div id="more" class="mui-popover mui-bar-popover" style="width:120px;height:100%">
<div class="mui-popover-arrow"></div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-tab-item" href="#Software">软件</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-tab-item" href="#Award">获奖</a>
</li>
</ul>
</div>
<div id="Popover"></div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script type="text/javascript">
(function(doc) {
mui.init();
//
/*window.addEventListener('show', function() {
}, false);*/
window.addEventListener('toggle', function(event) {
if (event.target.id === 'M_Toggle') {
var isActive = event.detail.isActive;
var table = document.querySelector('.mui-table-view');
var card = document.querySelector('.mui-card');
if (isActive) {
card.appendChild(table);
card.style.display = '';
} else {
var content = document.querySelector('.mui-content');
content.insertBefore(table, card);
card.style.display = 'none';
}
}
});
mui.plusReady(function() {
var value = plus.storage.getItem('ipconfig');
var token = plus.storage.getItem('token');
if (value) {} else {
value = 'http://192.168.1.1';
}
//home
var homeingButton = doc.getElementById('homeing');
homeingButton.addEventListener('tap', function(event) {
mui.oldBack();
});
mui.ajax(value + "/mobile_new/add.ashx?types=AM_Papers", {
type: 'post',
timeout: 15000,
success: function(data) {
$("#Papers_into").html(data.split("|*|")[0]);
$("#Popover").html(data.split("|*|")[1]);
}
})
//设置
var settingButton = doc.getElementById('setting');
//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
settingButton.addEventListener('tap', function(event) {
mui.openWindow({
id: 'setting',
url: value + '/setting.html',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
});
mui.oldBack = mui.back;
var backButtonPress = 0;
//取消按钮
$(".closebutton").click(function() {
mui.oldBack();
});
/*绑定默认列表*/
mui.ajax(value+"/mobile_new/MyList.ashx",{
data:{
Types:'am_papers',
token:token
},
type:"post",
timeout: 15000,
success: function(data) {
$("#Papers_List").append(data);
}
});
});
}(document));
</script>
</body>
</html>基本功能都实现了，但是出现一个很奇怪的问题，我点击选项卡最下端贴近标签的地方会刷新页面。
我把mui原版的那个页面拷贝过来也是一个的问题，
但是在原版上就没有。
请教是哪里的问题啊！！！
1 个回复
如梦渲染 (作者)
好吧，自己找到原因了。
我用mui.openWindow打开的页面才会出现这个问题。
直接用A标记跳转过去的则没有这个问题。
谁能告诉我这是什么原因啊？？？
因为页面最后会放在服务器端。。。。地址不太方便写成死的啊lol