html5+ 侧滑窗口

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>

		<script type="text/javascript">
			var ws = null,
				wc = null;
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function plusReady() {
				ws = plus.webview.currentWebview();
				// 用户点击后
				ws.addEventListener("maskClick", function () {
					wc.close("auto");
				}, false);
			}
			// 判断扩展API是否准备，否则监听"plusready"事件
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			// 显示侧滑页面
			function showSide() {
				// 防止快速点击可能导致多次创建
				if (wc) {
					return;
				}
				// 开启遮罩
				ws.setStyle({
					mask: "rgba(0,0,0,0.5)"
				});
				// 创建侧滑页面
				wc = plus.webview.create("webview_mask_side.html", "side", {
					left: "30%",
					width: "70%",
					popGesture: "none"
				});
				// 侧滑页面关闭后关闭遮罩
				wc.addEventListener('close', function () {
					ws.setStyle({
						mask: "none"
					});
					wc = null;
				}, false);
				// 侧滑页面加载后显示（避免白屏）
				wc.addEventListener("loaded", function () {
					wc.show("slide-in-right", 200);
				}, false);
			}

		</script>

	</head>

	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Webview Mask</div>
		</header>
		<div id="content" class="content">
			<br />
			<div class="button" onclick="showSide()">打开侧滑窗口</div>
			<div class="des">打开侧滑窗口后，当前Webview窗口会显示遮罩层。</div>
			<div class="des">Webview的遮罩层会覆盖Webview中所有内容（包括子Webview），并且截获Webview窗口的所有触屏事件。</div>
		</div>
	</body>

</html>
wlor
发布了33 篇原创文章 · 获赞 6 · 访问量 2万+
私信关注
猜你喜欢
