listview - WinJS 多列列表视图

Question

我正在寻找一个将典型网格复制到 WinJS 中的模板示例。任何帮助都会非常有用。

score 1 · Accepted Answer

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);
                }
            }
        }
    });
})();

listview - WinJS 多列列表视图

1 回答 1

Related

Reference