mui 事件管理及自定义事件详解
<!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 事件管理及自定义事件详解的更多相关文章
- Android 自定义 View 详解
View 的绘制系列文章: Android View 绘制流程之 DecorView 与 ViewRootImpl Android View 的绘制流程之 Measure 过程详解 (一) Andro ...
- 转：JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法、shiro认证与shiro授权
原文地址:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法.shiro认证与shiro授权 以下是部分内容,具体见原文. shiro介绍 什么是shiro shiro是Apache ...
- KVM镜像管理利器-guestfish使用详解
原文 http://xiaoli110.blog.51cto.com/1724/1568307 KVM镜像管理利器-guestfish使用详解 本文介绍以下内容: 1. 虚拟机镜像挂载及w2k8 ...
- Libevent 事件管理和添加事件
/** 我们先来看一下事件的创建*/struct event * event_new(struct event_base *base, evutil_socket_t fd, short even ...
- mysql用户授权、数据库权限管理、sql语法详解
mysql用户授权.数据库权限管理.sql语法详解 —— NiceCui 某个数据库所有的权限 ALL 后面+ PRIVILEGES SQL 某个数据库 特定的权限SQL mysql 授权语法 SQL ...
- 【转】MySQL用户管理及SQL语句详解
[转]MySQL用户管理及SQL语句详解 1.1 MySQL用户管理 1.1.1 用户的定义 用户名+主机域 mysql> select user,host,password from mysq ...
- redis cluster管理工具redis-trib.rb详解
redis cluster管理工具redis-trib.rb详解 来源 http://weizijun.cn/2016/01/08/redis%20cluster%E7%AE%A1%E7%90%86% ...
- Jupyter自定义设置详解
今天专门花时间总结梳理一下jupyter的一些高级设置,jupyter我已经介绍过一次基本内容了,Setup and Linux | James Chen's Blogs,尤其是如何在服务器运行jup ...
- mui开发app之自定义事件以更新其他页内容
我之前做过jquery mobile的开发,那还是前年的事情 在jquery mobile中,由于页面是存储在div[data-role=page]的dom中(jqmobile通过对data-role ...
随机推荐
- 用R语言分析与预測员工离职
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/kMD8d5R/article/details/83542978 https://mmbiz.qpic ...
- go微服务框架go-micro深度学习(二) 入门例子
上一篇帖子简单介绍了go-micro的整体框架结构,这一篇主要写go-micro使用方式的例子,中间会穿插一些go-micro的源码,和调用流程图,帮大家更好的理解go-micro的底层.更详细更具体 ...
- Python性能分析
Python性能分析 https://www.cnblogs.com/lrysjtu/p/5651816.html https://www.cnblogs.com/cbscan/articles/33 ...
- 框架Thinkphp5 简单的实现行为 钩子 Hook
这篇文章主要介绍了关于框架Thinkphp5 简单的实现行为 钩子 Hook,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 实现在一个方法开始和结束加入两个行为:api_init.ap ...
- Tomcat线程数与处理速度的关系
问题:Tomcat线程数是不是越大越好呢? 答案肯定是否定的. Tomcat的处理速度跟线程数不是完全成正比的,设置不恰当会出现相反的效果.服务的负载计算包括了CPU的使用率和资源等待. 第一种情况, ...
- 离线环境下安装ansible，借助有网环境下pip工具
环境 有网的机器(192.168.19.222):rhe65,python2.7.13,pip9.0.1 离线机器(192.168.19.203):rhe65,python2.6 FTP(192.16 ...
- 2D空间的OBB碰撞实现
OBB全称Oriented bounding box,方向包围盒算法.其表现效果和Unity的BoxCollider并无二致.由于3D空间的OBB需要多考虑一些情况 这里仅关注2D空间下的OBB. 实 ...
- FFmpeg: FFmepg中的sws_scale() 函数分析
FFmpeg中的 sws_scale() 函数主要是用来做视频像素格式和分辨率的转换,其优势在于:可以在同一个函数里实现:1.图像色彩空间转换, 2:分辨率缩放,3:前后图像滤波处理.不足之处在于:效 ...
- 数字签名与HTTPS详解
因为HTTP协议本身存在着明文传输.不能很好的验证通信方的身份和无法验证报文的完整性等一些安全方面的确点,所以才有了HTTPS的缺陷.HTTPS确切的的说不是一种协议,而是HTTP + SSL (TS ...
- oracle学习创建和准备Oracle样例数据库
此处有一个Oracle创建数据库和表和插入数据的脚本: http://www.forta.com/books/0672336073/