<!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>
html5+ 側滑窗口
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.