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

Visual Studio 2015
 

如需 Visual Studio 2017 的最新文件請參閱 Visual Studio 2017 文件

適用於 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: "http://go.microsoft.com/fwlink/?LinkID=223195" });  
        pages.setAt(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });  
        pages.setAt(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });  
    };  
  
    app.oncheckpoint = function (args) {  
    };  
  
    app.start();  
  
    var publicMembers = {  
        items: pages  
    };  
  
    WinJS.Namespace.define("Data", publicMembers);  
  
})();  

快速入門:偵錯 HTML 和 CSS

顯示: