HTML应用开发基础篇 - MUI 框架（三）MUI 事件与窗口管理

其他 2020-04-04 22:59:03 阅读次数: 0

目录

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);
			});			
			//自定义事件过程
			mui.plusReady(function(){
				document.getElementById("btn").addEventListener("tap",function(){
					var currW=plus.webview.currentWebview(); //当前窗体对象
					mui.fire(currW,"tempEvt",{id:"007",name:"syl"});
				});
				
				window.addEventListener("tempEvt",function(evt){
					alert(evt.detail.name);
				});
			});	
		</script>
	</body>

</html>

效果图就不放了，毕竟是手势事件，执行后才能看到效果。

 

2、窗口管理

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

打开窗口：

页面间的转场动画问题：方法：mui.openWindow({option})，option参数如下：url: new-page-url ；id: new-page-id ；styles: 指定页面样式主要是 top 和 bottom ；extras: 页面参数传递用，object对象 ；show:窗口显示控制参数，duration建议设置为300ms ；waiting: 系统等待框样式

窗口间的参数传递 ：openWindow时用extras参数 ；子页面接收：plus.webview.currentWebview() ；子页面获取父窗口。plus.webview.currentWebview().opener();

关闭窗口：

后退添加：mui-action-back

关闭后刷新主窗口：主窗口：

window.addEventListener(‘refresh’, function(e) { });   
//自定义事件，e.detail可获取返回参数

子窗口：

mui.init({ 

    beforeback: function() { 

    //获得主窗口页面的webview 

    var list = plus.webview.currentWebview().opener(); 

    //触发列表界面的自定义事件（refresh）,从而进行数据刷新 

    mui.fire(list, ‘refresh’, data);   //data为键-值对象，返回给主窗口 

    //返回true，继续页面关闭逻辑 

    return true; 

    } 

});

示例：主窗口

<!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">
		    <button type="button" id="btn" class="mui-btn mui-btn-blue mui-btn-block">打开窗口</button>
		</div>
		<script type="text/javascript">
			document.getElementById("btn").addEventListener("tap",function(){
				//打开新窗口
				mui.openWindow({
					url:"MUI17_sub.html",
					id:"MUI17",
					extras:{
						id:"007",
						name:"syl"
					}
				});
			});
			window.addEventListener("refresh",function(evt){
				alert(evt.detail.dt);
			});
		</script>
	</body>

</html>

注意主窗口中要使用到子窗口 ，即 url = ***，下面是子窗口：

<!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({
				beforeback:function(){
					//处理当前页面的数据进行保存等操作
					//
					var parentWin=plus.webview.currentWebview().opener();  //获取主页面对应的Webview对象
					mui.fire(parentWin,"refresh",{dt:"test!!!"});
					//返回true，继续页面关闭逻辑,false：阻止窗体返回操作
					return true;
				}
			});
		</script>
		<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">
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-right" src="imgs/cbd.jpg">
		                <div class="mui-media-body">
		                    幸福
		                    <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-right" src="imgs/muwu.jpg">
		                <div class="mui-media-body">
		                    木屋
		                    <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-right" src="imgs/shuijiao.jpg">
		                <div class="mui-media-body">
		                    CBD
		                    <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
		                </div>
		            </a>
		        </li>
		    </ul>
		    <textarea name="" rows="" cols="" id="ddd">asdlfkjas</textarea>
		    <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btn">保存并返回</button>
		</div>
		<script type="text/javascript">
			mui.plusReady(function(){
				var curw=plus.webview.currentWebview();  //获取当前窗口
				alert(curw.name);  //获取主窗口传递过来的数据
				document.getElementById("ddd").value="adasd\n33423"
			});
			document.getElementById("btn").addEventListener("tap",function(){
				//处理当前页面的数据进行保存等操作
				//
				mui.back();   //执行返回操作
			});
		</script>
	</body>

</html>

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

使用方法：mui.init() 中加载子页面，参数为一对象类型。

subpages:[{               //可以加载多个子页面
   url: test.html,
   id: test,
   styles:{  top: ‘0px’   bottom:’45px’}
   extras:{}   
}]

Webview间的参数传递使用 mui.fire() ；预加载页面：preloadPages 。

示例：

