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

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Compound Visual Test : Draggable in Accordion</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.accordion.js"></script>
  13         <script src="../../../ui/jquery.ui.draggable.js"></script>
  14         <script src="../../../ui/jquery.ui.tabs.js"></script>
  15         <style>
  16         #main-draggable {
  17                 width: 300px;
  18                 position: absolute;
  19                 right: 100px;
  20         }
  21         #main-draggable-handle {
  22                 padding: 1em;
  23                 margin: 0;
  24         }
  25         .draggable {
  26                 width: 10em;
  27                 margin: 0.5em;
  28         }
  29         </style>
  30         <script>
  31         $(function() {
  32                 $( ".draggable" )
  33                         .addClass( "ui-widget ui-widget-content ui-corner-all" )
  34                         .draggable({
  35                                 helper: "clone",
  36                                 appendTo: "body"
  37                         });
  38
  39                 $( "#accordion > div" ).accordion();
  40                 $( "#accordion" ).accordion();
  41
  42                 $( "#tabs" ).tabs();
  43
  44                 $( "#main-draggable" ).draggable({
  45                         handle: "#main-draggable-handle"
  46                 });
  47         });
  48         </script>
  49 </head>
  50 <body>
  51 <div id="main-draggable" class="ui-widget ui-widget-content ui-corner-all">
  52         <p id="main-draggable-handle" class="ui-widget-header ui-corner-all">Drag me around!</p>
  53         <div id="tabs">
  54                 <ul>
  55                         <li><a href="#tabs-1">First Tab</a></li>
  56                         <li><a href="#tabs-2">Second Tab</a></li>
  57                 </ul>
  58                 <div id="tabs-1">
  59                         <p>Click the other tab!</p>
  60                 </div>
  61                 <div id="tabs-2">
  62                         <div id="accordion">
  63                                 <h3>Accordion Group 1</h3>
  64                                 <div id="accordion-1-1">
  65                                         <h3>Header 1-1</h3>
  66                                         <div>
  67                                                 <div class="draggable">Draggable 1-1</div>
  68                                                 <div class="draggable">Draggable 1-2</div>
  69                                                 <div class="draggable">Draggable 1-3</div>
  70                                                 <div class="draggable">Draggable 1-4</div>
  71                                                 <div class="draggable">Draggable 1-5</div>
  72                                         </div>
  73                                         <h3>Header 1-2</h3>
  74                                         <div>
  75                                                 <div class="draggable">Draggable 2-1</div>
  76                                                 <div class="draggable">Draggable 2-2</div>
  77                                                 <div class="draggable">Draggable 2-3</div>
  78                                                 <div class="draggable">Draggable 2-4</div>
  79                                                 <div class="draggable">Draggable 2-5</div>
  80                                         </div>
  81                                 </div>
  82                                 <h3>Accordion Group 2</h3>
  83                                 <div id="accordion-1-2">
  84                                         <h3>Header 2-1</h3>
  85                                         <div>
  86                                                 <div class="draggable">Draggable 1-1</div>
  87                                                 <div class="draggable">Draggable 1-2</div>
  88                                                 <div class="draggable">Draggable 1-3</div>
  89                                                 <div class="draggable">Draggable 1-4</div>
  90                                                 <div class="draggable">Draggable 1-5</div>
  91                                         </div>
  92                                         <h3>Header 2-2</h3>
  93                                         <div>
  94                                                 <div class="draggable">Draggable 2-1</div>
  95                                                 <div class="draggable">Draggable 2-2</div>
  96                                                 <div class="draggable">Draggable 2-3</div>
  97                                                 <div class="draggable">Draggable 2-4</div>
  98                                                 <div class="draggable">Draggable 2-5</div>
  99                                         </div>
 100                                 </div>
 101                         </div>
 102                 </div>
 103         </div>
 104 </div>
 105
 106 </body>
 107 </html>