我正在寻找一个将典型网格复制到 WinJS 中的模板示例。任何帮助都会非常有用。
问问题
1144 次
1 回答
1
CodeShow 中有大量 Jeremy Foster 的示例，您可以从 codeplex下载。
这是 codeshow 演示中与“CSS Grid”示例相关的 html、css 和 js，它包含 4 个不同的网格，从最简单的网格到更“复杂”的网格。我希望这对您有所帮助，我鼓励您下载它并使用演示。
网格.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>
网格.css
/* 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 */
网格.js
(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);
}
}
}
});
})();
于 2013-01-22T17:38:24.923 回答