Skip to content
Permalink
Browse files

Menu: Integrated flyoutmenu into menu, and moved flyoutmenu.html

testmenu into contextmenu.html
  • Loading branch information...
jzaefferer committed Feb 24, 2011
1 parent 38cfcff commit 0ddf677e40a7feaaeefcc44f2a4910923f1bc258
@@ -20,23 +20,36 @@
top: 10
}).appendTo(document.body).themeswitcher();
// TODO close other menus when opening a new one
$("button").each(function() {
$(this).next().menu({
/* top-alignment
position: function(item) {
return {
my: "left top",
at: "right top",
of: item.parent()
}
},
*/
select: function(event, ui) {
$(this).hide().prev().focus();
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
}
}).hide();
// equal height
//menu.find("ul").height(menu.height());
}).click(function(event) {
// TODO required to prevent the click handler below from handling this event
// required to prevent the click handler below from handling this event
event.stopPropagation();
var menu = $("#menu" + this.id).menu("blur").show().position({
my: "left top",
at: "right top",
of: event.pageX > 0 ? event : this
}).focus();
$(document).one("click", function() {
menu.hide();
menu.menu("closeAll").menu("widget").hide();
})
}).next().keydown(function(event) {
var menu = $(this).data("menu");
@@ -45,10 +58,14 @@
event.stopPropagation();
switch (event.keyCode) {
case $.ui.keyCode.TAB:
menu.closeAll();
menu.widget().hide();
$(this).prev().focus()
break;
case $.ui.keyCode.ESCAPE:
menu.closeAll();
menu.widget().hide();
$(this).prev().focus()
break;
default:
@@ -59,7 +76,7 @@
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; position: absolute; }
#menu2 { height: 200px; overflow: auto; }
#menu3 { height: 200px; overflow: auto; }
</style>
</head>
<body>
@@ -76,13 +93,60 @@
<li><a href="#">Zurich</a></li>
</ul>

<button id="2">Show context menu 2</button>
<ul id="menu2">
<li>
<a id="a1" href="#">Amsterdam</a>
<ul>
<li><a id="b1" href="#">Aberdeen</a></li>
<li><a id="b2" href="#">Ada</a></li>
<li>
<a href="#">Adamsville</a>
<ul>
<li><a href="#">Anaheim</a></li>
<li>
<a href="#">Cologne</a>
<ul>
<li><a href="#">Mberdeen</a></li>
<li><a href="#">Mda</a></li>
<li><a href="#">Mdamsville</a></li>
<li><a href="#">Mddyston</a></li>
<li><a href="#">Mmesville</a></li>
</ul>
</li>
<li><a href="#">Frankfurt</a></li>
</ul>
</li>
<li><a href="#">Addyston</a></li>
<li><a href="#">Amesville</a></li>
</ul>
</li>
<li><a id="a2" href="#">Anaheim</a></li>
<li><a id="a3" href="#">Cologne</a></li>
<li><a href="#">Frankfurt</a></li>
<li>
<a href="#">Magdeburg</a>
<ul>
<li><a href="#">Mberdeen</a></li>
<li><a href="#">Mda</a></li>
<li><a href="#">Mdamsville</a></li>
<li><a href="#">Mddyston</a></li>
<li><a href="#">Mmesville</a></li>
</ul>
</li>
<li><a href="#">Munich</a></li>
<li><a href="#">Utrecht</a></li>
<li><a href="#">Zurich</a></li>
</ul>


<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

<button id="2">Show context menu 2</button>
<ul id="menu2">
<button id="3">Show context menu 3</button>
<ul id="menu3">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>

This file was deleted.

This file was deleted.

@@ -7,6 +7,7 @@
<script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript">
$(function() {
@@ -40,7 +41,7 @@
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; }
#menu2 { height: 200px; overflow: auto; }
#menu3 { height: 200px; overflow: auto; }
</style>
</head>
<body>
@@ -69,7 +70,14 @@
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
<li>
<a href="#">Salzburg</a>
<ul>
<li><a href="#">Alliance</a></li>
<li><a href="#">Krombach</a></li>
<li><a href="#">Perch</a></li>
</ul>
</li>
</ul>

<ul id="menu3">

0 comments on commit 0ddf677

Please sign in to comment.
You can’t perform that action at this time.