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 ...
随机推荐
- POJ3009：Curling 2.0（dfs）
http://poj.org/problem?id=3009 Description On Planet MM-21, after their Olympic games this year, cur ...
- 【Cocos2dx 3.3 Lua】SpriteBatchNode和SpriteFrameCache使用
精灵帧缓存类 一.SpriteFrameCache 精灵帧缓冲类SpriteFrameCache用于存储精灵帧,SpriteFrameCache是一个单例模式,不属于某一个精灵,是所有精灵共享 ...
- 【转】 Oracle 用户权限管理方法
sys;//系统管理员,拥有最高权限 system;//本地管理员,次高权限 scott;//普通用户,密码默认为tiger,默认未解锁 sys;//系统管理员,拥有最高权限 system;//本地管 ...
- [LeetCode] 258. Add Digits_Easy tag: Math
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...
- apply、map、applymap、Dropna
DataFrame常用易混淆方法 apply && map && applymap 1.apply():作用在一维的向量上时,可以使用apply来完成,如下所示 2.m ...
- 7.6 Models -- Finding Records
Ember Data的store为检索一个类型的records提供一个接口. 一.Retrieving a single record(检索单记录) 1. 通过type和ID使用store.findR ...
- PHP 自定义header 参数获取的问题
有的情况下,我们需要把参数放在Headers 里传递.比如说与提供给移动端的api,不能进行缓存的时候. 但是,自定义的header 经常是拿不到的. 如果是apache 的服务器,可以用 apach ...
- C#中NPOI操作excel之读取和写入excel数据
一.下载引用 下载需要引用的dll,即:NPOI.dll,NPOI.OOXML.dll,NPOI.OpenXml4Net.dll,ICSharpCode.SharpZipLib.dll(office2 ...
- 文本按列导入excel
打开excel,选择数据选项卡,自文本选项.
- python 文件操作 练习：取得文件的最后存取时间
#coding=utf-8 import osimport time file_atime=int(os.path.getatime('d:\\a.txt'))print "file_ati ...