Mobile Grid Element

Home | Getting Started | API | Elements | Actions | Validators | Handlers | Configuration Options | Advanced Guides | Troubleshooting | About

Table of Contents

1 Mobile Grid Element - #mobile_grid {}

This element produces a 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{} elements.

Usage

#mobile_grid { 
   columns=2,
   blocks=[
      #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"}
   ]
}

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.

Date: 2014-11-12 19:50:57 CST

Author: Jesse Gumm (@jessegumm)

Org version 7.8.02 with Emacs version 23

Validate XHTML 1.0

Comments

Note:To specify code blocks, just use the generic code block syntax:
<pre><code>your code here</code></pre>


comments powered by Disqus