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 ...
随机推荐
- Winsock网络编程
Winsock是Windows下网络编程的标准接口.使用Winsock编程的步骤一般是比较固定的. 首先要包含头文件#include <WinSock2.h>,同时要添加WS2_32.li ...
- testng入门教程9 TestNG依赖测试
有时候,你可能需要在一个特定的顺序调用方法在测试案例,或你想分享一些数据和方法之间的状态.TestNG支持这种依赖测试方法之间的显式依赖它支持声明. TestNG允许指定依赖,无论与否: 使用属性de ...
- csv到mysql数据库如何分割
这两天修改一个取XML文件存入到CSV,然后再存入到mysql的bug,bug是XML文件里面有个name字段,存入CSV文件里面的时候我们用“|”,来分割字段.但是name里面有时候也有 ...
- 总结《二》MFC中WinMain和CALLBACK
MFC中WinMain和回调函数CALLBACK 一,路线 1.一般普通窗口或控件建立调用的CWnd :: CreateEx函数 2.经过资源对话框创建的即不调用的CWnd ...
- JSON草稿
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 用CSS让字体在一行内显示不换行
青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小 当一行文字超过DIV或者Table的宽度的时候,浏览器 ...
- Linux中Postfix邮件安装Maildrop（八）
Postfix使用maildrop投递邮件 Maildrop是本地邮件投递代理(MDA), 支持过滤(/etc/maildroprc).投递和磁盘限额(Quota)功能. Maildrop是一个使用C ...
- 1、初始Java应用程序
Java Application程序,也称为Java应用程序,是可独立的应用程序.该类程序以main()方法作为入口,由独立的Java解释器加载执行. 下面的列子是一个简单的Java应用程序. imp ...
- bzoj1650 / P2855 [USACO06DEC]河跳房子River Hopscotch / P2678 (noip2015)跳石头
P2855 [USACO06DEC]河跳房子River Hopscotch 二分+贪心 每次二分最小长度,蓝后检查需要去掉的石子数是否超过限制. #include<iostream> #i ...
- 05: MySQL高级查询
MySQL其他篇 目录: 参考网站 1.1 GROUP BY分组使用 1.2 mysql中NOW(),CURDATE(),CURTIME()的使用 1.3 DATEDIFF() 函数 1.4 DATE ...