# vim: ft=org sw=3 ts=3 et
#+TITLE: Mobile Grid Element
#+STYLE: <LINK href='../stylesheet.css' rel='stylesheet' type='text/css' />
#+AUTHOR: Jesse Gumm (@jessegumm)
#+OPTIONS:   H:2 num:1 toc:1 \n:nil @:t ::t |:t ^:t -:t f:t *:t <:t
#+EMAIL: 
#+TEXT: [[file:../index.org][Getting Started]] | [[file:../api.org][API]] | [[file:../elements.org][*Elements*]] | [[file:../actions.org][Actions]] | [[file:../validators.org][Validators]] | [[file:../handlers.org][Handlers]] | [[file:../config.org][Configuration Options]] | [[file:../about.org][About]]

* Mobile Grid Element - #mobile_grid {}

This element produces a [[http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html][jQuery Mobile Layout Grid]] Element, which is a wrapper to allow you to break a mobile page up into a grid-like layout, consisting of rows and columns. Each block of this grid is defined with a series of [[./mobile_grid_block.html][#mobile_grid_block{}]] elements.

** Usage

#+BEGIN_SRC erlang
   #mobile_grid { 
      columns=2
      body=[
         #mobile_grid_block{ text="Row 1, Cell 1" },
         #mobile_grid_block{ text="Row 1, Cell 2" },
         #mobile_grid_block{ text="Row 2, Cell 1" },
         #mobile_grid_block{ new_row = true, text="Row 3, Cell 1"},
         #mobile_grid_block{ text="Row 3, Cell 2"}
      ]
   }
#+END_SRC

** Attributes
   
   + columns - (/integer(2-5)/) :: Set the number of columns to use for this grid, each containing block will automatically be set to the correct row and column, based on this number.

   + blocks - (/List of #mobile_grid_block{}/) :: Set the list of mobile blocks. To skip to end a row early and skip down to the next row, set the #mobile_grid_block{}'s new_row attribute to 'true'. Elements defined after a 'new_row' element will continue from that  block in a normal fashion.
   
** See Also

   + [[./jquery_mobile.html][jQuery mobile elements]]

   + [[./base.html][base element]]

   + [[./mobile_grid_block.html][mobile grid_block element]]

   + [[./table.html][table element]]
