snippets/grids.html

   1 <!--
   2         jQuery Mobile Boilerplate
   3 -->
   4 <!doctype html>
   5 <html>
   6 <head>
   7         <meta charset="utf-8">
   8         <meta name="viewport" content="width=device-width, initial-scale=1">
   9         <title> jQuery Mobile Boilerplate </title>
  10         <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  11
  12         <!-- if you have a custom theme, add it here -->
  13         <link rel="stylesheet"  href="themes/jQuery-Mobile-Boilerplate.css" />
  14
  15         <link rel="stylesheet" href="css/custom.css" />
  16
  17         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  18         <script src="js/application.js"></script>
  19         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  20
  21 </head>
  22 <body>
  23         <div data-role="page">
  24
  25                 <div data-role="header">
  26                         <a href="../index.html" data-icon="home">Home</a>
  27                         <h1>Grids</h1>
  28                 </div>
  29
  30                 <div data-role="content">
  31
  32
  33
  34
  35
  36 <h2>2 Column Grid</h2>
  37
  38 <div class="ui-grid-a">
  39         <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
  40         <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
  41 </div>
  42
  43 <h2>3 Column Grid</h2>
  44
  45 <div class="ui-grid-b">
  46         <div class="ui-block-a ui-bar-d" style="height:50px">Block A</div>
  47         <div class="ui-block-b ui-bar-d" style="height:50px">Block B</div>
  48         <div class="ui-block-c ui-bar-d" style="height:50px">Block C</div>
  49 </div>
  50
  51 <h2>4 Column Grid</h2>
  52
  53 <div class="ui-grid-c">
  54         <div class="ui-block-a ui-bar-d" style="height:50px">Block A</div>
  55         <div class="ui-block-b ui-bar-d" style="height:50px">Block B</div>
  56         <div class="ui-block-c ui-bar-d" style="height:50px">Block C</div>
  57         <div class="ui-block-d ui-bar-d" style="height:50px">Block D</div>
  58 </div>
  59
  60 <h2>5 Column Grid</h2>
  61
  62 <div class="ui-grid-d">
  63         <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
  64         <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
  65         <div class="ui-block-c ui-bar-d" style="height:50px">C</div>
  66         <div class="ui-block-d ui-bar-d" style="height:50px">D</div>
  67         <div class="ui-block-e ui-bar-d" style="height:50px">E</div>
  68 </div>
  69
  70 <h2>Multi-row grids</h2>
  71
  72 <div class="ui-grid-a">
  73         <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
  74         <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
  75         <div class="ui-block-a ui-bar-d" style="height:50px">A</div>
  76         <div class="ui-block-b ui-bar-d" style="height:50px">B</div>
  77 </div>
  78
  79
  80
  81
  82
  83                 </div>
  84
  85                 <div data-role="footer" data-theme="c">
  86                         <p>&copy; 2012 - jQuery Mobile Boilerplate</p>
  87                 </div>
  88
  89         </div>
  90 </body>
  91 </html>