WinJS示例-AppBar控件

来源：互联网发布：网络神剧排行榜编辑：程序博客网时间：2024/04/26 20:10
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>WinJS示例-AppBar控件</title><!-- Author:kagulaDate: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]常用CDNhttp://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 functionsfunction 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>
0 0