menu demo with select-like element

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

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);
-}
-
 
 /*
 ================================================================================

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

build/js/ox.ui.js

@@ -203,9 +203,22 @@ requires
 
     // use dom elements / jquery instead
 
-    $eventHandler = $("<div>");
-
     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 = {};
         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 = $("<div>")
             .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 $("<tr>").append(
-                $("<td>").addClass("OxLine", {
+                $("<td>", {
-                    attr: {
+                    "class": "OxLine",
-                        colspan: 5
+                    colspan: 5
-                    }
                 })
             );
         }
@@ -1699,7 +1716,7 @@ requires
         function constructScrollbar(direction) {
             var interval;
             return $("<div/>", {
-                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 $("<tr>").append(
-                $("<td>").addClass("OxSpace", {
+                $("<td>", {
-                    attr: {
+                    "class": "OxSpace",
-                        colspan: 5
+                    colspan: 5
-                    }
                 })
             );
         }
@@ -1787,9 +1803,10 @@ requires
         }
 
         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;
                 }
             });
@@ -1799,21 +1816,17 @@ requires
 
         that.showMenu = function() {
             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;
             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,
+                    checked: null,
-                    click: function() {},
                     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 = $("<td>", {
-                    addClass: "OxCell OxStatus",
+                    "class": "OxCell OxStatus",
                     html: self.options.checked ? oxui.symbols.check : ""
                 })
             )
             .append(
                 that.$icon = $("<td>", {
-                    "addClass": "OxCell OxIcon"
+                    "class": "OxCell OxIcon"
                 })
                 .append(self.options.icon ?
                     $("<img>", {
-                        attr: {
+                        src: self.options.icon
-                            src: self.options.icon
-                        }
                     }) : null
                 )
             )
             .append(
                 that.$title = $("<td>", {
-                    addClass: "OxCell OxTitle",
+                    "class": "OxCell OxTitle",
                     html: self.options.title[0]
                 })
             )
             .append(
                 $("<td>", {
-                    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(
                 $("<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 :
                             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.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({
-                        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
             }

demos/test/menu.html

@@ -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>

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 = $("<select>")
+            .css({
+                position: "absolute",
+                left: "160px",
+                top: "16px"
+            })
+            .appendTo($("body"));
+        $.each(["First", "Second", "Third"], function(i, v) {
+            $select.append(
+                $("<option>").html(v)
+            );
+        });
+});