diff options
Diffstat (limited to 'tests/visual/menu/menu.html')
| -rw-r--r-- | tests/visual/menu/menu.html | 321 |
1 files changed, 151 insertions, 170 deletions
diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 3d4e81e92..1c203ef12 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -15,7 +15,7 @@ $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); } - $( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({ + $( "#menu1, #menu2, #menu3, .menu4" ).menu({ select: logger }); @@ -29,6 +29,11 @@ select: logger, icon: "ui-icon-carat-1-s" }); + + $( "#menu7" ).menu({ + items: "> :not('.ui-menu-group')", + select: logger + }); }); </script> <style> @@ -44,171 +49,161 @@ <h2>Default inline menu</h2> <ul id="menu1"> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Delphi</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Delphi</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> <h2>Inline with disabled items and submenus</h2> <ul id="menu2"> - <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li> - <a href="#">Delphi</a> + <li class="ui-state-disabled">Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Delphi <ul> - <li class="ui-state-disabled"><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li class="ui-state-disabled">Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Saarland</a></li> - <li> - <a href="#">Salzburg</a> + <li>Saarland</li> + <li>Salzburg <ul> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Perch</a></li> + <li>Perch</li> </ul> </li> - <li class="ui-state-disabled"><a href="#">Amesville</a></li> + <li class="ui-state-disabled">Amesville</li> </ul> <h2>Menu with icons</h2> <ul id="menu3"> - <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> - <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li> - <li class="ui-state-disabled"> - <a href="#">Delphi</a> + <li><span class="ui-icon ui-icon-print"></span>Aberdeen</li> + <li class="ui-state-disabled"><span class="ui-icon ui-icon-scissors"></span>Ada</li> + <li>Adamsville</li> + <li><span class="ui-icon ui-icon-wrench"></span>Addyston</li> + <li class="ui-state-disabled">Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Saarland</a></li> + <li>Saarland</li> <li> - <a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a> + <span class="ui-icon ui-icon-print"></span>Salzburg <ul> <li> - <a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a> + <span class="ui-icon ui-icon-wrench"></span>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li> + <li><span class="ui-icon ui-icon-wrench"></span>Ada</li> + <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li> + <li><span class="ui-icon ui-icon-wrench"></span>Salzburg</li> </ul> </li> - <li><a href="#">Perch</a></li> + <li>Perch</li> </ul> </li> </ul> <h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2> <ul class="menu4"> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Adelphi</a></li> - <li><a href="#">Adena</a></li> - <li><a href="#">Adrian</a></li> - <li><a href="#">Akron</a></li> - <li><a href="#">Albany</a></li> - <li><a href="#">Alexandria</a></li> - <li><a href="#">Alger</a></li> - <li><a href="#">Alledonia</a></li> - <li><a href="#">Alliance</a></li> - <li><a href="#">Alpha</a></li> - <li><a href="#">Alvada</a></li> - <li><a href="#">Alvordton</a></li> - <li><a href="#">Amanda</a></li> - <li><a href="#">Amelia</a></li> - <li><a href="#">Amesville</a></li> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Adelphi</a></li> - <li><a href="#">Adena</a></li> - <li><a href="#">Adrian</a></li> - <li><a href="#">Akron</a></li> - <li><a href="#">Albany</a></li> - <li><a href="#">Alexandria</a></li> - <li><a href="#">Alger</a></li> - <li><a href="#">Alledonia</a></li> - <li><a href="#">Alliance</a></li> - <li><a href="#">Alpha</a></li> - <li><a href="#">Alvada</a></li> - <li><a href="#">Alvordton</a></li> - <li><a href="#">Amanda</a></li> - <li><a href="#">Amelia</a></li> - <li><a href="#">Amesville</a></li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Adelphi</li> + <li>Adena</li> + <li>Adrian</li> + <li>Akron</li> + <li>Albany</li> + <li>Alexandria</li> + <li>Alger</li> + <li>Alledonia</li> + <li>Alliance</li> + <li>Alpha</li> + <li>Alvada</li> + <li>Alvordton</li> + <li>Amanda</li> + <li>Amelia</li> + <li>Amesville</li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Adelphi</li> + <li>Adena</li> + <li>Adrian</li> + <li>Akron</li> + <li>Albany</li> + <li>Alexandria</li> + <li>Alger</li> + <li>Alledonia</li> + <li>Alliance</li> + <li>Alpha</li> + <li>Alvada</li> + <li>Alvordton</li> + <li>Amanda</li> + <li>Amelia</li> + <li>Amesville</li> </ul> <h2>Menu with custom markup</h2> <div id="menu5"> - <blockquote><a href="#">Aberdeen</a></blockquote> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote class="ui-state-disabled"><a href="#">Adamsville</a></blockquote> - <blockquote><a href="#">Addyston</a></blockquote> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Aberdeen</blockquote> + <blockquote>Ada</blockquote> + <blockquote class="ui-state-disabled">Adamsville</blockquote> + <blockquote>Addyston</blockquote> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote> - <a href="#">Salzburg</a> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg <div> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote><a href="#">Perch</a></blockquote> + <blockquote>Perch</blockquote> </div> </blockquote> </div> @@ -216,93 +211,79 @@ <h2>Menu with custom markup, multi-line items and a custom submenu icon</h2> <div class="menuElement" id="menu6"> <div class="address-item"> - <a href="#"> - <span class="address-header">John Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">John Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> </div> <div class="address-item"> - <a href="#"> - <span class="address-header">Jane Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">Jane Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> </div> <div class="address-item ui-state-disabled"> - <a href="#"> - <span class="address-header">James Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">James Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> </div> <div class="address-item"> - <a href="#"> - <span class="address-header">Jenny Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">Jenny Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> </div> <div class="address-item"> - <a href="#"> - <span class="address-header">John Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">John Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> <div class="menuElement"> - <div><a href="#">Ada</a></div> - <div><a href="#">Saarland</a></div> - <div><a href="#">Salzburg</a></div> + <div>Ada</div> + <div>Saarland</div> + <div>Salzburg</div> </div> </div> </div> -<h2>Inline with dividers and elements without anchors</h2> +<h2>Inline with dividers and group labels</h2> <ul id="menu7"> - <li><strong>Group 1</strong></li> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> + <li class="ui-menu-group"><strong>Group 1</strong></li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> <li></li> - <li><strong>Group 2</strong></li> - <li> - <a href="#">Delphi</a> + <li class="ui-menu-group"><strong>Group 2</strong></li> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Saarland</a></li> + <li>Saarland</li> <li>---</li> - <li><strong>Group 3</strong></li> - <li> - <a href="#">Salzburg</a> + <li class="ui-menu-group"><strong>Group 3</strong></li> + <li>Salzburg <ul> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> + <li>Ada</li> <li> - </li> - <li><a href="#">Saarland</a></li> + <li>Saarland</li> <li>—</li> - <li><a href="#">Salzburg</a></li> + <li>Salzburg</li> <li>–</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Perch</a></li> + <li>Perch</li> </ul> </li> - <li><a href="#">Amesville</a></li> + <li>Amesville</li> </ul> <div style="position: absolute; top: 1em; right: 1em;"> |