Skip to content Skip to sidebar Skip to footer
Home / Appbar / Html / Windows Phone 8

Adding An App Bar In Wp8.1 Html5

Post a Comment
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,

Solution 1:

this is my solution

page default.html

<!DOCTYPE html><html><head><metacharset="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. --><linkhref="/css/ui-themed.css"rel="stylesheet" /><scriptsrc="//Microsoft.Phone.WinJS.2.1/js/base.js"></script><scriptsrc="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script><!-- CheckCnxInternet references --><linkhref="/css/default.css"rel="stylesheet" /><scriptsrc="/js/default.js"></script><scriptsrc="/js/Appbar.js"></script></head><bodyclass="phone"><!-- Create AppBar --><!-- BEGINTEMPLATE: Template code for an AppBar --><divid="createAppBar"data-win-control="WinJS.UI.AppBar"data-win-options="{closedDisplayMode:'minimal'}"><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'cmdAdd',label:'Add',icon:'add',tooltip:'Add item'}"></button><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item'}"></button><buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item'}"></button><buttondata-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
    functiondoClickAdd() {
        WinJS.log && WinJS.log("Add button pressed", "sample", "status");
    }

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

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

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

})();

I hope it helpful :)

Post a Comment for "Adding An App Bar In Wp8.1 Html5"