LYFZ
/
lyfz_repos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title></title>
	<link href="styles/font-awesome.min.css" rel="stylesheet" />
	<link href="styles/app.css" rel="stylesheet" />
	<script src="scripts/jquery-2.2.3.js"></script>
</head>
<body>
	<div class="demo-app">
		<header>
			<div>
				<h2 class="app-title">
					NanUI BorderlessForm Demo
				</h2>
			</div>
			<div></div>
		</header>
		<content>
			<div class="app-sys-command-container">
				<ul class="sys-commands">
					<!--Use <n-ui-command> attribute to control form's system commands. -->
					<li n-ui-command="minimize">
						<i class="fa fa-window-minimize"></i>
					</li>
					<!--Use <n-ui-command> attribute to control form's system commands. -->
					<li n-ui-command="maximize">
						<i class="fa fa-window-maximize"></i>
					</li>
					<!--Use <n-ui-command> attribute to control form's system commands. -->
					<li n-ui-command="close">
						<i class="fa fa-close"></i>
					</li>
				</ul>
			</div>


			<article>
				<h2>Borderless Form</h2>
				<div class="app-state-watcher">
					<div>
						<b>STATE:</b> <span id="label-form-state">normal</span>
						<p>77778999 Change window state to trigger this event.</p>
					</div>
					<div>
						<b>ACTIVATED:</b> <span id="label-activated-state">N/A</span>
						<p>Active/Deactive window state to trigger this event.</p>
					</div>
					<div>
						<b>SIZE:</b> <span id="label-size-state">width:N/A height:N/A</span>
						<p>Change window size to trigger this event.</p>
					</div>
				</div>

				<h3>Dropdown issue test:</h3>
				<p>
					<select>
						<option>This is NanUI</option>
						<option>This is NanUI</option>
						<option>This is NanUI</option>
						<option>This is NanUI</option>
						<option>This is NanUI</option>
						<option>This is NanUI</option>
					</select>
				</p>
				<p>In previous version, if you let menu of this select opened, resizing or moving window will cause the dropdown menu at a wrong position. This issue has been solved since 0.6.4.</p>

				<h3>Dialog test:</h3>
				<p>
					<button onclick="showWindow('123456')">Show Window OK</button>
				</p>

				<p>
					<button onclick="showDialog()">Show Dialog</button>
				</p>
			</article>

		</content>
	</div>

	<script>
		$(function () {

			$(window).on("hoststatechange", function (e) {
				console.log(e.detail);
				$("#label-form-state").text(e.detail.stateName);

			});

			$(window).on("hostactivestate", function (e) {
				console.log(e.detail);
				$("#label-activated-state").text(e.detail.stateName);

				if (e.detail) {
					if (e.detail.state === 1) {
						$("html").addClass("app-active");
					}
					else {
						$("html").removeClass("app-active");
					}
				}
			});

			$(window).on("hostsizechange", function (e) {
				console.log(e.detail);
				$("#label-size-state").text(`width:${e.detail.width} height:${e.detail.height}`);

			});

		});
	</script>
</body>
</html>