html5+ nativeui_waiting-原生等待框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>

		<script type="text/javascript">
			// H5 plus事件處理
			function plusReady() {}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}

			function defaultWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...\n5");
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待...\n" + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

			function nomodalWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...\n5", {
					modal: false
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待...\n" + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

			function padlockWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...\n5", {
					padlock: true
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待...\n" + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

			function customWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...\n5", {
					loading: {
						icon: "/img/waiting.png"
					}
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待...\n" + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

			function lineWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...5", {
					loading: {
						display: "inline"
					}
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待..." + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

			function transWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...5", {
					style: "black",
					color: "#FF0000",
					background: "rgba(0,0,0,0)",
					loading: {
						display: "inline"
					}
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待..." + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

			function noneWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...5", {
					color: "#FF0000",
					background: "rgba(0,0,0,0)",
					loading: {
						display: "none"
					}
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待..." + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

			function fontWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...\n5", {
					color: "#FF0000",
					size: "24px"
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待...\n" + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

			function blockBackWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...\n5", {
					back: "none"
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待...\n" + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);

			}

			function transBackWaiting() {
				var w = plus.nativeUI.showWaiting("處理中,請等待...\n5", {
					back: "transmit"
				});
				w.onclose = function () {
					clearInterval(t);
				}
				var n = 5;
				var t = setInterval(function () {
					n--;
					w.setTitle("處理中,請等待...\n" + n);
					if (n <= 0) {
						w.close();
						clearInterval(t);
					}
				}, 1000);
			}

		</script>

	</head>

	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Waiting</div>
		</header>
		<div id="scontent" class="scontent">
			<ul class="dlist">
				<li class="ditem" onclick="defaultWaiting()">默認等待框</li>
				<li class="ditem" onclick="nomodalWaiting()">非模態等待框</li>
				<li class="ditem" onclick="padlockWaiting()">點擊關閉等待框</li>
				<li class="ditem" onclick="customWaiting()">自定義圖標等待框</li>
				<li class="ditem" onclick="lineWaiting()">圖標與文字同行</li>
				<li class="ditem" onclick="transWaiting()">背景透明</li>
				<li class="ditem" onclick="noneWaiting()">無圖標等待框</li>
				<li class="ditem" onclick="fontWaiting()">大字體等待框</li>
				<li class="ditem" onclick="blockBackWaiting()">不響應返回鍵等待框</li>
				<li class="ditem" onclick="transBackWaiting()">透傳返回鍵等待框</li>
			</ul>
		</div>
	</body>

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章