WinJS示例-AppBar控件

最新推荐文章于 2017-05-02 23:28:00 发布

kagula086

最新推荐文章于 2017-05-02 23:28:00 发布

阅读量1k

点赞数

分类专栏： JavaScript或前端

本文链接：https://blog.csdn.net/lee353086/article/details/39933427

版权

JavaScript或前端专栏收录该内容

44 篇文章 2 订阅

订阅专栏

本文介绍了一个使用WinJS 3.0实现的AppBar控件示例，演示了如何在桌面环境中应用WinJS，并展示了如何通过JQuery与WinJS进行交互。示例包括Add、Remove、Delete和Edit等按钮的功能实现。

摘要由CSDN通过智能技术生成

<!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>