third-party/jquery-ui-1.10.2/tests/visual/compound/tabs_tabs.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Compound Visual Test : Tabs in Tabs</title>
   6         <link rel="stylesheet" href="../visual.css">
   7         <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
   8         <script src="../../../jquery-1.9.1.js"></script>
   9         <script src="../../../ui/jquery.ui.core.js"></script>
  10         <script src="../../../ui/jquery.ui.widget.js"></script>
  11         <script src="../../../ui/jquery.ui.accordion.js"></script>
  12         <script src="../../../ui/jquery.ui.tabs.js"></script>
  13         <script>
  14         $(function() {
  15                 $( "#tabs, #tabs-a, #tabs-b" ).tabs();
  16         });
  17         </script>
  18 </head>
  19 <body>
  20
  21 <div id="tabs">
  22         <ul>
  23                 <li><a href="#tabs-1">First</a></li>
  24                 <li><a href="#tabs-2">Second</a></li>
  25         </ul>
  26         <div id="tabs-1">
  27                 <div id="tabs-a">
  28                         <ul>
  29                                 <li><a href="#tabs-a-1">First</a></li>
  30                                 <li><a href="#tabs-a-2">Second</a></li>
  31                         </ul>
  32                         <div id="tabs-a-1">
  33                                 <p>nested tabs a-1</p>
  34                                 <p>nested tabs a-1</p>
  35                                 <p>nested tabs a-1</p>
  36                                 <p>nested tabs a-1</p>
  37                                 <p>nested tabs a-1</p>
  38                         </div>
  39                         <div id="tabs-a-2">
  40                                 <p>nested tabs a-2</p>
  41                                 <p>nested tabs a-2</p>
  42                                 <p>nested tabs a-2</p>
  43                                 <p>nested tabs a-2</p>
  44                                 <p>nested tabs a-2</p>
  45                         </div>
  46                 </div>
  47         </div>
  48         <div id="tabs-2">
  49                 <div id="tabs-b">
  50                         <ul>
  51                                 <li><a href="#tabs-b-1">First</a></li>
  52                                 <li><a href="#tabs-b-2">Second</a></li>
  53                         </ul>
  54                         <div id="tabs-b-1">
  55                                 <p>nested tabs b-1</p>
  56                                 <p>nested tabs b-1</p>
  57                                 <p>nested tabs b-1</p>
  58                                 <p>nested tabs b-1</p>
  59                                 <p>nested tabs b-1</p>
  60                         </div>
  61                         <div id="tabs-b-2">
  62                                 <p>nested tabs b-2</p>
  63                                 <p>nested tabs b-2</p>
  64                                 <p>nested tabs b-2</p>
  65                                 <p>nested tabs b-2</p>
  66                                 <p>nested tabs b-2</p>
  67                         </div>
  68                 </div>
  69         </div>
  70 </div>
  71
  72 </body>
  73 </html>