<!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({
				subpages:[{
					url:"MUI18_sub1.html",
					id:"MUI18_sub1",
					styles:{
						top:'45px',
						bottom:'60px'
					}
				}],
				preloadPages:[{
					url:"MUI18_sub2.html",
					id:"MUI18_sub2",
					styles:{
						top:'200px',
						bottom:'60px'
					}
				}]
			});
		</script>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">子窗体</h1>
		    <span class="mui-icon mui-icon-bars" id="s1"></span>
		</header>
		<div class="mui-content">
		    
		</div>
		<nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active">
		        <span class="mui-icon mui-icon-home"></span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a 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>
		<script type="text/javascript">
			document.getElementById("s1").addEventListener("tap",function(){
				var tpw=plus.webview.getWebviewById("MUI18_sub2");  //通过ID号查找ID对应的webview
				tpw.show();
			});
		</script>
	</body>

</html>

子页面1：MUI18_sub1

<!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>
		<div class="mui-content">
		    <ul class="mui-table-view">
		            <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>
		</div>
	</body>

</html>

子页面2 ：MUI18_sub2

<!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>
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <img class="mui-media-object mui-pull-right" src="imgs/cbd.jpg">
		            <div class="mui-media-body">
		                幸福
		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
		            </div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <img class="mui-media-object mui-pull-right" src="imgs/muwu.jpg">
		            <div class="mui-media-body">
		                木屋
		                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
		            </div>
		        </a>
		    </li>
		   
		</ul>
	</body>

</html>

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

数据框架：

<div id="refreshContainer" class="mui-scroll-wrapper">
<div class="mui-scroll">

<!--数据列表-->

<ul class="mui-table-view ">          </ul>

</div></div>

使用方法：mui.init() 中加入

pullRefresh:
    container: 数据更新的id号
    down: 下拉刷新设置，指定回调函
    style:"circle",callback: function(){}
    up: 上拉刷新设置，指定回调函数
//结束刷新显示状态：
    endPulldownToRefresh()
    endPullupToRefresh(true|false)

示例为：

<!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({
				pullRefresh:{
					container:"#refreshC",
					down:{
						style:"circle",
						callback:function(){
							setTimeout(function(){
								var i=parseInt(Math.random()*10000);
								var str="<li class='mui-table-view-cell'><a >"+i+"</a></li>";
								document.getElementById("list").innerHTML=str;
								mui("#refreshC").pullRefresh().endPulldownToRefresh();									 
								
							},1000);
						}
					},
					up:{
						callback:function(){
							setTimeout(function(){
								var i=parseInt(Math.random()*10000);
								var str="<li class='mui-table-view-cell'><a >"+i+"</a></li>";
								document.getElementById("list").innerHTML+=str;
								mui("#refreshC").pullRefresh().endPullupToRefresh();									 
								
							},1000);
						}
					}
				}
			});
		</script>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">上拉刷新下拉加载</h1>
		</header>
		<div class="mui-content">
		    <div id="refreshC" class="mui-scroll-wrapper">
		        <div class="mui-scroll">
		            <ul class="mui-table-view" id="list">
	                    <li class="mui-table-view-cell">
	                        <a >
	                            Item 1
	                        </a>
	                    </li>	                    
	                </ul>
		        </div>
		    </div>		    
		</div>
	</body>

</html>

4)、数据交互

AJAX 即 "Asynchronous Javascript And XML"（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。使用：

mui.ajax( url[, settings])

Settings:对象类型参数
data:  向服务器发送的参数，对象类型（Key/Value）
datatype: json|xml|html|text|script
type: http请求类型（get|post）
timeout: 超时时间，单位：毫秒
success：function(data){} 成功时的回调函数
error: function(){} 失败时的回调函数

补充一点：HTML5+ 直接支持跨域访问数据 。

徐小mu
发布了98 篇原创文章 · 获赞 17 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_43305922/article/details/105314116
MUI
今日推荐
周排行
深度学习------Lingvo框架下的加速通道GPipe
webjars管理静态资源
C专家编程_2.2
mysql 源码安装
json文件操作
123231432
注解的实现
Spring MVC 控制器
《人月神话》读后感二
C#使用HttpWebRequest和HttpWebResponse上传文件示例
每日归档
更多
2024-09-08(0)
2024-09-07(0)
2024-09-06(0)
2024-09-05(0)
2024-09-04(0)
2024-09-03(0)
2024-09-02(0)
2024-09-01(0)
2024-08-31(0)
2024-08-30(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022