WinJS多列表視圖

我正在尋找一個用於將典型網格複製到WinJS中的模板示例。任何幫助將非常有用。WinJS多列表視圖

2013-01-22 rahul

在CodeShow中有很多Jeremy Foster的例子，你可以去codeplex下載它。

這是codeshow演示中與「CSS Grid」示例相關的html，css和js，它包含從最簡單的一個到更復雜的4個不同的網格。我希望這可以幫助你，我鼓勵你下載它並玩演示。

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.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-22 17:38:24

非常感謝 - 會給它一個旋轉。 – rahul

實際上，我嘗試創建一個數據綁定網格，就像我們在傳統開發中一樣做的，或者類似於jQuery中的datatable/jqgrid。我相信這是一個有點複雜的模板，我需要創建並綁定到列表視圖。我可以使用表格（tr作爲模板）來完成基本的工作 - 但對樣式的控制很少。如果任何人面臨類似的需求並解決或正在解決的過程 - 這將是偉大的。 – rahul

你可以使用一個jqgrid的權利？ –

WinJS多列表視圖

回答

相關問題