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:''
}
});
}); 这里是一个打开窗口
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:''}
}]
});
mui.plusReady(function(){
//tap点击事件相当于click
document.getElementById('tab2').addEventListener('tap',function(){
// mui.openWindow({
// url:'tel.html',
// id:'tel.html',
// extras:{
// name:'小明',age:'28'
// }
// });
})
});
Mui --- 学习笔记的更多相关文章
- mui学习笔记
一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...
- NSIS学习笔记(转)
转自:http://blog.csdn.net/lee353086/article/details/45919901 NSIS学习笔记Date:2015-05-20Author:kagulaEnv:V ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- 十天精通CSS3(1)
什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...
- 通过反射，获取linkedHashMap的最后一个键值对。对map按照值进行排序。
1:通过反射,获取linkedHashMap的最后一个键值对. Map<Integer, Integer> map = new LinkedHashMap<>(); Field ...
- edgeR使用学习【转载】
转自:http://yangl.net/2016/09/27/edger_usage/ 1.Quick start 2. 利用edgeR分析RNA-seq鉴别差异表达基因: #加载软件包 librar ...
- siblings()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [LeetCode] 197. Rising Temperature_Easy tag: SQL
Given a Weather table, write a SQL query to find all dates' Ids with higher temperature compared to ...
- [LeetCode] 221. Maximal Square _ Medium Tag: Dynamic Programming
Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's and re ...
- python接口自动化 -参数关联（一）
原文地址https://www.cnblogs.com/yoyoketang/p/6886610.html 原文地址https://www.cnblogs.com/yoyoketang/ 原文地址ht ...
- Summary: Difference between null and empty String
String s1 = ""; means that the empty String is assigned to s1. In this case, s1.length() i ...
- js数组之迭代器方法
迭代器方法:对数组中的每一个元素应用一个函数,可以返回一个值,一组值或者一个新的数组.说的什么啊这是,根本听不懂.实践 不生成新数组的迭代器的方法: <html> <head> ...
- workerman定时任务使用
定时任务在有些场合很实用,像淘宝的自动确认收货就必须放在服务端进行,这时workeran的定时任务就派上用场了,它可以支持毫秒,crontab的粒度是一分钟 需要注意的是因为定时任务一直在执行,业 ...