Home Explore Help
Sign In
snapshot
/
html5testapp
Watch 2
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: d00b98dfa4
Branches Tags
html5testapp
/
HTML5App
/
jquery.mobile-1.0.1
/
demos
/
docs
/
content
/
content-grids.html

content-grids.html 11 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 
  1. <!DOCTYPE html> 
    2. 

  2. <html> 
    3. 

  3. 	<head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    6. 

  6. 	<title>jQuery Mobile Docs - Content Grids</title> 
    7. 

  7. 	<link rel="stylesheet"  href="../../jquery.mobile-1.0.1.min.css" />  
    8. 

  8. 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
    9. 

  9. 	<script src="../../jquery.js"></script>
    10. 

  10. 	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
    11. 

  11. 	<script src="../_assets/js/jqm-docs.js"></script>
    12. 

  12. 	<script src="../../jquery.mobile-1.0.1.min.js"></script>
    13. 

  13. </head> 
    14. 

  14. <body> 
    15. 

  15. 

  16. 	<div data-role="page" class="type-interior">
    17. 

  17. 

  18. 		<div data-role="header" data-theme="f">
    19. 

  19. 		<h1>Layout grids</h1>
    20. 

  20. 		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
    21. 

  21. 	</div><!-- /header -->
    22. 

  22. 

  23. 	<div data-role="content">
    24. 

  24. 		<div class="content-primary">
    25. 

  25. 		
    26. 

  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. 

  27. 		
    28. 

  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. 

  29. 		
    30. 

  30. 		<p>There are four preset configurations layouts  that can be used in any situation that requires columns:</p>
    31. 

  31. 			<ul>
    32. 

  32. 				<li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
    33. 

  33. 				<li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
    34. 

  34. 				<li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
    35. 

  35. 				<li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
    36. 

  36. 			</ul>
    37. 

  37. 			
    38. 

  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. 

  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. 

  40. 			
    41. 

  41. 		<h2>Two column grids</h2>
    42. 

  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. 

  43. 

  44. <pre><code>
    45. 

  45. &lt;div class=&quot;ui-grid-a&quot;&gt;
    46. 

  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. 

  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. 

  48. &lt;/div&gt;&lt;!-- /grid-a --&gt;
    49. 

  49. </code></pre>
    50. 

  50. 

  51. 

  52. 		
    53. 

  53. 		<p>The above markup produces the following content layout:</p>
    54. 

  54. 		
    55. 

  55. 		<div class="ui-grid-a">
    56. 

  56. 			<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
    57. 

  57. 			<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
    58. 

  58. 		</div><!-- /grid-a -->
    59. 

  59. 		
    60. 

  60. 		<p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
    61. 

  61. 		
    62. 

  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. 

  63. 

  64. <pre><code>
    65. 

  65. &lt;fieldset class=&quot;ui-grid-a&quot;&gt;
    66. 

  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. 

  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. 

  68. &lt;/fieldset&gt;
    69. 

  69. </code></pre>
    70. 

  70. 	
    71. 

  71. 		<fieldset class="ui-grid-a">
    72. 

  72. 				<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
    73. 

  73. 				<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
    74. 

  74. 	    </fieldset>
    75. 

  75. 	    
    76. 

  76. 	    
    77. 

  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. 

  78. 			
    79. 

  79. 		<div class="ui-grid-a">
    80. 

  80. 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
    81. 

  81. 			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
    82. 

  82. 		</div><!-- /grid-a -->
    83. 

  83. 

  84. 		<h2>Three-column grids</h2>
    85. 

  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. 

  86. 	
    87. 

  87. <pre><code>
    88. 

  88. &lt;div class=&quot;ui-grid-b&quot;&gt;
    89. 

  89. 	&lt;div class=&quot;ui-block-a&quot;&gt;Block A&lt;/div&gt;
    90. 

  90. 	&lt;div class=&quot;ui-block-b&quot;&gt;Block B&lt;/div&gt;
    91. 

  91. 	&lt;div class=&quot;ui-block-c&quot;&gt;Block C&lt;/div&gt;
    92. 

  92. &lt;/div&gt;&lt;!-- /grid-b --&gt;
    93. 

  93. </code></pre>
    94. 

  94. 		
    95. 

  95. 		<p>This will produce a 33/33/33% grid for our content.</p>
    96. 

  96. 			
    97. 

  97. 		<div class="ui-grid-b">
    98. 

  98. 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
    99. 

  99. 			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
    100. 

  100. 			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
    101. 

  101. 		</div><!-- /grid-b -->
    102. 

  102. 		
    103. 

  103. 		<p>And an example of a 3 column grid with buttons inside:</p>
    104. 

  104. 

  105. 		<fieldset class="ui-grid-b">
    106. 

  106. 				<div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
    107. 

  107. 				<div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>	 
    108. 

  108. 				<div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>  
    109. 

  109. 	    </fieldset>
    110. 

  110. 		
    111. 

  111. 		<h2>Four-column grids</h2>
    112. 

  112. 		
    113. 

  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. 

  114. 			
    115. 

  115. 		<div class="ui-grid-c">
    116. 

  116. 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    117. 

  117. 			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    118. 

  118. 			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    119. 

  119. 			<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
    120. 

  120. 		</div><!-- /grid-c -->
    121. 

  121. 		
    122. 

  122. 		<h2>Five-column grids</h2>
    123. 

  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. 

  124. 			
    125. 

  125. 		<div class="ui-grid-d">
    126. 

  126. 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    127. 

  127. 			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    128. 

  128. 			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    129. 

  129. 			<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
    130. 

  130. 			<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
    131. 

  131. 		</div><!-- /grid-c -->
    132. 

  132. 		
    133. 

  133. 		<h2>Multiple row grids</h2>
    134. 

  134. 		
    135. 

  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. 

  136. 			
    137. 

  137. 		<div class="ui-grid-b">
    138. 

  138. 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    139. 

  139. 			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    140. 

  140. 			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    141. 

  141. 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    142. 

  142. 			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    143. 

  143. 			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    144. 

  144. 			<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    145. 

  145. 			<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    146. 

  146. 			<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    147. 

  147. 		</div><!-- /grid-c -->
    148. 

  148. 		
    149. 

  149. 		
    150. 

  150. 		<h2>Grids in toolbars</h2>
    151. 

  151. 		<p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 3 column grid.</p>
    152. 

  152. 		<!--  NOTE: Inline styles are for demo purposes only, please use external styles -->
    153. 

  153. 		<div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
    154. 

  154. 				<div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
    155. 

  155. 				<div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label> </div>
    156. 

  156. 				<div class="ui-block-c"><input id="value" value="5,000"></div>	 
    157. 

  157. 				<div class="ui-block-d"><div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div></div>  
    158. 

  158. 	    </div><!-- /footer -->
    159. 

  159. 	
    160. 

  160. 	
    161. 

  161. 	</div><!--/content-primary -->		
    162. 

  162. 	
    163. 

  163. 	<div class="content-secondary">
    164. 

  164. 		
    165. 

  165. 		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
    166. 

  166. 			
    167. 

  167. 				<h3>More in this section</h3>
    168. 

  168. 				
    169. 

  169. 				<ul data-role="listview" data-theme="c" data-dividertheme="d">
    170. 

  170. 				
    171. 

  171. 						<li data-role="list-divider">Content Formatting</li>
    172. 

  172. 						<li><a href="content-html.html">Basic HTML styles</a></li>
    173. 

  173. 						<li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
    174. 

  174. 						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
    175. 

  175. 						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
    176. 

  176. 						<li><a href="content-themes.html">Theming content</a></li>
    177. 

  177. 	
    178. 

  178. 				</ul>
    179. 

  179. 		</div>
    180. 

  180. 	</div>		
    181. 

  181. 

  182. </div><!-- /content -->
    183. 

  183. 

  184. <div data-role="footer" class="footer-docs" data-theme="c">
    185. 

  185. 		<p>&copy; 2011-2012 The jQuery Project</p>
    186. 

  186. </div>
    187. 

  187. 	
    188. 

  188. </div><!-- /page -->
    189. 

  189. 

  190. </body>
    191. 

  191. </html>
    192.