Adding an app bar in WP8.1 html5

问题

I tried to add appbar with WP8.1 using html5 and I use this link to guide me Quickstart: Adding an app bar with commands (HTML)

But it shows me this problem (a bug) with no error, as you see the image.

回答1:

this is my solution

page default.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CheckCnxInternet</title>

    <!-- WinJS references -->
    <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css 
    based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- CheckCnxInternet references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/Appbar.js"></script>
</head>
<body class="phone">
    <!-- Create AppBar -->
    <!-- BEGINTEMPLATE: Template code for an AppBar -->
    <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{closedDisplayMode:'minimal'}">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',tooltip:'Add item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}"></button>
    </div>
    <!-- ENDTEMPLATE -->
</body>
</html>

for the default.js let it with no modifcation, no code of Appbar.js

(function () {
    "use strict";
    var appBar;
    var cx = new Windows.Networking.Connectivity.NetworkInformation.getInternetConnectionProfile();


    var page = WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            appBar = document.getElementById("createAppBar").winControl;
            appBar.getCommandById("cmdAdd").addEventListener("click", doClickAdd, false);
            appBar.getCommandById("cmdRemove").addEventListener("click", doClickRemove, false);
            appBar.getCommandById("cmdEdit").addEventListener("click", doClickEdit, false);
            appBar.getCommandById("cmdCamera").addEventListener("click", doClickCamera, false);


        }
    });

    // Command button functions
    function doClickAdd() {
        WinJS.log && WinJS.log("Add button pressed", "sample", "status");
    }

    function doClickRemove() {
        WinJS.log && WinJS.log("Remove button pressed", "sample", "status");
    }

    function doClickEdit() {
        WinJS.log && WinJS.log("Edit button pressed", "sample", "status");
    }

    function doClickCamera() {
        WinJS.log && WinJS.log("Camera button pressed", "sample", "status");
    }

})();

I hope it helpful :)

来源：https://stackoverflow.com/questions/24779534/adding-an-app-bar-in-wp8-1-html5

标签

html5

windows-phone-8

appbar