Menu: Introducing position option into flyout menu

tests/visual/menu/flyoutmenu.html

@@ -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>

tests/visual/menu/flyoutmenu.js

@@ -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();