使用jQuery mobile創建Nx1網格

Question

http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html解釋瞭如何創建2x1,3x1,4x1和5x1網格。

但是，我需要創建一個15x15網格（其中每列將被給一個圖標）。

jQuery mobile應該如何實現？

Answer 1

你可以使用一個表佈局

• http://jquerymobile.com/demos/1.0rc1/docs/content/content-html.html（查看源）

相關：

• JQuery Mobile Table

實施例：

• http://jsfiddle.net/mMTem/1/

你需要玩弄圖標的大小以及CSS以得到你想要的

HTML

<div data-role="page" class="type-home"> 
    <div data-role="content"> 

     <table summary="This table lists all the JetBlue flights."> 
      <caption>15 x 15</caption> 
      <thead> 
       <tr> 
        <th scope="col">Icon 1</th> 
        <th scope="col">Icon 2</th> 
        <th scope="col">Icon 3</th> 
        <th scope="col">Icon 4</th> 
        <th scope="col">Icon 5</th> 
        <th scope="col">Icon 6</th> 
        <th scope="col">Icon 7</th> 
        <th scope="col">Icon 8</th> 
        <th scope="col">Icon 9</th> 
        <th scope="col">Icon 10</th> 
        <th scope="col">Icon 11</th> 
        <th scope="col">Icon 12</th> 
        <th scope="col">Icon 13</th> 
        <th scope="col">Icon 14</th> 
        <th scope="col">Icon 15</th> 
       </tr> 
      </thead> 
      <tfoot> 
       <tr> 
        <td colspan="5">Total: 15 Icons</td> 
       </tr> 
      </tfoot> 
      <tbody> 
       <tr> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
        <td><img src='http://sandbox.yoyogames.com/extras/user/image/san1/977/138977/thumb/man.png?1283087523' /></td> 
       </tr> 


      </tbody> 
     </table> 

    </div> 
</div>