windows8 應用工具功能表列

應用程式欄例子這個樣本示範了如何使用這個應用程式欄呈現導航,命令,和工具,使用者。樣品採用WinJS.UI。 可以和WinJS.UI。 AppBarCommand類。這個應用程式欄被預設和出現在使用者即可手指從頂部或底部螢幕的邊緣。它涵蓋的內容可以被應用程式和使用者提供了一個邊刷,或作用,應用程式。確切地說,該示範了如何添加一個應用程式欄,自訂應用程式欄,和控制應用程式欄。這個簡單的寫在HTML,CSS和JavaScript。 XAML的版本,看到XAML應用程式欄控制例子。

 

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario1.html", {
        ready: function (element, options) {
            document.getElementById("s1cmdAdd").addEventListener("click", doClickAdd, false);
            document.getElementById("s1cmdRemove").addEventListener("click", doClickRemove, false);
            document.getElementById("s1cmdDelete").addEventListener("click", doClickDelete, false);
            document.getElementById("s1cmdCamera").addEventListener("click", doClickCamera, false);
            WinJS.log && WinJS.log("To show the bar, swipe up from the bottom of the screen, right-click, or press Windows Logo + z. To dismiss the bar, tap in the application, swipe, right-click, or press Windows Logo + z again.", "sample", "status");
        },
        unload: function () {
            AppBarSampleUtils.removeAppBars();
        }
    });

    // 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 doClickDelete() {
        WinJS.log && WinJS.log("Delete button pressed", "sample", "status");
    }

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

})();

完整執行個體

/Files/risk/windows8/應用工具功能表列sample.rar