HTML应用开发基础篇 – MUI 框架(三)MUI 事件与窗口管理

  • Post author:
  • Post category:其他



目录


1、事件


2、窗口管理


1)、打开窗口 | 关闭窗口


2)、加载子页面 | 预加载页面


3)、下拉刷新 | 上拉加载


4)、数据交互


1、事件

MUI 内置了常用的手势事件,具体如下表:


事件绑定方法:


(1) 选择器


.


addEventListener


(“


event”,function


) ;(2) mui(选择器


).on()


:可实现


批量元素的事件


绑定,参数:.on( event , selector , handler


) 。


自定义事件:


监听自定义事件

window.addEventListener('customEvent',function(event){

     //通过event.detail可获得传递过来的参数内容

});


触发自定义事件 : mui.fire( target , event ,


{data} ) ,


target:


需传值的目标


webview 。

见一个例子:

<!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" />
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">事件</h1>
		</header>
		<div class="mui-content">
		    <ul class="mui-table-view" id="ul">
		            <li class="mui-table-view-cell">
		                <a class="mui-navigate-right">
		                    Item 1
		                </a>
		            </li>
		            <li class="mui-table-view-cell">
		                <a class="mui-navigate-right">
		                     Item 2
		                </a>
		            </li>
		            <li class="mui-table-view-cell">
		                <a class="mui-navigate-right">
		                     Item 3
		                </a>
		            </li>
		        </ul>
		        <button id="btn" type="button" class="mui-btn mui-btn-blue">消息发送</button>
		</div>
		<script type="text/javascript">
			mui("#ul").on("tap","li a",function(){				
				alert(this.innerHTML);



版权声明:本文为qq_43305922原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。