1、mui 是選擇器，popover 控制顯示與隱藏，toggle 自動控制顯示或隱藏
function showMenu(){ //mui是選擇器 mui('#menu').popover('toggle'); }
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</head>
<body>
<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">
<button type="button" class="mui-btn" onclick="showMenu()">點擊這里</button>
</div>
<div id="menu" class="mui-popover mui-popover-bottom mui-popover-action">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜單1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜單2</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜單3</a>
</li>
</ul>
<ul class="mui-table-view">
<li>
<a href="#menu">取消</a>
</li>
</ul>
</div>
<script type="text/javascript">
function showMenu(){
//mui是選擇器
mui('#menu').popover('toggle');
}
</script>
</body>
</html>
2、事件的對照
1 、每個頁面都要mui.init();用於檢測組件是否加載完成。
2、tap 點擊事件，相對於jquery中的click，如果給某個元素添加tap點擊事件，用
document.getElementById('tab2').addEventListener('tap',function(){});
它原生的就是document.getElementById();
document.getElementById('tab2').addEventListener('tap',function(){ mui.openWindow({ url:'tel.html', id:'tel.html', extras:{ name:'小明',age:'28' } }); }); 這里是一個打開窗口
3、頁面之間的傳值
A頁面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
//tap點擊事件相當於click
document.getElementById('tab2').addEventListener('tap',function(){ //注意這里的tab2 是個id但沒有加#
mui.openWindow({
url:'tel.html',
id:'tel.html',
//extras用於傳遞參數，傳了兩個參數
extras:{ name:'小明',age:'28' }
});
})
});
function openTel(){
mui.openWindow({
url:'tel.html',
id:'tel.html'
});
}
</script>
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="tab1">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a id="tab2" class="mui-tab-item" >
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
</html>
B頁面接受參數
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){//mui.plusRedy()方法必須要在真機情況下才能調試
//webview是個對象
var sData = plus.webview.currentWebview();
mui.toast(sData.name);
//mui是選擇器
var name2 = mui('#Logname');
//注意：這里雖然獲取的是一個id但賦值的時候也要用name2[0],這里獲取的是一個數組
name2[0].innerHTML = sData.name;
var age2 = mui('#age');
age2[0].innerHTML = sData.age;
})
</script>
</head>
<body>
<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">
姓名：<span id="Logname"></span>
年齡：<span id="age"></span>
</div>
</body>
</html>
4、預加載
<script type="text/javascript"> //預加載（使頁面提前加載好） mui.init({ //用preloadPages preloadPages:[{ url:'tel.html', id:'tel.html', extras:{name:'小明',age:'18'} }] }); mui.plusReady(function(){ //tap點擊事件相當於click document.getElementById('tab2').addEventListener('tap',function(){ // mui.openWindow({ // url:'tel.html', // id:'tel.html', // extras:{ // name:'小明',age:'28' // } // }); }) });