共用方式為

偵錯 HTML、CSS 和 JavaScript 範例程式碼

  • 發行項

適用於 Windows 和 Windows Phone

本主題中的程式碼是下列項目的範例檔案：快速入門：偵錯 HTML 和 CSS. 快速入門在設計上出現的錯誤，會在此版本的程式碼中修正。

範例程式碼

下列 HTML 程式碼用於快速入門的 <body> 標記中。

<div id="flipTemplate" data-win-control="WinJS.Binding.Template"
         style="display:none">
    <div class="fixedItem" >
        <img src="#" data-win-bind="src: flipImg" />
    </div>
</div>
<div id="fView" data-win-control="WinJS.UI.FlipView" data-win-options="{
    itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
</div>

下列 CSS 顯示 default.css 的新增內容。

#fView {
    background-color:#0094ff;
    height: 500px;
    margin: 25px;
}

下列程式碼範例會顯示 default.js 中的完整 JavaScript 程式碼。 此程式碼之 WinJS 命名空間的參考位於範本的 default.html 檔案中。

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var myData = [];
    for (var x = 0; x < 4; x++) {
        myData[x] = { flipImg: "/images/logo.png" }
    };

    var pages = new WinJS.Binding.List(myData, { proxy: true });

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !==
            activation.ApplicationExecutionState.terminated) {
                // TODO: . . .
            } else {
                // TODO: . . .
            }
            args.setPromise(WinJS.UI.processAll());

            updateImages();
        }
    };

    function updateImages() {

        pages.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
        pages.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
        pages.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
    };

    app.oncheckpoint = function (args) {
    };

    app.start();

    var publicMembers = {
        items: pages
    };

    WinJS.Namespace.define("Data", publicMembers);

})();

請參閱

概念

快速入門：偵錯 HTML 和 CSS