-
-
Save athieriot/997329 to your computer and use it in GitHub Desktop.
jQuery-UI iOS-Style Menu - a work in progress, using jQuery-UI 1.8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>jQuery UI Menu - Contextmenu demo</title> | |
| <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> | |
| <script type="text/javascript" src="../../jquery-1.5.1.js"></script> | |
| <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> | |
| <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> | |
| <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> | |
| <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> | |
| <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> | |
| <link type="text/css" href="../demos.css" rel="stylesheet" /> | |
| <script type="text/javascript"> | |
| $(function() { | |
| var demoUL = $("ul.demo") | |
| demoUL.menu({ | |
| position: function(active) { | |
| return { | |
| my: 'left top', | |
| at: 'right top', | |
| of: active.closest('.ui-menu') | |
| }; | |
| }, | |
| }); | |
| var menu = demoUL.data('menu.ui'); | |
| demoUL | |
| // this depends on adding "this._trigger('show', null, submenu);" to the end of Menu#show() | |
| .bind('menushow', function() { | |
| demoUL.find('.ui-menu:visible').each(function(i, ul) { | |
| $(ul).animate({ left: (ul.offsetLeft - 200) + 'px' }, 500); | |
| }); | |
| }) | |
| // I don't like the use of the private "_startOpening()" here | |
| .bind('menuselect', function(event, ui) { | |
| var nested = $(">ul", ui.item); | |
| if (nested.length) { | |
| menu.active = ui.item; | |
| menu._startOpening(nested); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .ui-menu { | |
| height: 180px; | |
| overflow: hidden; | |
| position: relative; | |
| width: 200px; | |
| } | |
| code { padding: 5px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <ul class='demo'> | |
| <li> | |
| <a href='#'>Europe</a> | |
| <ul> | |
| <li><a href="#">Amsterdam</a></li> | |
| <li><a href="#">Cologne</a></li> | |
| <li><a href="#">Frankfurt</a></li> | |
| <li><a href="#">Magdeburg</a></li> | |
| <li><a href="#">Munich</a></li> | |
| <li><a href="#">Utrecht</a></li> | |
| <li><a href="#">Zurich</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href='#'>Americas</a> | |
| <ul> | |
| <li> | |
| <a href='#'>North</a> | |
| <ul> | |
| <li><a href='#'>Boston</a></li> | |
| <li><a href='#'>Calgary</a></li> | |
| <li><a href='#'>Oaxaca</a></li> | |
| <li><a href='#'>San Antonio</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href='#'>South</a> | |
| <ul> | |
| <li><a href='#'>Bogota</a></li> | |
| <li><a href='#'>Guatemala</a></li> | |
| <li><a href='#'>Oranjestad</a></li> | |
| <li><a href='#'>São Paolo</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <div id="log"></div> | |
| </div><!-- End demo --> | |
| <div class="demo-description"> | |
| <p>An iOS-style menu.</p> | |
| <h2>Problems</h2> | |
| <ul> | |
| <li>requires a <code>"menushow"</code> event to be triggered at the end of <code>Menu#show()</code> | |
| <li>relies on the private <code>Menu#_startOpening(ul)</code> method</li> | |
| <li>position still isn't quite right on first submenu</li> | |
| <li>no animation on deeper sub-menus</li> | |
| </ul> | |
| </div><!-- End demo-description --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment