1、mui 是选择器，popover 控制显示与隐藏，toggle 自动控制显示或隐藏

  1. function showMenu(){
  2.    //mui是选择器
  3.    mui('#menu').popover('toggle');
  4. }
  1. <!doctype html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link href="css/mui.min.css" rel="stylesheet" />
  9.         <script src="js/mui.min.js"></script>
  10.         <script type="text/javascript">
  11.             mui.init()
  12.         </script>
  13.     </head>
  14.  
  15.     <body>
  16.         <header class="mui-bar mui-bar-nav">
  17.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  18.             <h1 class="mui-title">标题</h1>
  19.         </header>
  20.         <div class="mui-content">
  21.             <button type="button" class="mui-btn" onclick="showMenu()">点击这里</button>
  22.         </div>
  23.         <div id="menu" class="mui-popover mui-popover-bottom mui-popover-action">
  24.                 <ul class="mui-table-view">
  25.                     <li class="mui-table-view-cell">
  26.                         <a href="#">菜单1</a>
  27.                     </li>
  28.                     <li class="mui-table-view-cell">
  29.                         <a href="#">菜单2</a>
  30.                     </li>
  31.                     <li class="mui-table-view-cell">
  32.                         <a href="#">菜单3</a>
  33.                     </li>
  34.                 </ul>
  35.                 <ul class="mui-table-view">
  36.                     <li>
  37.                         <a href="#menu">取消</a>
  38.                     </li>
  39.                 </ul>
  40.             </div>
  41.  
  42.     <script type="text/javascript">
  43.         function showMenu(){
  44.             //mui是选择器
  45.             mui('#menu').popover('toggle');
  46.         }
  47.     </script>
  48.     </body>
  49.  
  50. </html>

2、事件的对照

1 、每个页面都要mui.init();用于检测组件是否加载完成。

2、tap 点击事件，相对于jquery中的click，如果给某个元素添加tap点击事件，用

  1. document.getElementById('tab2').addEventListener('tap',function(){});
  2.  
  3. 它原生的就是document.getElementById();
  1.  
  1. document.getElementById('tab2').addEventListener('tap',function(){
  2.                     mui.openWindow({
  3.                         url:'tel.html',
  4.                         id:'tel.html',
  5.                         extras:{
  6.                             name:'小明',age:''
  7.                         }
  8.                     });
  9.                 });  这里是一个打开窗口

 3、页面之间的传值  

A页面

  1. <!doctype html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link href="css/mui.min.css" rel="stylesheet" />
  9.         <script src="js/mui.min.js"></script>
  10.         <script type="text/javascript">
  11.             mui.init();
  12.             mui.plusReady(function(){
  13.                 //tap点击事件相当于click
  14.                 document.getElementById('tab2').addEventListener('tap',function(){ //注意这里的tab2 是个id但没有加#
  15.                     mui.openWindow({
  16.                         url:'tel.html',
  17.                         id:'tel.html',
    　　　　　　　　　　　　　　//extras用于传递参数，传了两个参数
  18.                         extras:{
  19.                             name:'小明',age:'28'
  20.                         }
  21.                     });
  22.                 })
  23.             });
  24.  
  25.             function openTel(){
  26.                 mui.openWindow({
  27.                     url:'tel.html',
  28.                     id:'tel.html'
  29.                 });
  30.             }
  31.  
  32.         </script>
  33.     </head>
  34.  
  35.     <body>
  36.          <nav class="mui-bar mui-bar-tab">
  37.              <a class="mui-tab-item mui-active" id="tab1">
  38.                  <span class="mui-icon mui-icon-home"></span>
  39.                  <span class="mui-tab-label">首页</span>
  40.              </a>
  41.              <a id="tab2" class="mui-tab-item" >
  42.                  <span class="mui-icon mui-icon-phone"></span>
  43.                  <span class="mui-tab-label">电话</span>
  44.              </a>
  45.              <a class="mui-tab-item">
  46.                  <span class="mui-icon mui-icon-email"></span>
  47.                  <span class="mui-tab-label">邮件</span>
  48.              </a>
  49.              <a class="mui-tab-item">
  50.                  <span class="mui-icon mui-icon-gear"></span>
  51.                  <span class="mui-tab-label">设置</span>
  52.              </a>
  53.          </nav>
  54.     </body>
  55.  
  56. </html>

