libs/js/jquery-mobile-1.0.1pre/docs/content/content-grids.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Content Grids</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9         <script src="../../js/jquery.js"></script>
  10         <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
  11         <script src="../_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13 </head>
  14 <body>
  15
  16         <div data-role="page" class="type-interior">
  17
  18                 <div data-role="header" data-theme="f">
  19                 <h1>Layout grids</h1>
  20                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  21         </div><!-- /header -->
  22
  23         <div data-role="content">
  24                 <div class="content-primary">
  25
  26                 <p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
  27
  28                 <p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a  block style class convention called <code>ui-grid</code>. </p>
  29
  30                 <p>There are four preset configurations layouts  that can be used in any situation that requires columns:</p>
  31                         <ul>
  32                                 <li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
  33                                 <li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
  34                                 <li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
  35                                 <li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
  36                         </ul>
  37
  38                         <p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. </p>
  39                         <p>Within the grid container, child elements are assigned <code>ui-block-a/b/c/d</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid. The <code>ui-block-a</code> class essentially clears the floats which will start a new line (see multiple row grids, below).</p>
  40
  41                 <h2>Two column grids</h2>
  42                 <p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>
  43
  44 <pre><code>
  45 &lt;div class=&quot;ui-grid-a&quot;&gt;
  46         &lt;div class=&quot;ui-block-a&quot;&gt;&lt;strong&gt;I'm Block A&lt;/strong&gt; and text inside will wrap&lt;/div&gt;
  47         &lt;div class=&quot;ui-block-b&quot;&gt;&lt;strong&gt;I'm Block B&lt;/strong&gt; and text inside will wrap&lt;/div&gt;
  48 &lt;/div&gt;&lt;!-- /grid-a --&gt;
  49 </code></pre>
  50
  51
  52
  53                 <p>The above markup produces the following content layout:</p>
  54
  55                 <div class="ui-grid-a">
  56                         <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
  57                         <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
  58                 </div><!-- /grid-a -->
  59
  60                 <p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
  61
  62                 <p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the two buttons inside to stretch them each to 50% of the screen width:</p>
  63
  64 <pre><code>
  65 &lt;fieldset class=&quot;ui-grid-a&quot;&gt;
  66         &lt;div class=&quot;ui-block-a&quot;&gt;&lt;button type=&quot;submit&quot; data-theme=&quot;c&quot;&gt;Cancel&lt;/button&gt;&lt;/div&gt;
  67         &lt;div class=&quot;ui-block-b&quot;&gt;&lt;button type=&quot;submit&quot; data-theme=&quot;b&quot;&gt;Submit&lt;/button&gt;&lt;/div&gt;
  68 &lt;/fieldset&gt;
  69 </code></pre>
  70
  71                 <fieldset class="ui-grid-a">
  72                                 <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
  73                                 <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
  74             </fieldset>
  75
  76
  77             <p>Theme classes (not data-theme attributes) from the <a href="../api/themes.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
  78
  79                 <div class="ui-grid-a">
  80                         <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
  81                         <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
  82                 </div><!-- /grid-a -->
  83
  84                 <h2>Three-column grids</h2>
  85                 <p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
  86
  87 <pre><code>
  88 &lt;div class=&quot;ui-grid-b&quot;&gt;
  89         &lt;div class=&quot;ui-block-a&quot;&gt;Block A&lt;/div&gt;
  90         &lt;div class=&quot;ui-block-b&quot;&gt;Block B&lt;/div&gt;
  91         &lt;div class=&quot;ui-block-c&quot;&gt;Block C&lt;/div&gt;
  92 &lt;/div&gt;&lt;!-- /grid-b --&gt;
  93 </code></pre>
  94
  95                 <p>This will produce a 33/33/33% grid for our content.</p>
  96
  97                 <div class="ui-grid-b">
  98                         <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
  99                         <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
 100                         <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
 101                 </div><!-- /grid-b -->
 102
 103                 <p>And an example of a 3 column grid with buttons inside:</p>
 104
 105                 <fieldset class="ui-grid-b">
 106                                 <div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
 107                                 <div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>
 108                                 <div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>
 109             </fieldset>
 110
 111                 <h2>Four-column grids</h2>
 112
 113                 <p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
 114
 115                 <div class="ui-grid-c">
 116                         <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
 117                         <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
 118                         <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
 119                         <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
 120                 </div><!-- /grid-c -->
 121
 122                 <h2>Five-column grids</h2>
 123                 <p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
 124
 125                 <div class="ui-grid-d">
 126                         <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
 127                         <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
 128                         <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
 129                         <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
 130                         <div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
 131                 </div><!-- /grid-c -->
 132
 133                 <h2>Multiple row grids</h2>
 134
 135                 <p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
 136
 137                 <div class="ui-grid-b">
 138                         <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
 139                         <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
 140                         <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
 141                         <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
 142                         <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
 143                         <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
 144                         <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
 145                         <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
 146                         <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
 147                 </div><!-- /grid-c -->
 148
 149
 150                 <h2>Grids in toolbars</h2>
 151                 <p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 3 column grid.</p>
 152                 <!--  NOTE: Inline styles are for demo purposes only, please use external styles -->
 153                 <div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
 154                                 <div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
 155                                 <div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label> </div>
 156                                 <div class="ui-block-c"><input id="value" value="5,000"></div>
 157                                 <div class="ui-block-d"><div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div></div>
 158             </div><!-- /footer -->
 159
 160
 161         </div><!--/content-primary -->
 162
 163         <div class="content-secondary">
 164
 165                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 166
 167                                 <h3>More in this section</h3>
 168
 169                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
 170
 171                                                 <li data-role="list-divider">Content Formatting</li>
 172                                                 <li><a href="content-html.html">Basic HTML styles</a></li>
 173                                                 <li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
 174                                                 <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
 175                                                 <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
 176                                                 <li><a href="content-themes.html">Theming content</a></li>
 177
 178                                 </ul>
 179                 </div>
 180         </div>
 181
 182 </div><!-- /content -->
 183
 184 <div data-role="footer" class="footer-docs" data-theme="c">
 185                 <p>&copy; 2011 The jQuery Project</p>
 186 </div>
 187
 188 </div><!-- /page -->
 189
 190 </body>
 191 </html>