Skip to content
Permalink
Browse files

Menu: Introducing position option into flyout menu

  • Loading branch information...
jzaefferer committed Feb 23, 2011
1 parent faa4b97 commit ddfd5e632cf4a1517c1f28d89c2b9c00429e8ab2
Showing with 30 additions and 8 deletions.
  1. +13 −3 tests/visual/menu/flyoutmenu.html
  2. +17 −5 tests/visual/menu/flyoutmenu.js
@@ -28,7 +28,6 @@
// TODO required to prevent the click handler below from handling this event
event.stopPropagation();
menu.flyoutmenu("show")
//.attr("tabIndex", 0)
.focus()
.css({
top: 0,
@@ -45,17 +44,28 @@
});
menu.flyoutmenu({
//input: button,
/* top-alignment
position: function(item) {
return {
my: "left top",
at: "right top",
of: item.parent()
}
},
*/
select: function(event, ui) {
$("#log").append("<div>Selected " + ui.item.children("a").text() + "</div>");
button.focus();
}
}).hide();
// equal height
//menu.find("ul").height(menu.height());
});
</script>
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; position: absolute; }
.ui-menu { width: 200px; position: absolute; outline: none; }
.ui-menu .ui-icon { float: right; }
</style>
</head>
@@ -6,6 +6,14 @@
(function($) {

$.widget("ui.flyoutmenu", {

options: {
position: {
my: "left top",
at: "right top"
}
},

_create: function() {
var self = this;
this.active = this.element;
@@ -90,14 +98,18 @@ $.widget("ui.flyoutmenu", {
// TODO restrict to widget
//only one menu can have items open at a time.
$(document).find(".ui-menu-flyout").not(submenu.parents()).hide();

var position = $.extend({}, {
of: this.activeItem
}, $.type(this.options.position) == "function"
? this.options.position(this.activeItem)
: this.options.position
);

submenu.show().css({
top: 0,
left: 0
}).position({
my: "left top",
at: "right top",
of: this.activeItem
});
}).position(position);
},
_select: function(event) {
event.stopPropagation();

0 comments on commit ddfd5e6

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