B页面接受参数

  1. <!doctype html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link href="css/mui.min.css" rel="stylesheet" />
  9.         <script src="js/mui.min.js"></script>
  10.         <script type="text/javascript">
  11.             mui.init();
  12.             mui.plusReady(function(){//mui.plusRedy()方法必须要在真机情况下才能调试
  13.                 //webview是个对象
  14.                 var sData = plus.webview.currentWebview();
  15.                 mui.toast(sData.name);
  16.                 //mui是选择器
  17.  
  18.                 var name2 = mui('#Logname');
  19.                 //注意：这里虽然获取的是一个id但赋值的时候也要用name2[0],这里获取的是一个数组
  20.                 name2[0].innerHTML = sData.name;
  21.                 var age2 = mui('#age');
  22.                 age2[0].innerHTML = sData.age;
  23.             })
  24.         </script>
  25.     </head>
  26.  
  27.     <body>
  28.         <header class="mui-bar mui-bar-nav">
  29.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  30.             <h1 class="mui-title">拨打电话</h1>
  31.         </header>
  32.         <div class="mui-content">
  33.             姓名：<span id="Logname"></span>
  34.             年龄：<span id="age"></span>
  35.         </div>
  36.     </body>
  37.  
  38. </html>

 4、预加载

  1. <script type="text/javascript">
  2.             //预加载（使页面提前加载好）
  3.             mui.init({
  4.                 //用preloadPages
  5.                 preloadPages:[{
  6.                     url:'tel.html',
  7.                     id:'tel.html',
  8.                     extras:{name:'小明',age:''}
  9.                 }]
  10.             });
  11.             mui.plusReady(function(){
  12.                 //tap点击事件相当于click
  13.                 document.getElementById('tab2').addEventListener('tap',function(){
  14. //                    mui.openWindow({
  15. //                        url:'tel.html',
  16. //                        id:'tel.html',
  17. //                        extras:{
  18. //                            name:'小明',age:'28'
  19. //                        }
  20. //                    });
  21.                 })
  22.             });

Mui --- 学习笔记的更多相关文章

  1. mui学习笔记

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  2. NSIS学习笔记(转)

    转自:http://blog.csdn.net/lee353086/article/details/45919901 NSIS学习笔记Date:2015-05-20Author:kagulaEnv:V ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  7. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  8. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. POD类型

    POD类型 POD全称Plain Old Data.通俗的讲,一个类或结构体通过二进制拷贝后还能保持其数据不变,那么它就是一个POD类型. C++11将POD划分为两个基本概念的合集,即:平凡的和标准 ...

  2. Legal or Not（模板题）

    本来以为这题能用并查集做的,但一想不对 例如A-> B,A->C如果用并查集的话B与C就不能连了,但实际B可以是C的徒弟,所以这题是考拓扑排序. #include<stdio.h&g ...

  3. keepalived+mysql 高可用集群

    mysql 为主主模式参考 https://my.oschina.net/sanmuyan/blog/877373 192.168.100.129 mysql 主节点/keepalived 主节点 1 ...

  4. [LeetCode] 133. Clone Graph_ Medium tag: BFS, DFS

    Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...

  5. [LeetCode] 200. Number of Islands_ Medium tag: BFS

    Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...

  6. 使用POI读取/创建Execl(.xlsx)文件

    最近项目中用到了解析Execl表格的功能,在网上百度了一下自己写了一个小Demo.由于项目中使用的是Execl2007,就是后缀为.xlsx的,所以只研究了解析和创建Execl2007的文件,解析Ex ...

  7. Redis 十分钟快速入门

    本教程是一个快速入门教程,所以Redis的命令只是简单介绍了几个常用的,如果有其他需求请求官网查看API 使用. 1. Redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的ke ...

  8. linux常用命令：less 命令

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  9. Kotlin新语言简介和快速入门知识点

    Kotlin新语言简介和快速入门知识点 简介:Kotlin是最近由JetBrains发布的一种基于JVM的编程语言,已经被Google宣布为开发Android App的一级语言Kotlin有着与Jav ...

  10. excel选择元角分下拉菜单选择框自动变更数字

    excel选择元角分下拉菜单选择框自动变更数字 (M2列),数据-->数据有效性-->在“允许”栏中选择序列-->在“来源”栏中输入:分,角,元单位倍数公式(M4列):=IF(M2= ...