ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML5PLUS实现类似右侧弹出菜单

2022-08-28 14:01:01  阅读:233  来源: 互联网

标签:function 菜单 HTML5PLUS setStyle plus menu webview 右侧


一、实现效果

使用【plus.webview】对象实现右侧弹出菜单栏:

点击菜单图标弹出菜单列表,点击页面其它地方或点击【关闭菜单】收缩菜单。

 

二、源码

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <title></title>
    <script type="text/javascript">
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。")
   		});
    </script>
</head>
<body>
	<div style="width: 100%;height: 60px;background: #eee;">
		<div style="float: right;height: 60px;line-height: 60px; margin-right: 10px;font-size: 25px;" onclick="OpenMenu()">
			<span class="glyphicon glyphicon-tasks"></span>
		</div>	
	</div>
</body>
<script type="text/javascript">
	function OpenMenu(){
		var curr=plus.webview.currentWebview();
		var menu=plus.webview.create("pages/Menu.html","menu",{"width":"40%","left":"60%","top":"62px"});
		curr.setStyle({
			mask:"rgba(0,0,0,0)"
		});
		curr.addEventListener("maskClick",function(){
			curr.setStyle({
				mask:"none"
			});
			menu.close();
		});
		menu.show("zoom-fade-out",200);
	}
</script>
</html>

  菜单界面:pages/Menu.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<title></title>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。")
   			
   		});
   		
    </script>
</head>
<body>
	<div style="margin-right: 5px;background: #4c4c4c;border-radius: 5px;">
		<ul>
			<li><span class="glyphicon glyphicon-comment"></span> 发起群聊</li>
			<li><span class="glyphicon glyphicon-user"></span> 添加朋友</li>
			<li><span class="glyphicon glyphicon-camera"></span> 扫一扫</li>
			<li><span class="glyphicon glyphicon-folder-open"></span> 收付款</li>
			<li onclick="BackIndex()"><span class="glyphicon glyphicon-comment"></span> 关闭菜单</li>
		</ul>
	</div>
	<style>	
	li{
		font-size: 12pt;
		cursor: pointer;
		height: 50px;
		color: #fff;
		line-height: 50px;
		border-bottom: 1px solid #5d5d5d;
		list-style-type: none;
	}
	</style>
    <script type="text/javascript">
		function BackIndex(){
			var menu=plus.webview.currentWebview();
			var index=menu.opener();
			menu.close();
			index.setStyle({
				mask:"none"
				});
		}
	</script>
</body>
</html>

 三、关键方法 

plus.webview.currentWebview();//获取当前webview对象

webviewObj.opener();//获取创建当前webview的webview对象

webviewObj.setStyle();//设置webview对象的样式

webviewObj.close();//关闭webview界面

webviewObj.show();//显示webview界面

 

标签:function,菜单,HTML5PLUS,setStyle,plus,menu,webview,右侧
来源: https://www.cnblogs.com/soulsjie/p/16632661.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有