| title | ms.custom | ms.date | ms.technology | ms.topic | dev_langs | ms.assetid | author | ms.author | manager | ms.workload | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Debug HTML and CSS sample code | Microsoft Docs |
11/04/2016 |
|
conceptual |
|
51893967-98c8-4141-ba40-03646f221760 |
mikejo5000 |
mikejo |
douge |
|
The code in this topic is the sample file for Quickstart: Debug HTML and CSS. The errors present by design in the QuickStart are fixed in this version of the code.
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> The following CSS shows the additions made to default.css.
#fView {
background-color:#0094ff;
height: 500px;
margin: 25px;
} The following code example shows the complete JavaScript code in default.js. 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);
})();