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 ...
随机推荐
- 配置tomcat通过客户端访问
1:在tomcat conf/tomcat-users.xml 文件里 配置用户名和密码,以及访问方式 For example, to add the manager-gui role to ...
- django 中的render和render_to_response()和locals()
1. django中的render context在Django里表现为 Context 类,在 django.template 模块里. 它的构造函数带有一个可选的参数: 一个字典映射变量和它们的值 ...
- [py][mx]django通过邮箱找回密码
忘记密码处理流程 注意: 这个文章里的找回密码页面截取有问题. 找回密码页应该是让输入邮箱 直接上代码 class ActiveView(View): # 主要功能是修改user_profile里的i ...
- angular.element 动态添加和删除元素
addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...
- sklearn_Logistic Regression
一.什么是逻辑回归? 一种名为“回归”的线性分类器,其本质是由线性回归变化而来的,一种广泛使用于分类问题中的广义回归算法 面试高危问题:Sigmoid函数的公式和性质 Sigmoid函数是一个S型的函 ...
- eigen quick reference
参考: http://eigen.tuxfamily.org/dox/AsciiQuickReference.txt // A simple quickref for Eigen. Add anyth ...
- Javascript-蔬菜运算价格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- win10安装激活与关闭自动更新
1.安装时即使选择了不保留任何文件,也不会删除掉非c盘里的东西 2.安装后需要执行KMS10_Crack2激活下 3.关闭自动更新. 在服务中禁用 https://zhidao.baidu.com/q ...
- cf428c 模拟题
这题说的是给了 n个数然后又 k次 的交换任意位置的 数字的机会 计算最长的连续子序列的和 这要撸 模拟整个 过程 并不能就是算最长的递增序列 如果只是 找最长的 和序列的 话 会存在 很多问题 ...
- JS多重判断 / ES6 includes
Array.includes () 判断数组是否包含某个元素 直接返回true或者false表示是否包含元素,对NaN一样能有有效 const arr = ['1', '2', 'a', 'b' , ...