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

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Compound Visual Test : Accordion 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.mouse.js"></script>
  12         <script src="../../../ui/jquery.ui.sortable.js"></script>
  13         <script src="../../../ui/jquery.ui.accordion.js"></script>
  14         <script src="../../../ui/jquery.ui.tabs.js"></script>
  15         <script>
  16         $(function() {
  17                 $( "#accordion-1, #accordion-2" )
  18                         .accordion({
  19                                 header: "> div > h3"
  20                         })
  21                         .sortable();
  22
  23                 $( "#tabs" )
  24                         .tabs()
  25                         .find( ".ui-tabs-nav" )
  26                                 .sortable();
  27         });
  28         </script>
  29 </head>
  30 <body>
  31
  32 <div id="tabs">
  33         <ul>
  34                 <li><a href="#tabs-1">1 - Accordion</a></li>
  35                 <li><a href="#tabs-2">2 - Empty</a></li>
  36                 <li><a href="#tabs-3">3 - Empty</a></li>
  37                 <li><a href="#tabs-4">4 - Accordion</a></li>
  38         </ul>
  39         <div id="tabs-1">
  40                 <div id="accordion-1">
  41                         <div>
  42                                 <h3>Accordion Header 1</h3>
  43                                 <div>
  44                                         <p>Accordion Content 1</p>
  45                                         <p>Accordion Content 1</p>
  46                                         <p>Accordion Content 1</p>
  47                                         <p>Accordion Content 1</p>
  48                                         <p>Accordion Content 1</p>
  49                                 </div>
  50                         </div>
  51                         <div>
  52                                 <h3>Accordion Header 2</h3>
  53                                 <div>
  54                                         <p>Accordion Content 2</p>
  55                                         <p>Accordion Content 2</p>
  56                                         <p>Accordion Content 2</p>
  57                                         <p>Accordion Content 2</p>
  58                                         <p>Accordion Content 2</p>
  59                                 </div>
  60                         </div>
  61                         <div>
  62                                 <h3>Accordion Header 3</h3>
  63                                 <div>
  64                                         <p>Accordion Content 3</p>
  65                                         <p>Accordion Content 3</p>
  66                                         <p>Accordion Content 3</p>
  67                                         <p>Accordion Content 3</p>
  68                                         <p>Accordion Content 3</p>
  69                                 </div>
  70                         </div>
  71                 </div>
  72         </div>
  73         <div id="tabs-2">
  74                 <p>Nothing to look at here...</p>
  75         </div>
  76         <div id="tabs-3">
  77                 <p>Nothing to look at here...</p>
  78         </div>
  79         <div id="tabs-4">
  80                 <div id="accordion-2">
  81                         <div>
  82                                 <h3>Accordion Header 1</h3>
  83                                 <div>
  84                                         <p>Accordion Content 1</p>
  85                                         <p>Accordion Content 1</p>
  86                                         <p>Accordion Content 1</p>
  87                                         <p>Accordion Content 1</p>
  88                                         <p>Accordion Content 1</p>
  89                                 </div>
  90                         </div>
  91                         <div>
  92                                 <h3>Accordion Header 2</h3>
  93                                 <div>
  94                                         <p>Accordion Content 2</p>
  95                                         <p>Accordion Content 2</p>
  96                                         <p>Accordion Content 2</p>
  97                                         <p>Accordion Content 2</p>
  98                                         <p>Accordion Content 2</p>
  99                                 </div>
 100                         </div>
 101                         <div>
 102                                 <h3>Accordion Header 3</h3>
 103                                 <div>
 104                                         <p>Accordion Content 3</p>
 105                                         <p>Accordion Content 3</p>
 106                                         <p>Accordion Content 3</p>
 107                                         <p>Accordion Content 3</p>
 108                                         <p>Accordion Content 3</p>
 109                                 </div>
 110                         </div>
 111                 </div>
 112         </div>
 113 </div>
 114
 115 </body>
 116 </html>