Creating Nx1 grid with jQuery mobile

Question

http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html explains how one can create 2x1, 3x1, 4x1 and 5x1 grids.

However, I need to create a 15x15 grid (where each column will be given an icon).

How should this be achieved with jQuery mobile?

score 1 · Accepted Answer · edited May 23 '17 at 09:59

You could use a table layout

http://jquerymobile.com/demos/1.0rc1/docs/content/content-html.html (view source)

JQuery Mobile Table

Example:

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

You will need to play around with the size of the icons as well as the CSS to get what you want

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>

Creating Nx1 grid with jQuery mobile

1 Answers1