我想通过mui.openWindow( ) 实现一个类似侧滑菜单的效果,通过设置 styles 中width 和 height 属性调整新窗口在视窗中所占的比例,但是无论我怎么调整属性,新窗口始终占据着全屏。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<p>这是Home 页</p>
<button onclick="show()">显示新窗口</button>
<script type="text/javascript" charset="utf-8">
mui.init();
if(window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
function plusReady() {
webview_detail = mui.preload({
url: 'menu.html',
id: 'menu'
});
}
function show() {
mui.openWindow({
id: 'menu',
styles: {
top: '50px', //新页面顶部位置
bottom: '10px', //新页面底部位置
width: '80%', //新页面宽度,默认为100%
height: '50%'
},
show: {
aniShow: 'slide-in-right', //页面显示动画,默认为”slide-in-right“;
duration: 300
}
})
}
</script>
</body>
</html>
完整代码: