www/iphone/UiUIKit/info-lists-example.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>Information Fields</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         <!-- for profile image -->
  15         <style type="text/css" media="screen">
  16                 li.picture { background: #fff url(images/minid-profile.png) no-repeat !important; }
  17         </style>
  18         <!-- end line customization -->
  19 </head>
  20
  21 <body>
  22
  23         <div id="header">
  24                 <h1>Information Fields</h1>
  25                 <a href="info-lists.html" id="backButton">Back</a>
  26         </div>
  27
  28 <h1>With images and content</h1>
  29
  30 <ul class="profile">
  31         <li class="picture"><a href="http://www.minid.net"><!--use this space to define tooltip title when user taps-->Julio Alonso Picture</a></li>
  32         <li class="clearfix"><h2>Diego Martín Lafuente</h2><p>Minid.net</p></li>
  33 </ul>
  34
  35 <ul class="field">
  36         <li><h3>E-mail</h3> <a href="mailto:info@gmail.com">info@example.com</a></li>
  37         <li class="arrow"><h3>Website</h3> <small>Blog</small> <a href="http://www.minid.net">Merodeando</a></li>
  38         <li class="arrow"><h3>Address</h3> <a href="http://www.google.com/maps?f=q&hl=en&geocode=&q=Carrer+de+Cal%C3%A0bria+168,+08015+Barcelona,+Spain&sll=40.416741,-3.70325&sspn=0.720381,1.005249&ie=UTF8&z=16&iwloc=addr">Carrer de Calàbria 168,<br />08015 Barcelona, Spain<br />World</a>
  39         <li><h3>Location</h3> <a href="http://www.google.com/maps?f=q&hl=en&geocode=&q=madrid&ie=UTF8&z=10">Map</a></li>
  40         <li><h3>Mobile</h3> <a href="tel:+34999888777">+34 999 888 777</a></li>
  41         <li><h3>Work</h3> <a href="tel:+34999888777">+34 212 462 174</a></li>
  42         <li><h3>Notes</h3> <big>Hello there this is a very small note I want to write.</big></li>
  43 </ul>
  44
  45 <ul class="data">
  46         <li><p>This is how the picture works: You only need to print in the <code>HEAD</code> element of this page an <code>STYLE</code> element with a <code>li.picture</code> class and a background property.</p><p>View the source of this page as an example.</p><p>Only two <code>LI</code> elements can be used on <code>UL.profile</code>. The first one sets the picture dimentions, background and borders. The other holds the data, cleaning all possible styling.</p><p>Both Title and description on the second <code>LI</code> will overflow hidden with ellipsis if the text is really longer, but if you  use horizontally it will scaled perfectly. You can test it on this page by turning the iPhone/iPod Touch vertical and horizontal position.</p></li>
  47 </ul>
  48
  49 <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>
  50
  51 </body>
  52 </html>