文件结构与 demo hello mui类似
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="http://ask.dcloud.net.cn/css/mui.min.css">
<script src="js/mui.min.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
<h1 class="mui-title"></h1>
</header>
<script>
var menu = null,
list = null,
main = null;
var showMenu = false;
mui.init({
swipeBack: false,
statusBarBackground: '#f7f7f7',
subpages: [{
id: 'list',
url: 'list.html',
styles: {
top: '45px',
bottom: 0,
bounce: 'vertical'
}
}]
});
mui.plusReady(function() {
if (mui.os.android) {
plus.screen.lockOrientation("portrait-primary");
}
main = plus.webview.currentWebview();
});
//处理右上角关于图标的点击事件；
var subWebview = null, template = null;
document.getElementById('info').addEventListener('tap', function() {
if (subWebview == null) {
//获取共用父窗体
template = plus.webview.getWebviewById("default-main");
//通知列表界面，已经开始点击；
var list = plus.webview.currentWebview().children()[0];
mui.fire(list,'firstClick',{});
}
if(template){
subWebview = template.children()[0];
subWebview.loadURL('pages/info.html');
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
title: '关于',
showMenu: false
});
template.show('slide-in-right', 150);
}
});
//敲击顶部导航，内容区回到顶部
document.querySelector('header').addEventListener('doubletap',function () {
main.children()[0].evalJS('mui.scrollTo(0, 100)');
});
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
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>list.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">
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<style>
html,
body {
background-color: #FFFFFF;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
</head>
<body>
<style>
/**grid 自适应代码**/
html,
body,
.mui-content {
height: 100%;
}
.mui-content > .mui-table-view:first-child {
margin-top: 0px;
}
.mui-content {
position: relative;
}
.mui-grid-view {
position: absolute;
top: 184px;
bottom: 0;
min-height: 330px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
height: 33.33333333%;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -40px;
}
</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>
<div class="mui-content">
<div style="height:184px;width:100%;background-image:url(images/index.jpg);background-position:center center;"></div>
<ul class="mui-table-view mui-grid-view mui-grid-8" style="border-top:2px solid #f08519">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a id="receipts" href="pages/receipts.html">
<span class="mui-icon mui-icon-list"></span>
<div class="mui-media-body">
待收租金
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a id="water" href="pages/waters.html">
<span class="mui-icon mui-icon-plus"></span>
<div class="mui-media-body">
抄水表
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a id="power" href="pages/powers.html">
<span class="mui-icon mui-icon-plus"></span>
<div class="mui-media-body">
抄电表
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="pages/rooms.html">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">
房间管理
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a id="customer" href="pages/customers.html">
<span class="mui-icon mui-icon-contact"></span>
<div class="mui-media-body">
租户档案
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a id="customer" href="pages/notices.html">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">
通知公告
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a id="settings" href="pages/settings.html" open-type="common">
<span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">
系统设置
</div>
</a>
</li>
</ul>
</div>
</body>
<script>
mui.init();
var first = null;
//只有ios支持的功能需要在Android平台隐藏；
if (mui.os.android) {
var list = document.querySelectorAll('.ios-only');
if (list) {
for (var i = 0; i < list.length; i++) {
list[i].style.display = 'none';
}
}
}
mui.init({
preloadLimit: 5, //同时并存的预加载窗口数量
swipeBack: false,
keyEventBind: {
backbutton: false
}
});
var templates = {};
var getTemplate = function(name, header, content, loading) {
var template = templates[name];
if (!template) {
//预加载共用父模板；
var headerWebview = mui.preload({
url: header,
id: name + "-main",
styles: {
popGesture: "hide"
},
extras: {
mType: 'main'
}
});
//预加载共用子webview
var subWebview = mui.preload({
url: !content ? "" : content,
id: name + "-sub",
styles: {
top: '45px',
bottom: '0px'
},
extras: {
mType: 'sub'
}
});
subWebview.addEventListener('loaded', function() {
setTimeout(function() {
subWebview.show();
}, 50);
});
subWebview.hide();
headerWebview.append(subWebview);
//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
headerWebview.addEventListener('hide', function() {
subWebview.hide("none");
});
}
templates[name] = template = {
name: name,
header: headerWebview,
content: subWebview,
loaded: loading
};
}
return template;
};
var initTemplates = function() {
getTemplate('pullrefresh', 'pages/template_pullrefresh.html', 'pages/rooms.html', true);
getTemplate('default', 'pages/template.html');
};
mui.plusReady(function() {
initTemplates();
//关闭splash页面；
plus.navigator.closeSplashscreen();
});
//主列表点击事件
mui('.mui-content').on('tap', 'a', function() {
var id = this.getAttribute('href');
var type = this.getAttribute("open-type");
if (type == "common") {
if (~id.indexOf('')) {
var pop = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
mui.openWindow({
id: id,
url: this.href,
styles: {
zindex: 9998,
popGesture: pop
},
waiting: {
autoShow: false
}
});
} else {
mui.openWindow({
id: id,
url: this.href,
waiting: {
autoShow: false
}
});
}
} else {
if (id && ~id.indexOf('.html')) {
var href = this.href;
//获得共用模板组
var template = ~href.indexOf('rooms.html')||~href.indexOf('notices.html')?getTemplate('pullrefresh'):getTemplate('default');
var showMenu = false;
//获得共用父模板
var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.innerText;
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview, 'updateHeader', {
title: title,
showMenu: false
});
var reload = true;
if (!template.loaded) {
if (contentWebview.getURL() != this.href) {
//mui.toast('1')
contentWebview.loadURL(this.href);
} else {
//mui.toast('2')
reload = false;
}
} else {
reload = false;
}
(!reload) && contentWebview.show();
headerWebview.show('slide-in-right', 150);
}
}
});
var index = null; //主页面
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragright', function(e) {
e.detail.gesture.preventDefault();
});
</script>
</html>template_pullrefresh.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">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
.mui-fadein {
/*-webkit-animation: fadein 0.1s;
animation: fadein 0.1s;*/
opacity: 1;
}
.mui-fadeout {
opacity: 0;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">下拉刷新和上拉加载更多</h1>
</header>
<div class="mui-content"></div>
</body>
<script type="text/javascript">
var titleElem = document.getElementById("title");
window.addEventListener("updateHeader", function(e) {
//不触发些事件？？？？？
var title = e.detail.title;
titleElem.innerHTML = title;
titleElem.className = "mui-title mui-fadein";
});
</script>
</html>
huyong1978 (作者)
谢谢
2015-03-27 22:55