s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Polished popup menus: popouts are positioned better to show the right arrows, expanded sub-menus are persistently highlighted in gray.

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@52 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-02-05 23:24:52 +00:00
parent 98a16ca500
commit 02b0c40558
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/main/webapp/scripts/util/menu.js
View File

@ -3,7 +3,7 @@ MenuSystem = {
_overlay: null _overlay: null
}; };
MenuSystem.showMenu = function(elmt) { MenuSystem.showMenu = function(elmt, onDismiss) {
if (MenuSystem._overlay == null) { if (MenuSystem._overlay == null) {
MenuSystem._overlay = $('<div>&nbsp;</div>') MenuSystem._overlay = $('<div>&nbsp;</div>')
.addClass("menu-overlay") .addClass("menu-overlay")
@ -15,7 +15,8 @@ MenuSystem.showMenu = function(elmt) {
elmt.css("z-index", 1001 + MenuSystem._layers.length).appendTo(document.body); elmt.css("z-index", 1001 + MenuSystem._layers.length).appendTo(document.body);
var layer = { var layer = {
elmt: elmt elmt: elmt,
onDismiss: onDismiss
}; };
MenuSystem._layers.push(layer); MenuSystem._layers.push(layer);
@ -36,7 +37,9 @@ MenuSystem.dismissAll = function() {
MenuSystem.dismissUntil = function(level) { MenuSystem.dismissUntil = function(level) {
for (var i = MenuSystem._layers.length - 1; i >= level; i--) { for (var i = MenuSystem._layers.length - 1; i >= level; i--) {
MenuSystem._layers[i].elmt.remove(); var layer = MenuSystem._layers[i];
layer.elmt.remove();
layer["onDismiss"]();
} }
MenuSystem._layers = MenuSystem._layers.slice(0, level); MenuSystem._layers = MenuSystem._layers.slice(0, level);
}; };
@ -58,7 +61,7 @@ MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
MenuSystem.positionMenuLeftRight = function(menu, elmt) { MenuSystem.positionMenuLeftRight = function(menu, elmt) {
var offset = elmt.offset(); var offset = elmt.offset();
menu.css("top", offset.top + "px") menu.css("top", offset.top + "px")
.css("left", (offset.left + elmt.width()) + "px"); .css("left", (offset.left + elmt.width() + 10) + "px");
}; };
MenuSystem.createAndShowStandardMenu = function(items, elmt, options) { MenuSystem.createAndShowStandardMenu = function(items, elmt, options) {
@ -78,7 +81,19 @@ MenuSystem.createAndShowStandardMenu = function(items, elmt, options) {
menuItem.html('<table width="100%" cellspacing="0" cellpadding="0"><tr><td>' + item.label + '</td><td width="1%"><img src="/images/right-arrow.png" /></td></tr></table>'); menuItem.html('<table width="100%" cellspacing="0" cellpadding="0"><tr><td>' + item.label + '</td><td width="1%"><img src="/images/right-arrow.png" /></td></tr></table>');
menuItem.mouseover(function() { menuItem.mouseover(function() {
MenuSystem.dismissUntil(level); MenuSystem.dismissUntil(level);
MenuSystem.createAndShowStandardMenu(item.submenu, this, { horizontal: true });
menuItem.addClass("menu-expanded");
MenuSystem.createAndShowStandardMenu(
item.submenu,
this,
{
horizontal: true,
onDismiss: function() {
menuItem.removeClass("menu-expanded");
}
}
);
}); });
} else { } else {
menuItem.html(item.label).click(item.click); menuItem.html(item.label).click(item.click);
@ -100,7 +115,7 @@ MenuSystem.createAndShowStandardMenu = function(items, elmt, options) {
createMenuItem(items[i]); createMenuItem(items[i]);
} }
var level = MenuSystem.showMenu(menu); var level = MenuSystem.showMenu(menu, "onDismiss" in options ? options.onDismiss : function(){});
if (options.horizontal) { if (options.horizontal) {
MenuSystem.positionMenuLeftRight(menu, $(elmt)); MenuSystem.positionMenuLeftRight(menu, $(elmt));
} else { } else {

4
src/main/webapp/styles/common.css
View File

@ -86,6 +86,10 @@ a.menu-item:hover {
background: #eee; background: #eee;
} }
a.menu-item.menu-expanded {
background: #ddd;
}
a.menu-item img { a.menu-item img {
border: none; border: none;
} }