WinJS示例-AppBar控件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WinJS示例-AppBar控件</title>
	<!-- 
	Author:kagula
	Date:2014-10-09
	依赖:WinJS 3.0, JQuery 2.1.1
	测试环境:Chrome 35, Chrome 37
	目的:
	 [1]测试在桌面环境下能否使用WinJS。
     [2]测试JQuery同WinJS的兼容性。
	参考资料:
	[1]参考源代码
	http://try.buildwinjs.com/#appbar
	[2]常用CDN
	http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0
	[3]jQuery的相关学习资料
	http://www.w3schools.com/
	-->
   	<script src="js/jquery-2.1.1.min.js"></script>

    <!-- WinJS references -->
    <link href="winjs30/css/ui-dark.css" rel="stylesheet">
    <script src="winjs30/js/base.js"></script>
    <script src="winjs30/js/ui.min.js"></script>

    <!-- AddingWinJSControlsAndStyles references -->
    <script src="winjs30/js/WinJS.min.js"></script>

	<script>
	function log(msg) {
		/*
		document.getElementById("status").innerHTML += msg;
		上面的代码使用了下面的JQuery代替。
		*/
		if($("#status").length>0)		
		  $("#status").get(0).innerHTML += msg;
	}

	// Command button functions
	function doClickAdd() {
		log("<br/>Add button pressed");
	}

	function doClickRemove() {
		log("<br/>Remove button pressed");
	}

	function doClickDelete() {
		log("<br/>Delete button pressed");
	}

	function doClickEdit() {
		log("<br/>Edit button pressed");
	}

	WinJS.UI.processAll().done(function () {
		var appBar = document.getElementById("createAppBar").winControl;
		appBar.getCommandById("cmdAdd").addEventListener("click", doClickAdd, false);
		appBar.getCommandById("cmdRemove").addEventListener("click", doClickRemove, false);
		appBar.getCommandById("cmdDelete").addEventListener("click", doClickDelete, false);
		appBar.getCommandById("cmdEdit").addEventListener("click", doClickEdit, false);
		appBar.show();
/*
		var dismissButton = document.getElementById("dismissButton");
		dismissButton.addEventListener("click", function () {
			var flyout = document.getElementById("menuFlyout").winControl;
			flyout.hide();
		});
		上面的代码使用了下面的JQuery代替。
*/
		$("#dismissButton").click(function () {
			$("#menuFlyout").hide();
		});
	});

	log("<br/>Tap on the AppBar commands above.<br/>");
	</script>

	<style>
	.win-appbar button.win-command .win-label {
		color:white;
	}
	</style>
</head>
<body>

<div class="box">
    <!-- Create AppBar -->
    <!-- BEGINTEMPLATE: Template code for an AppBar -->
    <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{sticky: true, placement: 'top'}">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}"></button>
        <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'global'}" />
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'global',tooltip:'Delete item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',section:'selection',tooltip:'Edit', type:'flyout', flyout: select('#menuFlyout')}"></button>
    </div>
    <!-- ENDTEMPLATE -->
    <div id="menuFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm purchase flyout}">
        <div>This flyout was invoked after clicking on an appbar command.</div>
        <button id="dismissButton">确 定</button>
    </div>
    <br />
    <br />
    <br />
    <div id="status"></div>
    <br />
</div>

</body>
</html>

你可能感兴趣的:(WinJS示例-AppBar控件)