www/iphone/UiUIKit/header-pretitle.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   5         <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
   6         <title>Headers</title>
   7         <link rel="stylesheet" href="stylesheets/iphone.css" />
   8         <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
   9         <script type="text/javascript" charset="utf-8">
  10                 window.onload = function() {
  11                   setTimeout(function(){window.scrollTo(0, 1);}, 100);
  12                 }
  13         </script>
  14 </head>
  15
  16 <body>
  17
  18         <div id="header" class="pre">
  19                 <p>Headers</p>
  20                 <h1>With pretitle</h1>
  21                 <a href="headers.html" class="nav" id="backButton">Headers</a>
  22                 <a href="forms.html" class="nav Action">New</a>
  23         </div>
  24
  25 <h1>Explanation</h1>
  26
  27 <ul class="data">
  28         <li><p>You can set <code>pre</code> class now in the <code>#header</code> container for starting use pre-titles. Every pre-title have trimming properties so, whenever is on the vertical view or horizontal it will scale nicely, javascript free.</p>
  29         </li>
  30 </ul>
  31
  32 <ul class="individual">
  33         <li><a href="headers.html">Back</a></li>
  34         <li><a href="index.html">Go to index</a></li>
  35 </ul>
  36
  37 <p><strong>Best enjoyed on a real iPhone</strong><br />This iPhone UI Framework kit is licenced under GNU Affero General Public License (<a href="http://www.gnu.org/licenses/agpl.html">GNU AGPL 3</a>)</p>
  38
  39 <div id="optionpanel" style="display: none">
  40
  41 <p><a class="white button" href="http://www.minid.net">Visit Minid.net</a> <a href="mailto:dlafuente@gmail.com" class="white button">E-mail author</a> <a href="#" class="red button" onclick="showhide('optionpanel');">Hide me</a> <a class="black button" href="index.html">Back to index</a></p>
  42
  43 </div>
  44
  45 </body>
  46 </html>