third-party/jquery-ui-1.10.2/tests/visual/menu/menu.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Menu Visual Test: Default</title>
   6         <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
   7         <script src="../../../jquery-1.9.1.js"></script>
   8         <script src="../../../ui/jquery.ui.core.js"></script>
   9         <script src="../../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../../ui/jquery.ui.position.js"></script>
  11         <script src="../../../ui/jquery.ui.menu.js"></script>
  12         <script>
  13         $(function() {
  14                 function logger( event, ui ) {
  15                         $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
  16                 }
  17
  18                 $( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({
  19                         select: logger
  20                 });
  21
  22                 $( "#menu5" ).menu({
  23                         menus: "div",
  24                         select: logger
  25                 });
  26
  27                 $( "#menu6" ).menu({
  28                         menus: ".menuElement",
  29                         select: logger,
  30                         icon: "ui-icon-carat-1-s"
  31                 });
  32         });
  33         </script>
  34         <style>
  35                 body { font-size:62.5%; }
  36                 .ui-menu { width: 200px; margin-bottom: 2em; }
  37                 .menu4 { height: 200px; overflow-y: auto; overflow-x: hidden; }
  38                 .address-item { border-bottom: 1px solid #999; }
  39                 .address-header { display: block; margin-bottom: .2em; font-weight: bold; }
  40                 .address-content { display: block; margin-bottom: .2em; padding-left: 10px; }
  41         </style>
  42 </head>
  43 <body>
  44
  45 <h2>Default inline menu</h2>
  46 <ul id="menu1">
  47         <li><a href="#">Aberdeen</a></li>
  48         <li><a href="#">Ada</a></li>
  49         <li><a href="#">Adamsville</a></li>
  50         <li><a href="#">Addyston</a></li>
  51         <li><a href="#">Delphi</a></li>
  52         <li><a href="#">Saarland</a></li>
  53         <li><a href="#">Salzburg</a></li>
  54 </ul>
  55
  56 <h2>Inline with disabled items and submenus</h2>
  57 <ul id="menu2">
  58         <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
  59         <li><a href="#">Ada</a></li>
  60         <li><a href="#">Adamsville</a></li>
  61         <li><a href="#">Addyston</a></li>
  62         <li>
  63                 <a href="#">Delphi</a>
  64                 <ul>
  65                         <li class="ui-state-disabled"><a href="#">Ada</a></li>
  66                         <li><a href="#">Saarland</a></li>
  67                         <li><a href="#">Salzburg</a></li>
  68                 </ul>
  69         </li>
  70         <li><a href="#">Saarland</a></li>
  71         <li>
  72                 <a href="#">Salzburg</a>
  73                 <ul>
  74                         <li>
  75                                 <a href="#">Delphi</a>
  76                                 <ul>
  77                                         <li><a href="#">Ada</a></li>
  78                                         <li><a href="#">Saarland</a></li>
  79                                         <li><a href="#">Salzburg</a></li>
  80                                 </ul>
  81                         </li>
  82                         <li>
  83                                 <a href="#">Delphi</a>
  84                                 <ul>
  85                                         <li><a href="#">Ada</a></li>
  86                                         <li><a href="#">Saarland</a></li>
  87                                         <li><a href="#">Salzburg</a></li>
  88                                 </ul>
  89                         </li>
  90                         <li><a href="#">Perch</a></li>
  91                 </ul>
  92         </li>
  93         <li class="ui-state-disabled"><a href="#">Amesville</a></li>
  94 </ul>
  95
  96 <h2>Menu with icons</h2>
  97 <ul id="menu3">
  98         <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
  99         <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li>
 100         <li><a href="#">Adamsville</a></li>
 101         <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li>
 102         <li class="ui-state-disabled">
 103                 <a href="#">Delphi</a>
 104                 <ul>
 105                         <li><a href="#">Ada</a></li>
 106                         <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
 107                         <li><a href="#">Salzburg</a></li>
 108                 </ul>
 109         </li>
 110         <li><a href="#">Saarland</a></li>
 111         <li>
 112                 <a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a>
 113                 <ul>
 114                         <li>
 115                                 <a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a>
 116                                 <ul>
 117                                         <li><a href="#">Ada</a></li>
 118                                         <li><a href="#">Saarland</a></li>
 119                                         <li><a href="#">Salzburg</a></li>
 120                                 </ul>
 121                         </li>
 122                         <li>
 123                                 <a href="#">Delphi</a>
 124                                 <ul>
 125                                         <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li>
 126                                         <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
 127                                         <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li>
 128                                 </ul>
 129                         </li>
 130                         <li><a href="#">Perch</a></li>
 131                 </ul>
 132         </li>
 133 </ul>
 134
 135 <h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2>
 136 <ul class="menu4">
 137         <li><a href="#">Aberdeen</a></li>
 138         <li><a href="#">Ada</a></li>
 139         <li><a href="#">Adamsville</a></li>
 140         <li><a href="#">Addyston</a></li>
 141         <li><a href="#">Adelphi</a></li>
 142         <li><a href="#">Adena</a></li>
 143         <li><a href="#">Adrian</a></li>
 144         <li><a href="#">Akron</a></li>
 145         <li><a href="#">Albany</a></li>
 146         <li><a href="#">Alexandria</a></li>
 147         <li><a href="#">Alger</a></li>
 148         <li><a href="#">Alledonia</a></li>
 149         <li><a href="#">Alliance</a></li>
 150         <li><a href="#">Alpha</a></li>
 151         <li><a href="#">Alvada</a></li>
 152         <li><a href="#">Alvordton</a></li>
 153         <li><a href="#">Amanda</a></li>
 154         <li><a href="#">Amelia</a></li>
 155         <li><a href="#">Amesville</a></li>
 156         <li><a href="#">Aberdeen</a></li>
 157         <li><a href="#">Ada</a></li>
 158         <li><a href="#">Adamsville</a></li>
 159         <li><a href="#">Addyston</a></li>
 160         <li><a href="#">Adelphi</a></li>
 161         <li><a href="#">Adena</a></li>
 162         <li><a href="#">Adrian</a></li>
 163         <li><a href="#">Akron</a></li>
 164         <li><a href="#">Albany</a></li>
 165         <li><a href="#">Alexandria</a></li>
 166         <li><a href="#">Alger</a></li>
 167         <li><a href="#">Alledonia</a></li>
 168         <li><a href="#">Alliance</a></li>
 169         <li><a href="#">Alpha</a></li>
 170         <li><a href="#">Alvada</a></li>
 171         <li><a href="#">Alvordton</a></li>
 172         <li><a href="#">Amanda</a></li>
 173         <li><a href="#">Amelia</a></li>
 174         <li><a href="#">Amesville</a></li>
 175 </ul>
 176
 177 <h2>Menu with custom markup</h2>
 178 <div id="menu5">
 179         <blockquote><a href="#">Aberdeen</a></blockquote>
 180         <blockquote><a href="#">Ada</a></blockquote>
 181         <blockquote class="ui-state-disabled"><a href="#">Adamsville</a></blockquote>
 182         <blockquote><a href="#">Addyston</a></blockquote>
 183         <blockquote>
 184                 <a href="#">Delphi</a>
 185                 <div>
 186                         <blockquote><a href="#">Ada</a></blockquote>
 187                         <blockquote><a href="#">Saarland</a></blockquote>
 188                         <blockquote><a href="#">Salzburg</a></blockquote>
 189                 </div>
 190         </blockquote>
 191         <blockquote><a href="#">Saarland</a></blockquote>
 192         <blockquote>
 193                 <a href="#">Salzburg</a>
 194                 <div>
 195                         <blockquote>
 196                                 <a href="#">Delphi</a>
 197                                 <div>
 198                                         <blockquote><a href="#">Ada</a></blockquote>
 199                                         <blockquote><a href="#">Saarland</a></blockquote>
 200                                         <blockquote><a href="#">Salzburg</a></blockquote>
 201                                 </div>
 202                         </blockquote>
 203                         <blockquote>
 204                                 <a href="#">Delphi</a>
 205                                 <div>
 206                                         <blockquote><a href="#">Ada</a></blockquote>
 207                                         <blockquote><a href="#">Saarland</a></blockquote>
 208                                         <blockquote><a href="#">Salzburg</a></blockquote>
 209                                 </div>
 210                         </blockquote>
 211                         <blockquote><a href="#">Perch</a></blockquote>
 212                 </div>
 213         </blockquote>
 214 </div>
 215
 216 <h2>Menu with custom markup, multi-line items and a custom submenu icon</h2>
 217 <div class="menuElement" id="menu6">
 218         <div class="address-item">
 219                 <a href="#">
 220                         <span class="address-header">John Doe</span>
 221                         <span class="address-content">78 West Main St Apt 3A</span>
 222                         <span class="address-content">Bloomsburg, PA 12345</span>
 223                 </a>
 224         </div>
 225         <div class="address-item">
 226                 <a href="#">
 227                         <span class="address-header">Jane Doe</span>
 228                         <span class="address-content">78 West Main St Apt 3A</span>
 229                         <span class="address-content">Bloomsburg, PA 12345</span>
 230                 </a>
 231         </div>
 232         <div class="address-item ui-state-disabled">
 233                 <a href="#">
 234                         <span class="address-header">James Doe</span>
 235                         <span class="address-content">78 West Main St Apt 3A</span>
 236                         <span class="address-content">Bloomsburg, PA 12345</span>
 237                 </a>
 238         </div>
 239         <div class="address-item">
 240                 <a href="#">
 241                         <span class="address-header">Jenny Doe</span>
 242                         <span class="address-content">78 West Main St Apt 3A</span>
 243                         <span class="address-content">Bloomsburg, PA 12345</span>
 244                 </a>
 245         </div>
 246         <div class="address-item">
 247                 <a href="#">
 248                         <span class="address-header">John Doe</span>
 249                         <span class="address-content">78 West Main St Apt 3A</span>
 250                         <span class="address-content">Bloomsburg, PA 12345</span>
 251                 </a>
 252                 <div class="menuElement">
 253                         <div><a href="#">Ada</a></div>
 254                         <div><a href="#">Saarland</a></div>
 255                         <div><a href="#">Salzburg</a></div>
 256                 </div>
 257         </div>
 258 </div>
 259
 260 <h2>Inline with dividers and elements without anchors</h2>
 261 <ul id="menu7">
 262         <li><strong>Group 1</strong></li>
 263         <li><a href="#">Aberdeen</a></li>
 264         <li><a href="#">Ada</a></li>
 265         <li><a href="#">Adamsville</a></li>
 266         <li><a href="#">Addyston</a></li>
 267         <li></li>
 268         <li><strong>Group 2</strong></li>
 269         <li>
 270                 <a href="#">Delphi</a>
 271                 <ul>
 272                         <li><a href="#">Ada</a></li>
 273                         <li><a href="#">Saarland</a></li>
 274                         <li><a href="#">Salzburg</a></li>
 275                 </ul>
 276         </li>
 277         <li><a href="#">Saarland</a></li>
 278         <li>---</li>
 279         <li><strong>Group 3</strong></li>
 280         <li>
 281                 <a href="#">Salzburg</a>
 282                 <ul>
 283                         <li>
 284                                 <a href="#">Delphi</a>
 285                                 <ul>
 286                                         <li><a href="#">Ada</a></li>
 287                                         <li> - </li>
 288                                         <li><a href="#">Saarland</a></li>
 289                                         <li>&mdash;</li>
 290                                         <li><a href="#">Salzburg</a></li>
 291                                         <li>&ndash;</li>
 292                                 </ul>
 293                         </li>
 294                         <li>
 295                                 <a href="#">Delphi</a>
 296                                 <ul>
 297                                         <li><a href="#">Ada</a></li>
 298                                         <li><a href="#">Saarland</a></li>
 299                                         <li><a href="#">Salzburg</a></li>
 300                                 </ul>
 301                         </li>
 302                         <li><a href="#">Perch</a></li>
 303                 </ul>
 304         </li>
 305         <li><a href="#">Amesville</a></li>
 306 </ul>
 307
 308 <div style="position: absolute; top: 1em; right: 1em;">
 309         Log:
 310         <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div>
 311 </div>
 312
 313 </body>
 314 </html>