Listview WinJS多列列表视图
我正在寻找一个将典型网格复制到WinJS中的模板示例。任何帮助都会非常有用。在CodeShow中有大量Jeremy Foster的例子，你可以去下载 这是codeshow演示中与“css网格”示例相关的html、css和js，它由4个不同的网格组成，从最简单的网格到更复杂的网格。我希望这对您有所帮助，我鼓励您下载并使用演示Listview WinJS多列列表视图,listview,windows-8,datatemplate,winjs,Listview,Windows 8,Datatemplate,Winjs,我正在寻找一个将典型网格复制到WinJS中的模板示例。任何帮助都会非常有用。在CodeShow中有大量Jeremy Foster的例子，你可以去下载 这是codeshow演示中与“css网格”示例相关的html、css和js，它由4个不同的网格组成，从最简单的网格到更复杂的网格。我希望这对您有所帮助，我鼓励您下载并使用演示 Grid.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"
Grid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Grid</title>
<meta name="tags" content="" />
<meta name="keywords" content="grid layout css" />
<meta name="description" content="Multiple ways to use a CSS grid." />
<meta name="author" content="Jeremy Foster" />
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="grid.css" rel="stylesheet" />
<script src="grid.js"></script>
</head>
<body>
<div class="grid fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Grid</span>
</h1>
</header>
<section aria-label="Main content" role="main" class="swiper">
<div id="simple">
<h2>Simple</h2>
<div class="explanation">This simple 2x2 grid has 4 elements that are each assigned their own "cell".</div>
<div class="msgrid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
</div>
<div id="rowspans">
<h2>Rowspans</h2>
<div class="explanation">This grid is actually 3x3. The blue item is spanning 2 rows and the green item is spanning 2 columns</div>
<div class="msgrid">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="fancyGrid">
<h2>Fancy</h2>
<div class="explanation">As you can see, grids can be used to create some cool Windows 8 design.</div>
<div class="msgrid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="bigGrid">
<h2>Big</h2>
<div class="explanation">We would want to build a grid this big declaratively. In this demo, we start with a mere div element and then use JavaScript to easily set the grid properties and manipulate the child items. You can imagine the possibilities.</div>
<div class="msgrid"></div>
</div>
</section>
</div>
</body>
</html>
Grid.js
/* Simple */
.grid #simple > div.msgrid { display: -ms-grid; -ms-grid-columns: 250px 250px; -ms-grid-rows: 250px 250px; }
.grid #simple > div.msgrid > div { border: 1px solid gray; }
.grid #simple > div.msgrid > div:nth-child(2) { -ms-grid-column: 2; -ms-grid-row: 1; }
.grid #simple > div.msgrid > div:nth-child(3) { -ms-grid-row: 2; }
.grid #simple > div.msgrid > div:nth-child(4) { -ms-grid-column: 2; -ms-grid-row: 2; }
/* Rowspans */
.grid #rowspans > div.msgrid {
display: -ms-grid;
-ms-grid-columns: 100px 1fr 100px;
-ms-grid-rows: 100px 1fr 100px;
width:600px;
height: 400px;
}
.grid #rowspans > div.msgrid > div:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
border: solid 2px blue;
}
.grid #rowspans > div.msgrid > div:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 2;
-ms-grid-column-span: 2;
border: solid 2px green;
}
.grid #rowspans > div.msgrid > div:nth-child(3) {
-ms-grid-column: 2;
-ms-grid-row: 3;
border: solid 2px red;
}
/* Fancy Grid */
.grid #fancyGrid > div.msgrid {
display: -ms-grid;
-ms-grid-columns: 240px 300px 240px;
-ms-grid-rows: 174px 174px 174px;
}
.grid #fancyGrid > div.msgrid > div { border: 1px solid; margin: 5px; }
.grid #fancyGrid > div.msgrid > div:nth-of-type(1) { -ms-grid-row: 1; -ms-grid-column: 1; }
.grid #fancyGrid > div.msgrid > div:nth-of-type(2) { -ms-grid-row: 2; -ms-grid-column: 1; }
.grid #fancyGrid > div.msgrid > div:nth-of-type(3) { -ms-grid-row: 3; -ms-grid-column: 1; }
.grid #fancyGrid > div.msgrid > div:nth-of-type(4) { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-row-span: 3; }
.grid #fancyGrid > div.msgrid > div:nth-of-type(5) { -ms-grid-row: 1; -ms-grid-column: 3; }
.grid #fancyGrid > div.msgrid > div:nth-of-type(6) { -ms-grid-row: 2; -ms-grid-column: 3; }
.grid #fancyGrid > div.msgrid > div:nth-of-type(7) { -ms-grid-row: 3; -ms-grid-column: 3; }
/* Animate Grid */
(function () {
"use strict";
var element;
var COLS = 80;
var ROWS = 40;
WinJS.UI.Pages.define("/demos/grid/grid.html", {
ready: function (e, options) {
element = e;
this.buildBigGrid(element);
},
buildBigGrid: function () {
var grid = q("#bigGrid .msgrid", element);
grid.style.display = "-ms-grid";
grid.style.msGridColumns = Ocho.Array.repeat("10px",COLS).join(" ");
grid.style.msGridRows = Ocho.Array.repeat("10px", ROWS).join(" ");
for (var i = 1; i <= COLS; i++) {
for (var j = 1; j <= ROWS; j++) {
var childDiv = document.createElement("div");
childDiv.style.msGridColumn = i;
childDiv.style.msGridRow = j;
childDiv.style.width = "9px";
childDiv.style.height = "9px";
childDiv.style.backgroundColor = format("rgb({0},{1},{2})", Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255));
childDiv.style.margin = "1px";
grid.appendChild(childDiv);
}
}
}
});
})();
（函数（）{
“严格使用”；
var元素；
var-COLS=80；
var行=40；
define（“/demos/grid/grid.html”{
就绪：功能（e，选项）{
元素=e；
这个.buildBigGrid（元素）；
},
buildBigGrid:函数（）{
var grid=q（“#bigGrid.msgrid”，元素）；
grid.style.display=“-ms grid”；
grid.style.msGridColumns=Ocho.Array.repeat（“10px”，COLS.join”（“”）；
grid.style.msGridRows=Ocho.Array.repeat（“10px”，行）。join（“”）；
对于（var i=1；我非常感谢-这会让它有一个旋转。实际上，我正在尝试创建一个数据绑定网格，就像我们在传统开发中经常做的那样，或者类似于jquery世界中的datatable/jqgrid。我确信我需要创建一个有点复杂的模板并绑定到listview。我可以使用一个表（tr作为模板）获得基本的工作-但对风格几乎没有控制。如果有人面临类似的需求并已解决或正在解决-那就太好了。我现在就试试（无论如何我都喜欢）…但想知道WinJS是否有自己的东西。