Déboguer l’exemple de code HTML et CSSDebug HTML and CSS sample code

Le code dans cette rubrique est de l’exemple de fichier pour démarrage rapide : déboguer du code HTML et CSS.The code in this topic is the sample file for Quickstart: Debug HTML and CSS. Les erreurs présentes par conception dans le guide de démarrage rapide sont résolues dans cette version du code.The errors present by design in the QuickStart are fixed in this version of the code.

Exemple de codeSample Code

Le code HTML suivant est utilisé dans le <corps > balise dans le démarrage rapide.The following HTML code is used in the <body> tag in the QuickStart.

<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>  

Le code CSS suivant montre les ajouts effectués à default.css.The following CSS shows the additions made to default.css.

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

L'exemple de code suivant affiche le code JavaScript complet dans default.js.The following code example shows the complete JavaScript code in default.js. Les références aux espaces de noms WinJS pour ce code se trouvent dans le fichier de modèle default.html.The references to WinJS namespaces for this code are in the template's default.html file.

(function () {  
    "use strict";  

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

    var myData = [];  
    for (var x = 0; x < 3; 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://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg" });  
        pages.setAt(1, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg" });  
        pages.setAt(2, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg" });  
    };  

    app.oncheckpoint = function (args) {  
    };  

    app.start();  

    var publicMembers = {  
        items: pages  
    };  

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

})();  

Voir aussiSee Also

Démarrage rapide : déboguer du code HTML et CSSQuickstart: Debug HTML and CSS