Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated grid docs, added footer example at the bottom. Fixes #2707

Browse source 
Thanks for the suggestion @agcolom!
This commit is contained in:
toddparker 2011-10-14 12:49:23 -04:00
parent ab8deade90
commit cd09f54ef3
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
docs/content/content-grids.html
View file

@ -27,8 +27,17 @@
<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>
<p>There are two preset configurations layouts &mdash; two-column (using the <code>class</code> of <code>ui-grid-a</code>), and three-column (using the <code>class</code> of <code>ui-grid-b</code>) &mdash; that can be used in any situation that requires columns. 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>
<p>There are four preset configurations layouts that can be used in any situation that requires columns:</p>
<ul>
<li><strong>two</strong>-column (using the <code>ui-grid-a</code> class)</li>
<li><strong>three</strong>-column (using the <code>ui-grid-b</code> class)</li>
<li><strong>four</strong>-column (using the <code>ui-grid-c</code> class)</li>
<li><strong>five</strong>-column (using the <code>ui-grid-d</code> class)</li>
</ul>
<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>
<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>
<h2>Two column grids</h2>
<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>
@ -137,6 +146,17 @@
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
</div><!-- /grid-c -->
<h2>Grids in toolbars</h2>
<p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 3 column grid.</p>
<!-- Inline styles are for demo purposes only, please use external styles -->
<div data-role="footer" data-theme="a" class="ui-bar ui-grid-b">
<div class="ui-block-a" style="margin-top:8px;"><h3>Settings</h3></div>
<div class="ui-block-b"><label for="value" style="margin-top:8px;">Price</label><input id="value" value="5,000"></div>
<div class="ui-block-b" style="padding-top:4px;"><button type="submit" data-theme="b">Update</button></div>
</div><!-- /footer -->
</div><!--/content-primary -->
<div class="content-secondary">