libs/js/jquery-mobile-1.0.1pre/tests/functional/gridlayout.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta charset="utf-8" />
   5         <title>jQuery Mobile: Grid Layout</title>
   6         <link rel="stylesheet"  href="../../css/themes/default/" />
   7         <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
   8         <script src="../../js/jquery.js"></script>
   9         <script src="../../js/"></script>
  10
  11         <script>
  12         $(function(){
  13                 $(".ui-grid-d a").bind("tap click", function(e){
  14                         $(this).hide();
  15                         $("#log")
  16                                 .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"; message: grid '"+$(this).text()+"' hidden</li>")
  17                                 .listview("refresh");
  18                         return false;
  19                 }).bind("tap click", false);
  20                 $("#showbtn").bind("tap click", function(e){
  21                         $(".ui-grid-d a").show();
  22                         $("#log")
  23                                 .prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"; message: show all buttons</li>")
  24                                 .listview("refresh");
  25                 }).bind("tap click", false);
  26         });
  27         </script>
  28 </head>
  29 <body>
  30 <div data-role="page" data-theme="b" id="jqm-home">
  31         <div data-role="header">
  32                 <h1>Grid Layout</h1>
  33         </div>
  34
  35         <div data-role="content">
  36                 <p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
  37
  38                 <div class="ui-grid-d">
  39                         <div class="ui-block-a">
  40                                 <a data-role="button" id="btn1" data-theme="b">Button 1</a>
  41                         </div>
  42                         <div class="ui-block-b">
  43                                 <a data-role="button" id="btn2" data-theme="b">Button 2</a>
  44                         </div>
  45                         <div class="ui-block-c">
  46                                 <a data-role="button" id="btn3" data-theme="b">Button 3</a>
  47                         </div>
  48                         <div class="ui-block-d">
  49                                 <a data-role="button" id="btn4" data-theme="b">Button 4</a>
  50                         </div>
  51                         <div class="ui-block-e">
  52                                 <a data-role="button" id="btn5" data-theme="b">Button 5</a>
  53                         </div>
  54                 </div>
  55
  56                 <a data-role="button" id="showbtn">Show all button</a>
  57
  58                 <ul data-role="listview" id="log">
  59
  60                 </ul>
  61
  62         </div>
  63 </div>
  64 </body>
  65 </html>