From aa942dd9c55084b299b4ad7840b1378732eaf6e1 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 4 Feb 2010 13:32:23 +0530 Subject: [PATCH] menu demo with select-like element --- build/css/ox.ui.classic.css | 26 ++++++++ build/css/ox.ui.css | 21 +----- build/css/ox.ui.modern.css | 26 ++++++++ build/js/ox.ui.js | 129 ++++++++++++++++++++++-------------- demos/test/menu.html | 12 ++++ demos/test/menu.js | 72 ++++++++++++++++++++ 6 files changed, 217 insertions(+), 69 deletions(-) create mode 100644 demos/test/menu.html create mode 100644 demos/test/menu.js diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index 8dd5b35..2656d1f 100644 --- a/build/css/ox.ui.classic.css +++ b/build/css/ox.ui.classic.css @@ -90,6 +90,32 @@ Forms 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 diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 9b99da6..cf779a2 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -17,6 +17,9 @@ div, input { font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI; font-size: 11px; } +td { + padding: 0px; +} /* ================================================================================ Core @@ -308,10 +311,8 @@ Menus z-index: 11; -moz-border-radius-bottomleft: 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-right-radius: 4px; - -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); } .OxMenu.OxRight { -moz-border-radius-topright: 4px; @@ -319,7 +320,6 @@ Menus } .OxMenu .OxTop { height: 4px; - background: rgba(48, 48, 48, 0.96); } .OxMenu.OxRight .OxTop { -moz-border-radius-topright: 4px; @@ -327,7 +327,6 @@ Menus } .OxMenu .OxBottom { height: 4px; - background: rgba(48, 48, 48, 0.96); -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-left-radius: 4px; @@ -343,7 +342,6 @@ Menus border-spacing: 0; } .OxMenu .OxItem { - background: rgba(48, 48, 48, 0.96); cursor: pointer; } .OxMenu.OxLarge .OxItem { @@ -358,9 +356,6 @@ Menus .OxMenu .OxItem.OxDisabled { cursor: default; } -.OxMenu .OxItem.OxSelected { - background: rgba(64, 64, 64, 0.96); -} .OxMenu.OxLarge .OxItem .OxCell { height: 20px; font-size: 14px; @@ -373,9 +368,6 @@ Menus height: 12px; font-size: 9px; } -.OxMenu .OxItem.OxDisabled .OxCell { - color: rgb(80, 80, 80); -} .OxMenu .OxItem .OxCell.OxStatus { padding-left: 4px; text-align: right; @@ -446,14 +438,11 @@ Menus } .OxMenu .OxSpace { height: 4px; - background: rgba(48, 48, 48, 0.96); } .OxMenu .OxLine { height: 1px; - background: rgba(64, 64, 64, 0.96); } .OxMenu .OxScrollBar { - background: rgba(48, 48, 48, 0.96); text-align: center; cursor: pointer; display: none; @@ -473,10 +462,6 @@ Menus padding-top: 2px; font-size: 6px; } -.OxMenu .OxScrollBar.OxSelected { - background: rgba(64, 64, 64, 0.96); -} - /* ================================================================================ diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index 0f7324d..09854aa 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -84,6 +84,32 @@ Forms 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 diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 96f7dd0..89804da 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -203,9 +203,22 @@ requires // use dom elements / jquery instead - $eventHandler = $("
"); - Ox.Event = function() { + var $eventHandler = $("
"); + 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 = {}; return { // make these bind, trigger, unbind @@ -1630,6 +1643,7 @@ requires var self = self || {}, that = new Ox.Element({}, self) .defaults({ + element: null, id: "", items: [], offset: { @@ -1650,9 +1664,9 @@ requires $item; // construct - that.$items = []; + that.items = []; + that.submenus = {}; that.$scrollbars = []; - that.$submenus = {}; that.$top = $("
") .addClass("OxTop") .appendTo(that.$element); @@ -1665,14 +1679,18 @@ requires .addClass("OxContent") .appendTo(that.$container); $.each(self.options.items, function(i, item) { - $.extend(item, { - menu: that - }); 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) .appendTo(that.$content); - that.$items.push($item); + that.items.push(item); that.$content.append($item); } else { that.$content.append(constructSpace()); @@ -1688,10 +1706,9 @@ requires function constructLine() { return $("").append( - $("").addClass("OxLine", { - attr: { - colspan: 5 - } + $("", { + "class": "OxLine", + colspan: 5 }) ); } @@ -1699,7 +1716,7 @@ requires function constructScrollbar(direction) { var interval; return $("
", { - addClass: "OxScrollBar Ox" + Ox.toTitleCase(direction), + addClass: "OxScrollbar Ox" + Ox.toTitleCase(direction), html: oxui.symbols["triangle_" + direction], click: function() { // fixme: do we need to listen to click event? return false; @@ -1738,10 +1755,9 @@ requires function constructSpace() { return $("").append( - $("").addClass("OxSpace", { - attr: { - colspan: 5 - } + $("", { + "class": "OxSpace", + colspan: 5 }) ); } @@ -1787,9 +1803,10 @@ requires } that.hideMenu = function() { - $.each(that.$submenus, function(i, $submenu) { - if (!$submenu.is(":hidden")) { - $submenu.hideMenu(); + Ox.print("hideMenu") + $.each(that.submenus, function(i, submenu) { + if (!submenu.is(":hidden")) { + submenu.hideMenu(); return false; } }); @@ -1799,21 +1816,17 @@ requires that.showMenu = function() { Ox.print("showMenu") - var offset = that.$element.offset(), - padding = { - left: parseInt(that.$element.css("padding-left")), - top: parseInt(that.$element.css("padding-top")), - }, - width = that.$element.width(), - 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), + that.parent().length || that.appendTo($body); + var offset = self.options.element.offset(), + width = self.options.element.outerWidth(), + height = self.options.element.outerHeight(), + left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width), + top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0), maxHeight = Math.floor(($window.height() - top - 12) / itemHeight) * itemHeight; that.css({ left: left + "px", top: top + "px" }).show(); - that.parent().length || that.appendTo($body); if (height > maxHeight) { that.$container.height(maxHeight - itemHeight); that.$scrollbars.down.show(); @@ -1835,8 +1848,7 @@ requires that = new Ox.Element("tr", self) .defaults({ bind: [], - checked: false, - click: function() {}, + checked: null, disabled: false, group: "", icon: "", @@ -1850,9 +1862,9 @@ requires keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard), title: Ox.makeArray(options.title || self.defaults.title) })) - .addClass("OxMenuItem " + (self.options.disabled ? "OxDisabled" : "")) + .addClass("OxItem" + (self.options.disabled ? " OxDisabled" : "")) .attr({ - id: Ox.toCamelCase(self.options.menu + "/" + self.options.id) + id: Ox.toCamelCase(self.options.menu.id + "/" + self.options.id) }) .click(click) .data("group", self.options.group) @@ -1862,31 +1874,29 @@ requires // construct that.append( that.$status = $("", { - addClass: "OxCell OxStatus", + "class": "OxCell OxStatus", html: self.options.checked ? oxui.symbols.check : "" }) ) .append( that.$icon = $("", { - "addClass": "OxCell OxIcon" + "class": "OxCell OxIcon" }) .append(self.options.icon ? $("", { - attr: { - src: self.options.icon - } + src: self.options.icon }) : null ) ) .append( that.$title = $("", { - addClass: "OxCell OxTitle", + "class": "OxCell OxTitle", html: self.options.title[0] }) ) .append( $("", { - addClass: "OxCell OxModifiers", + "class": "OxCell OxModifiers", html: $.map(self.options.keyboard.modifiers, function(modifier) { return oxui.symbol[modifier]; }).join("") @@ -1894,7 +1904,7 @@ requires ) .append( $("", { - addClass: "OxCell Ox" + (self.options.submenu ? "Submenu" : "Key"), + "class": "OxCell Ox" + (self.options.submenu ? "Submenu" : "Key"), html: self.options.submenu ? oxui.symbols.triangle_right : oxui.symbols[self.options.keyboard.key] || self.options.keyboard.key }) @@ -1902,17 +1912,19 @@ requires function click() { if (!that.hasClass("OxDisabled") && !self.options.submenu) { - menu.hideMenu(); - self.options.click(); - if (self.options.group && !self.options.checked) { + self.options.menu.hideMenu(); + if (self.options.checked !== null && (!self.options.group || !self.options.checked)) { that.options({ - checked: true - }) + checked: !self.options.checked + }); } if (self.options.title.length == 2) { that.toggleTitle(); } - $eventHandler.trigger("clickMenu", self.options.id); + $("*").trigger("OxClickMenu", { + id: self.options.id, + value: self.options.title // fixme: value or title? + }); return false; } } @@ -1922,7 +1934,7 @@ requires $.each(self.options.menu.submenus, function(id, submenu) { 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? that.addClass("OxSelected"); } @@ -1944,8 +1956,23 @@ requires } self.onChange = function(key, value) { + Ox.print("MenuItem", self.options.id, "onChange", key, value); 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") { that.toggleClass("disabled"); // fixme: this will only work if onChange is only invoked on actual change } diff --git a/demos/test/menu.html b/demos/test/menu.html new file mode 100644 index 0000000..f3048ad --- /dev/null +++ b/demos/test/menu.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/demos/test/menu.js b/demos/test/menu.js new file mode 100644 index 0000000..f0d8d2d --- /dev/null +++ b/demos/test/menu.js @@ -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 = $("