menu demo with select-like element

This commit is contained in:
Rolux 2010-02-04 13:32:23 +05:30
parent 554f5a5e16
commit eb2decae42
6 changed files with 217 additions and 69 deletions

View file

@ -90,6 +90,32 @@ Forms
color: rgb(160, 160, 160) color: rgb(160, 160, 160)
} }
/*
================================================================================
Menus
================================================================================
*/
.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);
}
.OxThemeClassic .OxMenu .OxBottom,
.OxThemeClassic .OxMenu .OxItem,
.OxThemeClassic .OxMenu .OxScrollbar,
.OxThemeClassic .OxMenu .OxSpace,
.OxThemeClassic .OxMenu .OxTop {
background: rgba(208, 208, 208, 0.96);
}
.OxThemeClassic .OxMenu .OxItem.OxSelected,
.OxThemeClassic .OxMenu .OxLine,
.OxThemeClassic .OxMenu .OxScrollbar.OxSelected {
background: rgba(192, 192, 192, 0.96);
}
.OxThemeModern .OxMenu .OxItem.OxDisabled .OxCell {
color: rgb(160, 160, 160);
}
/* /*
================================================================================ ================================================================================
Scrollbars Scrollbars

View file

@ -17,6 +17,9 @@ div, input {
font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI; font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI;
font-size: 11px; font-size: 11px;
} }
td {
padding: 0px;
}
/* /*
================================================================================ ================================================================================
Core Core
@ -308,10 +311,8 @@ Menus
z-index: 11; z-index: 11;
-moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px; -moz-border-radius-bottomright: 4px;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
-webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-right-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
} }
.OxMenu.OxRight { .OxMenu.OxRight {
-moz-border-radius-topright: 4px; -moz-border-radius-topright: 4px;
@ -319,7 +320,6 @@ Menus
} }
.OxMenu .OxTop { .OxMenu .OxTop {
height: 4px; height: 4px;
background: rgba(48, 48, 48, 0.96);
} }
.OxMenu.OxRight .OxTop { .OxMenu.OxRight .OxTop {
-moz-border-radius-topright: 4px; -moz-border-radius-topright: 4px;
@ -327,7 +327,6 @@ Menus
} }
.OxMenu .OxBottom { .OxMenu .OxBottom {
height: 4px; height: 4px;
background: rgba(48, 48, 48, 0.96);
-moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px; -moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
@ -343,7 +342,6 @@ Menus
border-spacing: 0; border-spacing: 0;
} }
.OxMenu .OxItem { .OxMenu .OxItem {
background: rgba(48, 48, 48, 0.96);
cursor: pointer; cursor: pointer;
} }
.OxMenu.OxLarge .OxItem { .OxMenu.OxLarge .OxItem {
@ -358,9 +356,6 @@ Menus
.OxMenu .OxItem.OxDisabled { .OxMenu .OxItem.OxDisabled {
cursor: default; cursor: default;
} }
.OxMenu .OxItem.OxSelected {
background: rgba(64, 64, 64, 0.96);
}
.OxMenu.OxLarge .OxItem .OxCell { .OxMenu.OxLarge .OxItem .OxCell {
height: 20px; height: 20px;
font-size: 14px; font-size: 14px;
@ -373,9 +368,6 @@ Menus
height: 12px; height: 12px;
font-size: 9px; font-size: 9px;
} }
.OxMenu .OxItem.OxDisabled .OxCell {
color: rgb(80, 80, 80);
}
.OxMenu .OxItem .OxCell.OxStatus { .OxMenu .OxItem .OxCell.OxStatus {
padding-left: 4px; padding-left: 4px;
text-align: right; text-align: right;
@ -446,14 +438,11 @@ Menus
} }
.OxMenu .OxSpace { .OxMenu .OxSpace {
height: 4px; height: 4px;
background: rgba(48, 48, 48, 0.96);
} }
.OxMenu .OxLine { .OxMenu .OxLine {
height: 1px; height: 1px;
background: rgba(64, 64, 64, 0.96);
} }
.OxMenu .OxScrollBar { .OxMenu .OxScrollBar {
background: rgba(48, 48, 48, 0.96);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
display: none; display: none;
@ -473,10 +462,6 @@ Menus
padding-top: 2px; padding-top: 2px;
font-size: 6px; font-size: 6px;
} }
.OxMenu .OxScrollBar.OxSelected {
background: rgba(64, 64, 64, 0.96);
}
/* /*
================================================================================ ================================================================================

View file

@ -84,6 +84,32 @@ Forms
color: rgb(96, 96, 96) color: rgb(96, 96, 96)
} }
/*
================================================================================
Menus
================================================================================
*/
.OxThemeModern .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);
}
.OxThemeModern .OxMenu .OxBottom,
.OxThemeModern .OxMenu .OxItem,
.OxThemeModern .OxMenu .OxScrollbar,
.OxThemeModern .OxMenu .OxSpace,
.OxThemeModern .OxMenu .OxTop {
background: rgba(48, 48, 48, 0.96);
}
.OxThemeModern .OxMenu .OxItem.OxSelected,
.OxThemeModern .OxMenu .OxLine,
.OxThemeModern .OxMenu .OxScrollbar.OxSelected {
background: rgba(64, 64, 64, 0.96);
}
.OxThemeModern .OxMenu .OxItem.OxDisabled .OxCell {
color: rgb(80, 80, 80);
}
/* /*
================================================================================ ================================================================================
Scrollbars Scrollbars

View file

@ -203,9 +203,22 @@ requires
// use dom elements / jquery instead // use dom elements / jquery instead
$eventHandler = $("<div>");
Ox.Event = function() { Ox.Event = function() {
var $eventHandler = $("<div>");
return {
bind: function(event, callback) {
$eventHandler.bind(event, callback);
},
trigger: function(event, data) {
$eventHandler.trigger(event, data);
},
unbind: function(event) {
$eventHandler.unbind(event, callback);
}
}
}
Ox.Event_ = function() {
var events = {}; var events = {};
return { return {
// make these bind, trigger, unbind // make these bind, trigger, unbind
@ -1630,6 +1643,7 @@ requires
var self = self || {}, var self = self || {},
that = new Ox.Element({}, self) that = new Ox.Element({}, self)
.defaults({ .defaults({
element: null,
id: "", id: "",
items: [], items: [],
offset: { offset: {
@ -1650,9 +1664,9 @@ requires
$item; $item;
// construct // construct
that.$items = []; that.items = [];
that.submenus = {};
that.$scrollbars = []; that.$scrollbars = [];
that.$submenus = {};
that.$top = $("<div>") that.$top = $("<div>")
.addClass("OxTop") .addClass("OxTop")
.appendTo(that.$element); .appendTo(that.$element);
@ -1665,14 +1679,18 @@ requires
.addClass("OxContent") .addClass("OxContent")
.appendTo(that.$container); .appendTo(that.$container);
$.each(self.options.items, function(i, item) { $.each(self.options.items, function(i, item) {
$.extend(item, {
menu: that
});
if (item.id) { if (item.id) {
$item = new Ox.MenuItem(item) if (!$.isEmptyObject(item.submenu)) {
that.submenus[item.id] = new Ox.Menu(item.submenu);
}
$.extend(item, {
menu: that,
submenu: that.submenus[item.id] || null
});
item = new Ox.MenuItem(item)
.data("pos", i) .data("pos", i)
.appendTo(that.$content); .appendTo(that.$content);
that.$items.push($item); that.items.push(item);
that.$content.append($item); that.$content.append($item);
} else { } else {
that.$content.append(constructSpace()); that.$content.append(constructSpace());
@ -1688,10 +1706,9 @@ requires
function constructLine() { function constructLine() {
return $("<tr>").append( return $("<tr>").append(
$("<td>").addClass("OxLine", { $("<td>", {
attr: { "class": "OxLine",
colspan: 5 colspan: 5
}
}) })
); );
} }
@ -1699,7 +1716,7 @@ requires
function constructScrollbar(direction) { function constructScrollbar(direction) {
var interval; var interval;
return $("<div/>", { return $("<div/>", {
addClass: "OxScrollBar Ox" + Ox.toTitleCase(direction), addClass: "OxScrollbar Ox" + Ox.toTitleCase(direction),
html: oxui.symbols["triangle_" + direction], html: oxui.symbols["triangle_" + direction],
click: function() { // fixme: do we need to listen to click event? click: function() { // fixme: do we need to listen to click event?
return false; return false;
@ -1738,10 +1755,9 @@ requires
function constructSpace() { function constructSpace() {
return $("<tr>").append( return $("<tr>").append(
$("<td>").addClass("OxSpace", { $("<td>", {
attr: { "class": "OxSpace",
colspan: 5 colspan: 5
}
}) })
); );
} }
@ -1787,9 +1803,10 @@ requires
} }
that.hideMenu = function() { that.hideMenu = function() {
$.each(that.$submenus, function(i, $submenu) { Ox.print("hideMenu")
if (!$submenu.is(":hidden")) { $.each(that.submenus, function(i, submenu) {
$submenu.hideMenu(); if (!submenu.is(":hidden")) {
submenu.hideMenu();
return false; return false;
} }
}); });
@ -1799,21 +1816,17 @@ requires
that.showMenu = function() { that.showMenu = function() {
Ox.print("showMenu") Ox.print("showMenu")
var offset = that.$element.offset(), that.parent().length || that.appendTo($body);
padding = { var offset = self.options.element.offset(),
left: parseInt(that.$element.css("padding-left")), width = self.options.element.outerWidth(),
top: parseInt(that.$element.css("padding-top")), height = self.options.element.outerHeight(),
}, left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width),
width = that.$element.width(), top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0),
height = that.$element.height(),
left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width + padding.left),
top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height + padding.top : 0),
maxHeight = Math.floor(($window.height() - top - 12) / itemHeight) * itemHeight; maxHeight = Math.floor(($window.height() - top - 12) / itemHeight) * itemHeight;
that.css({ that.css({
left: left + "px", left: left + "px",
top: top + "px" top: top + "px"
}).show(); }).show();
that.parent().length || that.appendTo($body);
if (height > maxHeight) { if (height > maxHeight) {
that.$container.height(maxHeight - itemHeight); that.$container.height(maxHeight - itemHeight);
that.$scrollbars.down.show(); that.$scrollbars.down.show();
@ -1835,8 +1848,7 @@ requires
that = new Ox.Element("tr", self) that = new Ox.Element("tr", self)
.defaults({ .defaults({
bind: [], bind: [],
checked: false, checked: null,
click: function() {},
disabled: false, disabled: false,
group: "", group: "",
icon: "", icon: "",
@ -1850,9 +1862,9 @@ requires
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard), keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
title: Ox.makeArray(options.title || self.defaults.title) title: Ox.makeArray(options.title || self.defaults.title)
})) }))
.addClass("OxMenuItem " + (self.options.disabled ? "OxDisabled" : "")) .addClass("OxItem" + (self.options.disabled ? " OxDisabled" : ""))
.attr({ .attr({
id: Ox.toCamelCase(self.options.menu + "/" + self.options.id) id: Ox.toCamelCase(self.options.menu.id + "/" + self.options.id)
}) })
.click(click) .click(click)
.data("group", self.options.group) .data("group", self.options.group)
@ -1862,31 +1874,29 @@ requires
// construct // construct
that.append( that.append(
that.$status = $("<td>", { that.$status = $("<td>", {
addClass: "OxCell OxStatus", "class": "OxCell OxStatus",
html: self.options.checked ? oxui.symbols.check : "" html: self.options.checked ? oxui.symbols.check : ""
}) })
) )
.append( .append(
that.$icon = $("<td>", { that.$icon = $("<td>", {
"addClass": "OxCell OxIcon" "class": "OxCell OxIcon"
}) })
.append(self.options.icon ? .append(self.options.icon ?
$("<img>", { $("<img>", {
attr: { src: self.options.icon
src: self.options.icon
}
}) : null }) : null
) )
) )
.append( .append(
that.$title = $("<td>", { that.$title = $("<td>", {
addClass: "OxCell OxTitle", "class": "OxCell OxTitle",
html: self.options.title[0] html: self.options.title[0]
}) })
) )
.append( .append(
$("<td>", { $("<td>", {
addClass: "OxCell OxModifiers", "class": "OxCell OxModifiers",
html: $.map(self.options.keyboard.modifiers, function(modifier) { html: $.map(self.options.keyboard.modifiers, function(modifier) {
return oxui.symbol[modifier]; return oxui.symbol[modifier];
}).join("") }).join("")
@ -1894,7 +1904,7 @@ requires
) )
.append( .append(
$("<td>", { $("<td>", {
addClass: "OxCell Ox" + (self.options.submenu ? "Submenu" : "Key"), "class": "OxCell Ox" + (self.options.submenu ? "Submenu" : "Key"),
html: self.options.submenu ? oxui.symbols.triangle_right : html: self.options.submenu ? oxui.symbols.triangle_right :
oxui.symbols[self.options.keyboard.key] || self.options.keyboard.key oxui.symbols[self.options.keyboard.key] || self.options.keyboard.key
}) })
@ -1902,17 +1912,19 @@ requires
function click() { function click() {
if (!that.hasClass("OxDisabled") && !self.options.submenu) { if (!that.hasClass("OxDisabled") && !self.options.submenu) {
menu.hideMenu(); self.options.menu.hideMenu();
self.options.click(); if (self.options.checked !== null && (!self.options.group || !self.options.checked)) {
if (self.options.group && !self.options.checked) {
that.options({ that.options({
checked: true checked: !self.options.checked
}) });
} }
if (self.options.title.length == 2) { if (self.options.title.length == 2) {
that.toggleTitle(); that.toggleTitle();
} }
$eventHandler.trigger("clickMenu", self.options.id); $("*").trigger("OxClickMenu", {
id: self.options.id,
value: self.options.title // fixme: value or title?
});
return false; return false;
} }
} }
@ -1922,7 +1934,7 @@ requires
$.each(self.options.menu.submenus, function(id, submenu) { $.each(self.options.menu.submenus, function(id, submenu) {
submenu.hideMenu(); submenu.hideMenu();
}); });
$(".OxMenu .OxMenuItem[id!=" + self.options.id + "]").removeClass("selected"); $(".OxMenu .OxItem[id!=" + self.options.id + "]").removeClass("selected");
self.options.submenu && self.options.submenu.showMenu(); // fixme: do we want to switch to this style? self.options.submenu && self.options.submenu.showMenu(); // fixme: do we want to switch to this style?
that.addClass("OxSelected"); that.addClass("OxSelected");
} }
@ -1944,8 +1956,23 @@ requires
} }
self.onChange = function(key, value) { self.onChange = function(key, value) {
Ox.print("MenuItem", self.options.id, "onChange", key, value);
if (key == "checked") { if (key == "checked") {
that.$status.html(oxui.symbols.checked); if (value && self.options.group) {
$.each(self.options.menu.items, function(i, item) {
if (
item.options("id") != self.options.id &&
item.options("group") == self.options.group &&
item.options("checked")
) {
item.options({
checked: false
});
return false;
}
});
}
that.$status.html(value ? oxui.symbols.check : "")
} else if (key == "disabled") { } else if (key == "disabled") {
that.toggleClass("disabled"); // fixme: this will only work if onChange is only invoked on actual change that.toggleClass("disabled"); // fixme: this will only work if onChange is only invoked on actual change
} }

12
demos/test/menu.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
<script type="text/javascript" src="../../build/js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../../build/js/ox.js"></script>
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body></body>
</html>

72
demos/test/menu.js Normal file
View file

@ -0,0 +1,72 @@
$(function() {
var button = new Ox.Button({
value: "First",
}).css({
position: "absolute",
left: "16px",
top: "16px"
}).appendTo($("body")),
menu = new Ox.Menu({
element: button,
id: "select",
items: [
{
checked: true,
group: "123",
id: "first",
title: "First"
},
{
checked: false,
group: "123",
id: "second",
title: "Second"
},
{
checked: false,
group: "123",
id: "third",
title: "Third"
},
{},
{
checked: false,
group: "123",
id: "fourth",
title: "Fourth"
},
{
checked: false,
group: "123",
id: "fifth",
title: "Fifth"
},
{
checked: false,
group: "123",
id: "sixth",
title: "Sixth"
}
]
});
button
.click(menu.toggleMenu)
.bind("OxClickMenu", function(event, data) {
console.log(data)
button.options({
value: data.value
});
});
$select = $("<select>")
.css({
position: "absolute",
left: "160px",
top: "16px"
})
.appendTo($("body"));
$.each(["First", "Second", "Third"], function(i, v) {
$select.append(
$("<option>").html(v)
);
});
});