Mui --- 学习笔记
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' // } // }); }) });
