2010-10-13 21:39:54 +00:00
<!DOCTYPE html>
< html >
2010-11-02 01:46:29 +00:00
< head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" >
2010-10-13 21:39:54 +00:00
< title > jQuery Mobile Docs - Content formatting< / title >
2011-01-06 00:19:24 +00:00
< link rel = "stylesheet" href = "../../themes/default/" / >
2010-11-11 19:15:42 +00:00
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2011-01-20 19:26:12 +00:00
< script type = "text/javascript" src = "../../js/jquery.js" > < / script >
2010-11-09 22:57:26 +00:00
< script type = "text/javascript" src = "../../js/" > < / script >
2010-10-13 21:39:54 +00:00
< script type = "text/javascript" src = "../docs/docs.js" > < / script >
< / head >
< body >
< div data-role = "page" >
2011-02-03 22:29:48 +00:00
< div data-role = "header" data-theme = "b" >
2010-10-13 21:39:54 +00:00
< h1 > Layout grids< / h1 >
2011-02-03 23:34:35 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-10-13 21:39:54 +00:00
< / div > <!-- /header -->
< div data-role = "content" >
2010-10-16 02:58:17 +00:00
< 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 >
< 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 >
2010-10-16 02:45:21 +00:00
< p > There are two preset configurations layouts — 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 > ) — 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 >
2010-10-13 21:39:54 +00:00
< h2 > Two column grids< / h2 >
2010-10-16 02:48:47 +00:00
< 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 >
2010-10-13 21:39:54 +00:00
< pre > < code >
< div class=" ui-grid-a" >
2010-10-16 02:37:00 +00:00
< div class=" ui-block-a" > < strong> I'm Block A< /strong> and text inside will wrap< /div>
< div class=" ui-block-b" > < strong> I'm Block B< /strong> and text inside will wrap< /div>
2010-10-13 21:39:54 +00:00
< /div> < !-- /grid-a -->
< / code > < / pre >
2010-10-16 02:37:00 +00:00
2010-10-13 21:39:54 +00:00
2010-10-16 02:39:31 +00:00
< p > The above markup produces the following content layout:< / p >
2010-10-13 21:39:54 +00:00
< div class = "ui-grid-a" >
2010-10-16 02:37:00 +00:00
< div class = "ui-block-a" > < strong > I'm Block A< / strong > and text inside will wrap.< / div >
< div class = "ui-block-b" > < strong > I'm Block B< / strong > and text inside will wrap.< / div >
2010-10-13 21:39:54 +00:00
< / div > <!-- /grid - a -->
2010-10-16 02:48:47 +00:00
< p > As you see above, by default grid blocks have no styles for appearance; they simply present content side-by-side.< / p >
2010-10-16 02:39:31 +00:00
2010-10-16 02:48:47 +00:00
< 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 >
2010-10-13 21:39:54 +00:00
< pre > < code >
< fieldset class=" ui-grid-a" >
< div class=" ui-block-a" > < button type=" submit" data-theme=" c" > Cancel< /button> < /div>
< div class=" ui-block-b" > < button type=" submit" data-theme=" b" > Submit< /button> < /div>
< /fieldset>
< / code > < / pre >
< fieldset class = "ui-grid-a" >
< div class = "ui-block-a" > < button type = "submit" data-theme = "c" > Cancel< / button > < / div >
< div class = "ui-block-b" > < button type = "submit" data-theme = "b" > Submit< / button > < / div >
< / fieldset >
2010-10-16 02:37:00 +00:00
2010-10-16 02:56:41 +00:00
< p > And, grid blocks can adopt presentation styles from the < a href = "../themes/index.html" > theming system< / a > — by adding a height and color swatch reference to the grid blocks, we can achieve this style appearance:< / p >
2010-10-16 02:37:00 +00:00
< div class = "ui-grid-a" >
< div class = "ui-block-a" > < div class = "ui-bar ui-bar-e" style = "height:120px" > Block A< / div > < / div >
< div class = "ui-block-b" > < div class = "ui-bar ui-bar-e" style = "height:120px" > Block B< / div > < / div >
< / div > <!-- /grid - a -->
2010-10-13 21:39:54 +00:00
2010-10-16 02:56:41 +00:00
< h2 > Three-column grids< / h2 >
< 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%).< / p >
2010-10-13 21:39:54 +00:00
< pre > < code >
2010-10-20 19:46:02 +00:00
< div class=" ui-grid-b" >
2010-10-13 21:39:54 +00:00
< div class=" ui-block-a" > Block A< /div>
< div class=" ui-block-b" > Block B< /div>
< div class=" ui-block-c" > Block C< /div>
< /div> < !-- /grid-a -->
< / code > < / pre >
< p > This will produce a 33/33/33% grid for our content.< / p >
< div class = "ui-grid-b" >
< div class = "ui-block-a" > < div class = "ui-bar ui-bar-e" style = "height:120px" > Block A< / div > < / div >
< div class = "ui-block-b" > < div class = "ui-bar ui-bar-e" style = "height:120px" > Block B< / div > < / div >
< div class = "ui-block-c" > < div class = "ui-bar ui-bar-e" style = "height:120px" > Block C< / div > < / div >
2010-11-11 17:50:32 +00:00
< / div > <!-- /grid - b -->
2010-10-13 21:39:54 +00:00
< p > And an example of a 3 column grid with buttons inside:< / p >
< fieldset class = "ui-grid-b" >
2010-10-20 19:46:02 +00:00
< div class = "ui-block-a" > < button type = "submit" data-theme = "c" > Hmm< / button > < / div >
< div class = "ui-block-b" > < button type = "submit" data-theme = "a" > No< / button > < / div >
2010-10-13 21:39:54 +00:00
< div class = "ui-block-b" > < button type = "submit" data-theme = "b" > Yes< / button > < / div >
< / fieldset >
2010-11-11 17:50:32 +00:00
< h2 > Four-column grids< / h2 >
< 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.< / p >
< div class = "ui-grid-c" >
< div class = "ui-block-a" > < div class = "ui-bar ui-bar-e" style = "height:120px" > A< / div > < / div >
< div class = "ui-block-b" > < div class = "ui-bar ui-bar-e" style = "height:120px" > B< / div > < / div >
< div class = "ui-block-c" > < div class = "ui-bar ui-bar-e" style = "height:120px" > C< / div > < / div >
< div class = "ui-block-d" > < div class = "ui-bar ui-bar-e" style = "height:120px" > D< / div > < / div >
< / div > <!-- /grid - c -->
< h2 > Five-column grids< / h2 >
< 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.< / p >
< div class = "ui-grid-d" >
< div class = "ui-block-a" > < div class = "ui-bar ui-bar-e" style = "height:120px" > A< / div > < / div >
< div class = "ui-block-b" > < div class = "ui-bar ui-bar-e" style = "height:120px" > B< / div > < / div >
< div class = "ui-block-c" > < div class = "ui-bar ui-bar-e" style = "height:120px" > C< / div > < / div >
< div class = "ui-block-d" > < div class = "ui-bar ui-bar-e" style = "height:120px" > D< / div > < / div >
< div class = "ui-block-e" > < div class = "ui-bar ui-bar-e" style = "height:120px" > E< / div > < / div >
< / div > <!-- /grid - c -->
< h2 > Multiple row grids< / h2 >
< 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 >
< div class = "ui-grid-b" >
< div class = "ui-block-a" > < div class = "ui-bar ui-bar-e" style = "height:120px" > A< / div > < / div >
< div class = "ui-block-b" > < div class = "ui-bar ui-bar-e" style = "height:120px" > B< / div > < / div >
< div class = "ui-block-c" > < div class = "ui-bar ui-bar-e" style = "height:120px" > C< / div > < / div >
< div class = "ui-block-a" > < div class = "ui-bar ui-bar-e" style = "height:120px" > A< / div > < / div >
< div class = "ui-block-b" > < div class = "ui-bar ui-bar-e" style = "height:120px" > B< / div > < / div >
< div class = "ui-block-c" > < div class = "ui-bar ui-bar-e" style = "height:120px" > C< / div > < / div >
< div class = "ui-block-a" > < div class = "ui-bar ui-bar-e" style = "height:120px" > A< / div > < / div >
< div class = "ui-block-b" > < div class = "ui-bar ui-bar-e" style = "height:120px" > B< / div > < / div >
< div class = "ui-block-c" > < div class = "ui-bar ui-bar-e" style = "height:120px" > C< / div > < / div >
< / div > <!-- /grid - c -->
2010-10-13 21:39:54 +00:00
< / div > <!-- /content -->
< / div > <!-- /page -->
< / body >
< / html >
