www/iphone/UiUIKit/button-panels.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>Buttons panel</title>
   7         <link rel="stylesheet" href="stylesheets/iphone.css" />
   8
   9         <script language="javascript">
  10         <!--
  11         var state = 'none';
  12
  13         function showhide(layer_ref) {
  14
  15         if (state == 'block') {
  16         state = 'none';
  17         }
  18         else {
  19         state = 'block';
  20         }
  21         if (document.getElementById &&!document.all) {
  22         hza = document.getElementById(layer_ref);
  23         hza.style.display = state;
  24         }
  25         }
  26         //-->
  27         </script>
  28
  29         <script type="text/javascript" charset="utf-8">
  30                 window.onload = function() {
  31                   setTimeout(function(){window.scrollTo(0, 1);}, 100);
  32                 }
  33         </script>
  34
  35 </head>
  36
  37 <body>
  38
  39         <div id="header">
  40                 <h1>Buttons</h1>
  41                 <a href="index.html" id="backButton">Index</a>
  42         </div>
  43
  44 <h1>Examples</h1>
  45
  46 <ul class="data">
  47         <li><p>Button panel it's useful to display as an modal window. It is placed always at the bottom of the screen and you can see 4 buttons example: white, red, blue (on hovers) and black.</p>
  48         </li>
  49 </ul>
  50
  51 <p><a href="#" class="green button" onclick="showhide('optionpanel');">Show panel</a></p>
  52
  53
  54 <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>
  55
  56 <div id="optionpanel" style="display: none">
  57
  58 <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>
  59
  60 </div>
  61
  62 </body>
  63 </html>