Skip to content

M
mui
Commit 9ba90bbf authored by hbcui1984's avatar hbcui1984
Browse files
Options

首页增加侧滑导航示例

parent 4cde033c
Show whitespace changes
Inline Side-by-side
Showing with 126 additions and 4 deletions
examples/hello-mui/examples/index-menu.html 0 → 100644
View file @ 9ba90bbf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="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>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="buttons.html">
button（按钮）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="switches.html">
input（输入框）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="switches.html">
media list（图文列表）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="switches.html">
switch（开关）
</a>
</li>
</ul>
</div>
<style type="text/css">
html,body{
background-color: #333;
}
</style>
<script type="text/javascript" charset="utf-8">
var subWebview=null,template=null,index=null;
mui.plusReady(function () {
index = plus.webview.currentWebview().opener();
})
mui('.mui-table-view').on('tap', 'a', function() {
if(subWebview==null){
subWebview = plus.webview.getWebviewById("template_sub");
template = plus.webview.getWebviewById("demoTemplate");
}
var title = this.innerText;
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
if(subWebview.getURL()==this.href){
subWebview.show();
}else{
subWebview.loadURL(this.href);
}
template.show('slide-in-right', 150);
//然后要关闭侧滑菜单；
index.evalJS("toggleMenu()");
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/index.html
View file @ 9ba90bbf
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-left"></a>
<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a> <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
<h1 class="mui-title">Hello mui</h1> <h1 class="mui-title">Hello mui</h1>
</header> </header>
<script> <script>
mui.init({ mui.init({
swipeBack : false, swipeBack : false,
subpages : [{ subpages : [{
...@@ -38,15 +38,14 @@ ...@@ -38,15 +38,14 @@
template = plus.webview.getWebviewById("demoTemplate"); template = plus.webview.getWebviewById("demoTemplate");
} }
// subWebview.hide();
subWebview.loadURL('examples/info.html'); subWebview.loadURL('examples/info.html');
var title = "关于"; var title = "关于";
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};"); template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
template.show('slide-in-right', 150); template.show('slide-in-right', 150);
}); });
var menu = null,showMenu = false;
mui.plusReady(function() { mui.plusReady(function() {
//首页返回键处理 //首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用； //处理逻辑：1秒内，连续两次按返回键，则退出应用；
...@@ -65,8 +64,47 @@ ...@@ -65,8 +64,47 @@
} }
} }
}, false); }, false);
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function () {
menu= mui.preload({
id: 'index-menu',
url: 'examples/index-menu.html',
styles: {
left: 0,
width: '70%',
zindex: -1
},
show:{
aniShow:'none'
}
});
},500);
}); });
document.querySelector('.mui-icon-bars').addEventListener('tap', toggleMenu);
function toggleMenu(){
//控制侧滑菜单webview的显示、隐藏；
if(showMenu){
//侧滑菜单已显示，则等主窗体移动完毕后，再隐藏自己；
setTimeout(function () {
menu.hide();
},300);
}else{
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
}
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: showMenu ? '0' : '70%',
transition: {
duration: 200
}
});
showMenu = !showMenu;
}
</script> </script>
</body> </body>
</html> </html>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment