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