MainMenu in demos/test/index.html
This commit is contained in:
Rolux
parent
81d27621bf
commit
a279bc7f6e
5 changed files with 281 additions and 75 deletions
|
|
@ -100,6 +100,11 @@ Menus
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxThemeClassic .OxMainMenu > .OxTitle.OxSelected {
|
||||
background: -moz-linear-gradient(top, rgb(176, 176, 176), rgb(144, 144, 144));
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(176, 176, 176)), to(rgb(144, 144, 144)));
|
||||
}
|
||||
|
||||
.OxThemeClassic .OxMenu {
|
||||
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||
|
|
|
|||
|
|
@ -334,6 +334,53 @@ Menus
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxMainMenu {
|
||||
z-index: 10;
|
||||
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
.OxMainMenu.OxLarge {
|
||||
height: 24px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.OxMainMenu.OxMedium {
|
||||
height: 20px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.OxMainMenu.OxSmall {
|
||||
height: 16px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.OxMainMenu > .OxTitle {
|
||||
float: left;
|
||||
cursor: default;
|
||||
}
|
||||
.OxMainMenu.OxLarge > .OxTitle {
|
||||
height: 21px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.OxMainMenu.OxMedium > .OxTitle {
|
||||
height: 17px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-top: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.OxMainMenu.OxSmall > .OxTitle {
|
||||
height: 14px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 2px;
|
||||
font-size: 9px;
|
||||
}
|
||||
.OxMainMenu .OxTitle.OxSelected {
|
||||
background: rgb(48, 48, 48);
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -799,7 +799,7 @@ requires
|
|||
ret = that.$element[v](args[0], args[1], args[2], args[3]);
|
||||
}
|
||||
if (v == "data") {
|
||||
Ox.print("data ret", ret, $(ret))
|
||||
// Ox.print("data ret", ret, $(ret))
|
||||
}
|
||||
// if the $element of an ox object was returned
|
||||
// then return the ox object instead
|
||||
|
|
@ -905,12 +905,12 @@ requires
|
|||
/*
|
||||
triggerEvent(event, fn) or triggerEvent({event0: fn0, event1: fn1, ...})
|
||||
*/
|
||||
if (arguments.length == 1) {
|
||||
if (Ox.isObject(arguments[0])) {
|
||||
$.each(arguments[0], function(event, fn) {
|
||||
Ox.Event.trigger(event + "." + that.id, fn);
|
||||
Ox.Event.trigger(event + "_" + that.id, fn);
|
||||
});
|
||||
} else {
|
||||
Ox.Event.trigger(arguments[0] + "." + that.id, arguments[1]);
|
||||
Ox.Event.trigger(arguments[0] + "_" + that.id, arguments[1] || {});
|
||||
}
|
||||
return that;
|
||||
}
|
||||
|
|
@ -1162,15 +1162,14 @@ requires
|
|||
.options(options || {})
|
||||
.addClass("OxTabbar");
|
||||
|
||||
(function() {
|
||||
Ox.ButtonGroup({
|
||||
group: true,
|
||||
selectable: true,
|
||||
selected: self.options.selected,
|
||||
size: "medium",
|
||||
style: "tab",
|
||||
values: self.options.values
|
||||
}).appendTo(that);
|
||||
})();
|
||||
|
||||
return that;
|
||||
|
||||
|
|
@ -1308,10 +1307,8 @@ requires
|
|||
var self = self || {},
|
||||
that = new Ox.Element("input", self)
|
||||
.defaults({
|
||||
buttonId: null,
|
||||
//click: function() {},
|
||||
disabled: false,
|
||||
groupId: null,
|
||||
group: false,
|
||||
selectable: false,
|
||||
selected: false,
|
||||
size: "medium",
|
||||
|
|
@ -1362,10 +1359,9 @@ requires
|
|||
}
|
||||
}
|
||||
function click() {
|
||||
if (self.options.selectable && !(self.options.groupId !== null && self.options.selected)) {
|
||||
if (self.options.selectable && !(self.options.group && self.options.selected)) {
|
||||
that.toggleSelected();
|
||||
}
|
||||
Ox.print(self.options);
|
||||
if (self.options.values.length == 2) {
|
||||
Ox.print("2 values")
|
||||
that.options({
|
||||
|
|
@ -1379,9 +1375,10 @@ requires
|
|||
//Ox.print("setOption", option, value)
|
||||
Ox.print("OxButton onChange", key, value)
|
||||
if (key == "selected") {
|
||||
if (value != that.hasClass("OxSelected")) {
|
||||
if (value != that.hasClass("OxSelected")) { // fixme: neccessary?
|
||||
that.toggleClass("OxSelected");
|
||||
}
|
||||
that.triggerEvent(value ? "select" : "deselect", {});
|
||||
} else if (key == "value") {
|
||||
Ox.print("OxButton onChange value", value)
|
||||
if (self.options.type == "image") {
|
||||
|
|
@ -1391,7 +1388,7 @@ requires
|
|||
});
|
||||
} else {
|
||||
that.val(value);
|
||||
Ox.Event.trigger("change." + that.id, {
|
||||
that.triggerEvent("change", {
|
||||
value: value
|
||||
});
|
||||
}
|
||||
|
|
@ -1406,7 +1403,6 @@ requires
|
|||
that.options({
|
||||
selected: !self.options.selected
|
||||
});
|
||||
that.trigger("OxButtonToggle", self.options);
|
||||
}
|
||||
that.options("value", self.options.value);
|
||||
return that;
|
||||
|
|
@ -1419,10 +1415,11 @@ requires
|
|||
*/
|
||||
|
||||
Ox.ButtonGroup = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
.defaults({
|
||||
groupId: Ox.uid(),
|
||||
group: false,
|
||||
selectable: false,
|
||||
selected: -1,
|
||||
size: "medium",
|
||||
|
|
@ -1432,31 +1429,37 @@ requires
|
|||
})
|
||||
.options(options || {})
|
||||
.addClass("OxButtonGroup");
|
||||
(function() {
|
||||
self.position = {};
|
||||
|
||||
that.$buttons = [];
|
||||
$.each(self.options.values, function(i, v) {
|
||||
that.$buttons[i] = Ox.Button({
|
||||
buttonId: i,
|
||||
groupId: self.options.groupId,
|
||||
$.each(self.options.values, function(position, value) {
|
||||
that.$buttons[position] = Ox.Button({
|
||||
group: self.options.group,
|
||||
selectable: self.options.selectable,
|
||||
selected: i == self.options.selected,
|
||||
selected: position == self.options.selected,
|
||||
size: self.options.size,
|
||||
style: self.options.style,
|
||||
type: self.options.type,
|
||||
value: v
|
||||
value: value
|
||||
}).appendTo(that);
|
||||
self.position[that.$buttons.id] = position;
|
||||
Ox.print("binding", "select_" + that.$buttons[position].id);
|
||||
that.bindEvent("select_" + that.$buttons[position].id, select);
|
||||
});
|
||||
that.$element.bind("OxButtonToggle", function(e, data) {
|
||||
if (data.groupId = self.options.groupId) {
|
||||
if (data.selected) {
|
||||
|
||||
function select(event, data) {
|
||||
console.log("event", event, "data", data)
|
||||
var id = event.split("_")[1];
|
||||
Ox.print("OK")
|
||||
if (self.options.selected > -1) {
|
||||
that.$buttons[self.options.selected].toggleSelected();
|
||||
}
|
||||
self.options.selected = data.buttonId;
|
||||
}
|
||||
}
|
||||
self.options.selected = self.position[id];
|
||||
that.triggerEvent("change", {
|
||||
value: id
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -1785,11 +1788,11 @@ requires
|
|||
size: self.options.size
|
||||
});
|
||||
|
||||
that.bindEvent("change." + that.$button.id, changeButton);
|
||||
that.bindEvent("click." + that.$menu.id, clickMenu);
|
||||
that.bindEvent("change_" + that.$button.id, changeButton);
|
||||
that.bindEvent("click_" + that.$menu.id, clickMenu);
|
||||
|
||||
function changeButton(event, data) {
|
||||
that.triggerEvent("change." + that.id, data);
|
||||
that.triggerEvent("change_" + that.id, data);
|
||||
}
|
||||
|
||||
function clickButton() {
|
||||
|
|
@ -1828,9 +1831,98 @@ requires
|
|||
|
||||
var self = self || {},
|
||||
that = new Ox.Bar({}, self)
|
||||
.options
|
||||
.defaults({
|
||||
menus: [],
|
||||
size: "medium"
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass("OxMainMenu Ox" + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large
|
||||
.click(click)
|
||||
.mousemove(mousemove);
|
||||
|
||||
self.focused = false;
|
||||
self.selected = -1;
|
||||
that.titles = [];
|
||||
that.menus = [];
|
||||
|
||||
$.each(options.menus, function(position, menu) {
|
||||
that.titles[position] = $("<div>")
|
||||
.addClass("OxTitle")
|
||||
.html(menu.title)
|
||||
.data("position", position)
|
||||
.appendTo(that.$element);
|
||||
that.menus[position] = new Ox.Menu($.extend(menu, {
|
||||
element: that.titles[position],
|
||||
mainmenu: that,
|
||||
size: self.options.size
|
||||
}));
|
||||
Ox.print("binding", "click_" + that.menus[position].id)
|
||||
that.bindEvent("click_" + that.menus[position].id, clickMenu);
|
||||
});
|
||||
|
||||
function click(event) {
|
||||
var $target = $(event.target),
|
||||
position = $target.data("position");
|
||||
if ($target.is(".OxTitle")) {
|
||||
clickTitle(position);
|
||||
} else {
|
||||
self.focused = false;
|
||||
}
|
||||
}
|
||||
|
||||
function mousemove(event) {
|
||||
var $target = $(event.target),
|
||||
position = $target.data("position");
|
||||
if (self.focused && position != self.selected) {
|
||||
clickTitle(position);
|
||||
}
|
||||
}
|
||||
|
||||
function clickMenu() {
|
||||
Ox.print("clickMenu!!")
|
||||
that.titles[self.selected].removeClass("OxSelected");
|
||||
self.selected = -1;
|
||||
self.focused = false;
|
||||
}
|
||||
|
||||
function clickTitle(position) {
|
||||
Ox.print("clickMenu", position)
|
||||
var 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 {
|
||||
self.focused = true;
|
||||
self.selected = position;
|
||||
that.titles[self.selected].addClass("OxSelected");
|
||||
that.menus[self.selected].showMenu();
|
||||
}
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
|
||||
};
|
||||
|
||||
that.selectNextMenu = function() {
|
||||
if (self.selected < self.options.menus.length - 1) {
|
||||
clickTitle(self.selected + 1);
|
||||
}
|
||||
};
|
||||
|
||||
that.selectPreviousMenu = function() {
|
||||
if (self.selected) {
|
||||
clickTitle(self.selected - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
Ox.Menu = function(options, self) {
|
||||
|
||||
|
|
@ -1840,6 +1932,7 @@ requires
|
|||
element: null,
|
||||
id: "",
|
||||
items: [],
|
||||
mainmenu: null,
|
||||
offset: {
|
||||
left: 0,
|
||||
top: 0
|
||||
|
|
@ -1920,23 +2013,25 @@ requires
|
|||
if ($target.is(".OxCell")) {
|
||||
position = $target.parent().data("position");
|
||||
item = that.items[position];
|
||||
Ox.print("...", position, item)
|
||||
if (!item.options("disabled")) {
|
||||
clickItem(position);
|
||||
}
|
||||
}
|
||||
that.triggerEvent("click");
|
||||
}
|
||||
|
||||
function clickItem(position) {
|
||||
var item = that.items[position];
|
||||
if (that.options("parent")) {
|
||||
that.options("parent").hideMenu();
|
||||
}
|
||||
if (!item.options("items").length) {
|
||||
if (that.options("parent")) {
|
||||
that.options("parent").hideMenu().triggerEvent("click");
|
||||
}
|
||||
if (item.options("checked") !== null && (!item.options("group") || !item.options("checked"))) {
|
||||
item.options({
|
||||
checked: !item.options("checked")
|
||||
});
|
||||
Ox.Event.trigger("click." + that.id, {
|
||||
Ox.Event.trigger("click_" + that.id, {
|
||||
id: item.options("id"),
|
||||
value: item.options("title")[0] // fixme: value or title?
|
||||
});
|
||||
|
|
@ -2103,6 +2198,7 @@ requires
|
|||
|
||||
function selectItem(position) {
|
||||
var item;
|
||||
Ox.print("selectItem", position)
|
||||
if (self.options.selected > -1) {
|
||||
that.items[self.options.selected].removeClass("OxSelected");
|
||||
}
|
||||
|
|
@ -2114,6 +2210,7 @@ requires
|
|||
return false;
|
||||
}
|
||||
});
|
||||
Ox.print("length", item.options("items").length)
|
||||
item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style?
|
||||
item.addClass("OxSelected");
|
||||
}
|
||||
|
|
@ -2188,18 +2285,23 @@ requires
|
|||
if (self.options.selected > -1) {
|
||||
var submenu = that.submenus[that.items[self.options.selected].options("id")];
|
||||
if (submenu && submenu.hasEnabledItems()) {
|
||||
//that.loseFocus();
|
||||
submenu.gainFocus();
|
||||
submenu.selectFirstItem();
|
||||
} else if (self.options.mainmenu) {
|
||||
self.options.mainmenu.selectNextMenu();
|
||||
}
|
||||
} else if (self.options.mainmenu) {
|
||||
self.options.mainmenu.selectNextMenu();
|
||||
}
|
||||
}
|
||||
|
||||
function selectSupermenu() {
|
||||
if (self.options.parent) {
|
||||
that.items[self.options.selected].trigger("mouseleave");
|
||||
// that.loseFocus();
|
||||
self.options.parent.gainFocus();
|
||||
} else if (self.options.mainmenu) {
|
||||
Ox.print("previousMenu")
|
||||
self.options.mainmenu.selectPreviousMenu();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2225,11 +2327,9 @@ requires
|
|||
return false;
|
||||
}
|
||||
});
|
||||
self.options.selected = -1;
|
||||
scrollMenuUp();
|
||||
that.hide();
|
||||
if (self.options.selected > -1) {
|
||||
that.items[self.options.selected].trigger("mouseleave");
|
||||
}
|
||||
if (self.options.parent) {
|
||||
self.options.element.removeClass("OxSelected");
|
||||
}
|
||||
|
|
@ -2243,10 +2343,11 @@ requires
|
|||
key_enter: clickItem
|
||||
});
|
||||
$document.unbind("click", click);
|
||||
return that;
|
||||
//that.triggerEvent("hide");
|
||||
};
|
||||
|
||||
that.selectFirstItem = function() {
|
||||
Ox.print("selectFirstItem")
|
||||
selectNextItem();
|
||||
};
|
||||
|
||||
|
|
@ -2290,6 +2391,8 @@ requires
|
|||
setTimeout(function() {
|
||||
$document.bind("click", click);
|
||||
}, 100);
|
||||
return that;
|
||||
//that.triggerEvent("show");
|
||||
};
|
||||
|
||||
that.toggleMenu = function() {
|
||||
|
|
@ -2548,6 +2651,7 @@ requires
|
|||
dimensions = oxui.getDimensions(self.options.orientation),
|
||||
edges = oxui.getEdges(self.options.orientation);
|
||||
$.each(self.options.elements, function(i, v) {
|
||||
Ox.print("v", v);
|
||||
var element = v.element
|
||||
.css({
|
||||
position: "absolute" // fixme: this can go into a class
|
||||
|
|
|
|||
|
|
@ -59,17 +59,67 @@
|
|||
borderBottom: "1px solid rgb(160, 160, 160)"
|
||||
})*/;
|
||||
|
||||
var topPanel = Ox.Toolbar({size: "small"})
|
||||
.css({
|
||||
zIndex: 2,
|
||||
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
|
||||
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
|
||||
})
|
||||
.append(
|
||||
$("<div/>")
|
||||
.addClass("top")
|
||||
.html("Ox.js")
|
||||
);
|
||||
var mainMenu = new Ox.MainMenu({
|
||||
menus: [
|
||||
{
|
||||
id: "oxjs",
|
||||
title: "Ox.js",
|
||||
items: [
|
||||
{ id: "about", title: "About" },
|
||||
{},
|
||||
{ id: "contact", title: "Contact"}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "file",
|
||||
title: "File",
|
||||
items: [
|
||||
{ id: "load", title: "Load" },
|
||||
{ id: "save", title: "Save" },
|
||||
{ id: "save_ad", title: "Save As..."}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "edit",
|
||||
title: "Edit",
|
||||
items: [
|
||||
{ id: "undo", title: "Undo" },
|
||||
{ id: "redo", title: "Redo" },
|
||||
{},
|
||||
{ id: "cut", title: "Cut" },
|
||||
{ id: "copy", title: "Copy" },
|
||||
{ id: "paste", title: "Paste"},
|
||||
{ id: "delete", title: "Delete"},
|
||||
{},
|
||||
{ id: "select_all", title: "Select All" },
|
||||
{ id: "select_none", title: "Select None" },
|
||||
{ id: "invert_selection", title: "Invert Selection" },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "sort",
|
||||
title: "Sort",
|
||||
items: [
|
||||
{ id: "sort_movies", title: "Sort Movies by", items: [
|
||||
{ checked: true, group: "sort_movies", id: "title", title: "Title"},
|
||||
{ checked: false, group: "sort_movies", id: "director", title: "Director" },
|
||||
] },
|
||||
{ id: "order_movies", title: "Order Movies", items: [
|
||||
{ checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
|
||||
{ checked: true, group: "order_movies", id: "descending", title: "Descending" },
|
||||
] }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "help",
|
||||
title: "Help",
|
||||
items: [
|
||||
{ id: "help", title: "Help" }
|
||||
]
|
||||
}
|
||||
],
|
||||
size: "large"
|
||||
});
|
||||
var bottomPanel = Ox.Toolbar({size: "small"})
|
||||
.css({
|
||||
zIndex: 2,
|
||||
|
|
@ -84,7 +134,7 @@
|
|||
var mainSplitPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: topPanel,
|
||||
element: mainMenu,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -220,7 +220,7 @@ Ox = {
|
|||
.defaults({
|
||||
bar: "xyz"
|
||||
})
|
||||
.options(options || {}),
|
||||
.options(options || {});
|
||||
(function() {
|
||||
self.time = 0;
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue