simplifying menu
This commit is contained in:
Rolux
parent
73ea43ec01
commit
1cfaacd79e
3 changed files with 89 additions and 80 deletions
|
|
@ -58,14 +58,6 @@ Dialog
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxLayer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.OxDialog {
|
||||
position: absolute;
|
||||
-moz-border-radius: 8px;
|
||||
|
|
@ -328,6 +320,27 @@ OxSelect
|
|||
.OxSelect.OxMedium > .OxSymbol {
|
||||
margin: -16px 8px 0 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
Layers
|
||||
================================================================================
|
||||
*/
|
||||
.OxLayer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
.OxMainMenuLayer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 24px;
|
||||
bottom: 0px;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
/*
|
||||
================================================================================
|
||||
Menus
|
||||
|
|
@ -335,7 +348,7 @@ Menus
|
|||
*/
|
||||
|
||||
.OxMainMenu {
|
||||
z-index: 10;
|
||||
z-index: 9;
|
||||
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
|
@ -383,6 +396,8 @@ Menus
|
|||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48)));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.OxMenu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -842,12 +842,14 @@ requires
|
|||
};
|
||||
that.gainFocus = function() {
|
||||
Ox.Focus.focus(that.id);
|
||||
return that;
|
||||
};
|
||||
that.hasFocus = function() {
|
||||
return Ox.Focus.focused() == that.id;
|
||||
};
|
||||
that.loseFocus = function() {
|
||||
Ox.Focus.blur(that.id);
|
||||
return that;
|
||||
};
|
||||
that.options = function() { // fixme: use Ox.getset
|
||||
/*
|
||||
|
|
@ -1237,7 +1239,10 @@ requires
|
|||
});
|
||||
})
|
||||
.appendTo(that);
|
||||
that.$title = new Ox.Element().addClass("OxTitle").html(options.title).appendTo(that.$titlebar);
|
||||
that.$title = new Ox.Element()
|
||||
.addClass("OxTitle")
|
||||
.html(options.title)
|
||||
.appendTo(that.$titlebar);
|
||||
that.$content = new Ox.Container()
|
||||
.addClass("OxContent")
|
||||
.css({
|
||||
|
|
@ -1279,7 +1284,7 @@ requires
|
|||
if (!that.$layer.length) {
|
||||
that.$layer = new Ox.Element()
|
||||
.addClass("OxLayer")
|
||||
.appendTo($("body"));
|
||||
.appendTo($body);
|
||||
}
|
||||
that.css({
|
||||
opacity: 0
|
||||
|
|
@ -1843,8 +1848,9 @@ requires
|
|||
|
||||
self.focused = false;
|
||||
self.selected = -1;
|
||||
that.titles = [];
|
||||
that.menus = [];
|
||||
that.titles = [];
|
||||
that.layer = $("<div>").addClass("OxLayer");
|
||||
|
||||
$.each(options.menus, function(position, menu) {
|
||||
var event =
|
||||
|
|
@ -1858,65 +1864,56 @@ requires
|
|||
mainmenu: that,
|
||||
size: self.options.size
|
||||
}));
|
||||
that.bindEvent("click_" + that.menus[position].options("id"), clickMenu);
|
||||
that.bindEvent("hide_" + that.menus[position].options("id"), onHideMenu);
|
||||
});
|
||||
|
||||
function click(event) {
|
||||
var $target = $(event.target),
|
||||
position = $target.data("position");
|
||||
if ($target.is(".OxTitle")) {
|
||||
clickTitle(position);
|
||||
} else {
|
||||
self.focused = false;
|
||||
position = typeof $target.data("position") != "undefined" ?
|
||||
$target.data("position") : -1;
|
||||
clickTitle(position);
|
||||
}
|
||||
|
||||
function clickTitle(position) {
|
||||
var selected = self.selected;
|
||||
if (self.selected > -1) {
|
||||
that.menus[self.selected].hideMenu();
|
||||
}
|
||||
if (position > -1) {
|
||||
Ox.print("position", position, "self.selected", self.selected)
|
||||
if (position != selected) {
|
||||
self.focused = true;
|
||||
self.selected = position;
|
||||
Ox.print("position", position, "setting self.selected", self.selected)
|
||||
that.titles[self.selected].addClass("OxSelected");
|
||||
that.menus[self.selected].showMenu();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mousemove(event) {
|
||||
var $target = $(event.target),
|
||||
position = typeof $target.data("position") != "undefined" ? $target.data("position") : -1;
|
||||
if (self.focused) {
|
||||
if (self.focused && position != self.selected) {
|
||||
focused,
|
||||
position = typeof $target.data("position") != "undefined" ?
|
||||
$target.data("position") : -1;
|
||||
if (self.focused && position != self.selected) {
|
||||
if (position > -1) {
|
||||
clickTitle(position);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clickMenu() {
|
||||
Ox.print("self.selected", self.selected)
|
||||
that.titles[self.selected].removeClass("OxSelected");
|
||||
self.selected = -1;
|
||||
self.focused = false;
|
||||
}
|
||||
|
||||
function clickTitle(position) {
|
||||
var menu, title;
|
||||
if (position == -1) {
|
||||
if (self.selected > -1) {
|
||||
that.menus[self.selected].hideMenu();
|
||||
that.titles[self.selected].removeClass("OxSelected");
|
||||
self.selected = -1;
|
||||
}
|
||||
} else {
|
||||
title = that.titles[position],
|
||||
menu = that.menus[position];
|
||||
if (self.selected > -1) {
|
||||
that.menus[self.selected].hideMenu();
|
||||
that.titles[self.selected].removeClass("OxSelected");
|
||||
}
|
||||
if (self.selected == position) {
|
||||
self.focused = false;
|
||||
self.selected = -1;
|
||||
} else {
|
||||
Ox.print("pos", position)
|
||||
self.focused = true;
|
||||
self.selected = position;
|
||||
Ox.print("s.s", self.selected)
|
||||
that.titles[self.selected].addClass("OxSelected");
|
||||
that.menus[self.selected].showMenu();
|
||||
focused = self.focused;
|
||||
that.menus[self.selected].hideMenu();
|
||||
self.focused = focused;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onHideMenu() {
|
||||
Ox.print("hideMenu self.selected", self.selected)
|
||||
that.titles[self.selected].removeClass("OxSelected");
|
||||
self.focused = false;
|
||||
self.selected = -1;
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
|
||||
};
|
||||
|
|
@ -2029,24 +2026,21 @@ requires
|
|||
that.$bottom = $("<div>")
|
||||
.addClass("OxBottom")
|
||||
.appendTo(that.$element);
|
||||
that.$layer = $("<div>")
|
||||
.addClass(self.options.mainmenu ? "OxMainMenuLayer" : "OxLayer");
|
||||
|
||||
function click(event) {
|
||||
var item,
|
||||
position,
|
||||
$target = $(event.target);
|
||||
that.hideMenu();
|
||||
if ($target.is(".OxCell")) {
|
||||
position = $target.parent().data("position");
|
||||
item = that.items[position];
|
||||
Ox.print("...", position, item)
|
||||
if (!item.options("disabled")) {
|
||||
clickItem(position);
|
||||
} else {
|
||||
that.triggerEvent("click");
|
||||
}
|
||||
} else {
|
||||
that.triggerEvent("click");
|
||||
}
|
||||
that.hideMenu();
|
||||
}
|
||||
|
||||
function clickItem(position) {
|
||||
|
|
@ -2068,10 +2062,10 @@ requires
|
|||
item.toggleTitle();
|
||||
}
|
||||
}
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
function clickSelectedItem() {
|
||||
// called on key.enter
|
||||
if (self.options.selected > -1) {
|
||||
clickItem(self.options.selected);
|
||||
} else {
|
||||
|
|
@ -2079,11 +2073,6 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
that.triggerEvent("click");
|
||||
that.hideMenu();
|
||||
}
|
||||
|
||||
function constructLine() {
|
||||
return $("<tr>").append(
|
||||
$("<td>", {
|
||||
|
|
@ -2371,19 +2360,21 @@ requires
|
|||
});
|
||||
selectItem(-1);
|
||||
scrollMenuUp();
|
||||
that.hide();
|
||||
if (self.options.parent) {
|
||||
self.options.element.removeClass("OxSelected");
|
||||
}
|
||||
that.loseFocus();
|
||||
that.unbindEvent({
|
||||
key_up: selectPreviousItem,
|
||||
key_down: selectNextItem,
|
||||
key_left: selectSupermenu,
|
||||
key_right: selectSubmenu,
|
||||
key_escape: that.hideMenu,
|
||||
key_enter: clickItem
|
||||
});
|
||||
that.hide()
|
||||
.loseFocus()
|
||||
.unbindEvent({
|
||||
key_up: selectPreviousItem,
|
||||
key_down: selectNextItem,
|
||||
key_left: selectSupermenu,
|
||||
key_right: selectSubmenu,
|
||||
key_escape: that.hideMenu,
|
||||
key_enter: clickItem
|
||||
})
|
||||
.triggerEvent("hide");
|
||||
that.$layer.hide();
|
||||
$document.unbind("click", click);
|
||||
return that;
|
||||
//that.triggerEvent("hide");
|
||||
|
|
@ -2399,6 +2390,9 @@ requires
|
|||
|
||||
that.showMenu = function() {
|
||||
Ox.print("showMenu")
|
||||
if (!self.options.parent && !that.$layer.parent().length) {
|
||||
that.$layer.appendTo($body);
|
||||
}
|
||||
that.parent().length || that.appendTo($body);
|
||||
var offset = self.options.element.offset(),
|
||||
width = self.options.element.outerWidth(),
|
||||
|
|
@ -2431,7 +2425,7 @@ requires
|
|||
key_down: selectNextItem,
|
||||
key_left: selectSupermenu,
|
||||
key_right: selectSubmenu,
|
||||
key_escape: closeMenu,
|
||||
key_escape: that.hideMenu,
|
||||
key_enter: clickSelectedItem
|
||||
});
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
BIN
demos/.DS_Store
vendored
BIN
demos/.DS_Store
vendored
Binary file not shown.
Loading…
Reference in a new issue