<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

    /*提前预加载其他页面，这样再打开已加载好的页面就会有很好的效果了*/

          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">hello</h1>

</header>

<div class="mui-content">

    <button type="button" onclick="mshow()">测试onclick</button>

    <button type="button" id="btn1">测试id 点击事件</button>

    <br />

    <ul id="lists" class="mui-table-view">

        <li class="mui-table-view-cell">Item 1</li>

        <li class="mui-table-view-cell">Item 2</li>

        <li class="mui-table-view-cell">Item 3</li>

    </ul>

    <br />

    <button type="button" id="btn2">点击这里</button>

    <br>

    <ul class="mui-table-view" id="list1">

        <li class="mui-table-view-cell" id="1">新闻 1</li>

        <li class="mui-table-view-cell" id="2">新闻 2</li>

        <li class="mui-table-view-cell" id="3">新闻 3</li>

    </ul>

</div>

</body>

<script type="text/javascript">

/*用此方法的话，万一页面没有加载完，用户就点击了某个按钮就怕出问题*/

function mshow(){

    mui.toast('ok');

}

/*plusReady()  此mui方法值能在真机上运行，用此方法的目的是能证明加载完所有的控件了*/

mui.plusReady(function(){});

    document.getElementById('btn1').addEventListener('tap',function(){

        mui.toast('ok');

    })

mui('#lists').on('tap','li',function(){

    mui.toast(this.innerHTML);

    //mui('#lists').off('tap','li');//取消点击事件

})

document.getElementById('btn2').addEventListener('tap',function(){

    mui.toast('ok');

})

//点击跳转并传值

//mui.plusReady(function(){});

var detailPage = mui.preload({url:'sub.html',id:'sub.html'});

  mui('#list1').on('tap', 'li', function(e){

    mui.fire(detailPage,'newsId',{'title': this.innerHTML, 'id':this.getAttribute('id')});

    mui.openWindow({url: 'sub.html',id:'sub.html'});

  });

</script>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

        //接受数据  只能在真机运行下才能有效果

        //mui.plusReady(function(){});

        window.addEventListener('newsId',function(e){

            var title1 = mui('#title');

            title1[0].innerHTML = e.detail.title;

            mui.toast(e.detail.id);

            console.log('bb');

        });

        console.log('aa');

    </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" id="title">hello</h1>

</header>

</body>

</html>

mui 事件管理及自定义事件详解的更多相关文章

  1. Android 自定义 View 详解

    View 的绘制系列文章: Android View 绘制流程之 DecorView 与 ViewRootImpl Android View 的绘制流程之 Measure 过程详解 (一) Andro ...

  2. 转：JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法、shiro认证与shiro授权

    原文地址:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法.shiro认证与shiro授权 以下是部分内容,具体见原文. shiro介绍 什么是shiro shiro是Apache ...

  3. KVM镜像管理利器-guestfish使用详解

    原文  http://xiaoli110.blog.51cto.com/1724/1568307   KVM镜像管理利器-guestfish使用详解 本文介绍以下内容: 1. 虚拟机镜像挂载及w2k8 ...

  4. Libevent 事件管理和添加事件

    /**   我们先来看一下事件的创建*/struct event * event_new(struct event_base *base, evutil_socket_t fd, short even ...

  5. mysql用户授权、数据库权限管理、sql语法详解

    mysql用户授权.数据库权限管理.sql语法详解 —— NiceCui 某个数据库所有的权限 ALL 后面+ PRIVILEGES SQL 某个数据库 特定的权限SQL mysql 授权语法 SQL ...

  6. 【转】MySQL用户管理及SQL语句详解

    [转]MySQL用户管理及SQL语句详解 1.1 MySQL用户管理 1.1.1 用户的定义 用户名+主机域 mysql> select user,host,password from mysq ...

  7. redis cluster管理工具redis-trib.rb详解

    redis cluster管理工具redis-trib.rb详解 来源 http://weizijun.cn/2016/01/08/redis%20cluster%E7%AE%A1%E7%90%86% ...

  8. Jupyter自定义设置详解

    今天专门花时间总结梳理一下jupyter的一些高级设置,jupyter我已经介绍过一次基本内容了,Setup and Linux | James Chen's Blogs,尤其是如何在服务器运行jup ...

  9. mui开发app之自定义事件以更新其他页内容

    我之前做过jquery mobile的开发,那还是前年的事情 在jquery mobile中,由于页面是存储在div[data-role=page]的dom中(jqmobile通过对data-role ...

随机推荐

  1. python接口自动化测试(六)-unittest-单个用例管理

    前面五节主要介绍了环境搭建和requests库的使用,可以使用这些进行接口请求的发送.但是如何管理接口案例?返回结果如何自动校验?这些内容光靠上面五节是不行的,因此从本节开始我们引入python单元测 ...

  2. Docker配置参考

    Docker配置参考 一.参数列表 参考网址:https://docs.docker.com/engine/reference/commandline/dockerd/#options Usage: ...

  3. JSONObject、JSONArray、Map、JavaBean的相互转换

    1,JSONObject json对象,就是一个键对应一个值,使用的是大括号{ },如:{key:value} 2,JSONArray json数组,使用中括号[ ],只不过数组里面的项也是json键 ...

  4. 每天一个linux命令:top

    1.命令简介 top (top) 令经常用来实时监控linux的系统状况,比如cpu.内存的使用,类似于Windows的任务管理器. 2.用法 top -hv | -abcHimMsS -d dela ...

  5. 使用Træfɪk(traefik)来加速Qt在线更新

    简述 在使用Qt的MaintenanceTool程序进行在线更新的时候遇到一个问题,就是访问download.qt.io实在太慢了,老是失败.所以想使用国内的镜像站来进行更新. 使用Qt的镜像站方法也 ...

  6. 解析 .Net Core 注入——注册服务

    在学习 Asp.Net Core 的过程中,注入可以说是无处不在,对于 .Net Core 来说,它是独立的一个程序集,没有复杂的依赖项和配置文件,所以对于学习 Asp.Net Core 源码的朋友来 ...

  7. Mybatis Generator配置详解

    参考:http://www.jianshu.com/p/e09d2370b796 http://mbg.cndocs.tk <?xml version="1.0" encod ...

  8. 好用好玩的Python包

    ujson 用C++实现的json解析器,速度飞快. prettytable 在控制台下使用表格展示数据 import prettytable t=prettytable.PrettyTable([' ...

  9. 分析轮子（二）- << ，>>，>> （左移、右移、无符号右移）

    前言:写 分析轮子(一)-ArrayList.java 的时候看到源码中有 int newCapacity = oldCapacity + (oldCapacity >> 1); 这样的代 ...

  10. [转]Redis内部数据结构详解-sds

    本文是<Redis内部数据结构详解>系列的第二篇,讲述Redis中使用最多的一个基础数据结构:sds. 不管在哪门编程语言当中,字符串都几乎是使用最多的数据结构.sds正是在Redis中被 ...