libs/js/jquery-mobile-1.0.1pre/docs/content/content-html.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - HTML formatting</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9         <script src="../../js/jquery.js"></script>
  10         <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
  11         <script src="../_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13 </head>
  14 <body>
  15
  16         <div data-role="page" class="type-interior">
  17
  18                 <div data-role="header" data-theme="f">
  19                 <h1>HTML Formatting</h1>
  20                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  21         </div><!-- /header -->
  22
  23         <div data-role="content">
  24                 <div class="content-primary">
  25                 <style>
  26                         table { width:100%; }
  27                         table caption { text-align:left;  }
  28                         table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
  29                         table th, td { text-align:left; padding:6px;}
  30                 </style>
  31
  32
  33
  34
  35                 <p>The default approach to styling content in jQuery Mobile is simple: Use a light hand.  Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../api/themes.html">theming system</a>  to apply the font family and colors. </p>
  36                 <p>Taking a light hand with content styling gives designers and developers a clean slate to work with, instead of fighting against a lot of complex style overhead.</p>
  37
  38                 <h2>Default HTML markup styling</h2>
  39                 <p>By default, jQuery Mobile themes use standard HTML styles and sizes for standard markup elements like headers, paragraph content, block quotes, anchor links, standard ordered, unordered and definition lists, and tables &mdash; as shown in the examples below:</p>
  40                 <hr>
  41
  42                 <h1>H1 Heading</h1>
  43                 <h2>H2 Heading</h2>
  44                 <h3>H3 Heading</h3>
  45                 <h4>H4 Heading</h4>
  46                 <h5>H5 Heading</h5>
  47                 <h6>H6 Heading</h6>
  48
  49                 <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
  50
  51                 <blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>
  52
  53                 <p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>
  54
  55                 <p>We add a few styles to <code>tables</code> and <code>fieldsets</code> to make them more legible, which are easily overridden with customs styles.</p>
  56
  57                 <ul>
  58                         <li>Unordered list item 1</li>
  59                         <li>Unordered list item 1</li>
  60                         <li>Unordered list item 1</li>
  61                 </ul>
  62
  63                 <ol>
  64                         <li>Ordered list item 1</li>
  65                         <li>Ordered list item 1</li>
  66                         <li>Ordered list item 1</li>
  67                 </ol>
  68
  69                 <dl title="Definition list">
  70                         <dt>Definition term</dt>
  71                         <dd>I'm the definition text</dd>
  72                         <dt>Definition term</dt>
  73                         <dd>I'm the definition text</dd>
  74                 </dl>
  75
  76
  77
  78                 <table summary="This table lists all the JetBlue flights.">
  79                   <caption>Travel Itinerary</caption>
  80                   <thead>
  81                     <tr>
  82                        <th scope="col">Flight:</th>
  83                       <th scope="col">From:</th>
  84                       <th scope="col">To:</th>
  85                     </tr>
  86                   </thead>
  87                   <tfoot>
  88                     <tr>
  89                       <td colspan="5">Total: 3 flights</td>
  90                     </tr>
  91                   </tfoot>
  92                   <tbody>
  93                   <tr>
  94                     <th scope="row">JetBlue 983</th>
  95                     <td>Boston (BOS)</td>
  96                     <td>New York (JFK)</td>
  97                   </tr>
  98                   <tr>
  99                     <th scope="row">JetBlue 354</th>
 100                     <td>San Francisco (SFO)</td>
 101                     <td>Los Angeles (LAX)</td>
 102                   </tr>
 103                 <tr>
 104                     <th scope="row">JetBlue 465</th>
 105                     <td>New York (JFK)</td>
 106                     <td>Portland (PDX)</td>
 107                   </tr>
 108                   </tbody>
 109                 </table>
 110
 111
 112         </div><!--/content-primary -->
 113
 114         <div class="content-secondary">
 115
 116                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 117
 118                                 <h3>More in this section</h3>
 119
 120                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
 121
 122                                                 <li data-role="list-divider">Content Formatting</li>
 123                                                 <li data-theme="a"><a href="content-html.html">Basic HTML styles</a></li>
 124                                                 <li><a href="content-grids.html">Layout grids (columns)</a></li>
 125                                                 <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
 126                                                 <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
 127                                                 <li><a href="content-themes.html">Theming content</a></li>
 128
 129                                 </ul>
 130                 </div>
 131         </div>
 132
 133 </div><!-- /content -->
 134
 135 <div data-role="footer" class="footer-docs" data-theme="c">
 136                 <p>&copy; 2011 The jQuery Project</p>
 137 </div>
 138
 139 </div><!-- /page -->
 140
 141 </body>
 142 </html>