some improvements for menu and select

build/css/ox.ui.css

@@ -142,9 +142,6 @@ input[type=image] {
 input:focus {
     outline: none;
 }
-input.OxSelect {
-    text-align: left;
-}
 /*
 input.OxXlarge {
     height: 26px;
@@ -317,7 +314,7 @@ OxSelect
 --------------------------------------------------------------------------------
 */
 .OxSelect.OxMedium {
-
+    padding: 0 8px 0 8px;
 }
 .OxSelect > .OxButton {
     text-align: left;

build/js/ox.js

@@ -20,7 +20,8 @@ Ox.getset = function(obj, args, callback, context) {
                                                         calls callback(key, val),
                                                         returns context
     */
-    var args = args || {},
+    var obj_ = obj,
+        args = args || {},
         callback = callback || function() {},
         context = context || {},
         length = args.length,
@@ -36,8 +37,10 @@ Ox.getset = function(obj, args, callback, context) {
         // translate (str, val) to ({str: val})
         args = Ox.makeObject(args);
         obj = $.extend(obj, args);
-        $.each(args, function(k, v) {
+        $.each(args, function(key, value) {
-            callback(k, v);
+            if (!obj_ || !obj_[key] || obj_[key] !== value) {
+                callback(key, value);
+            }
         });
         ret = context;                            
     }

build/js/ox.ui.js

@@ -859,6 +859,7 @@ requires
                                                     returns that
                 */
                 var length = arguments.length,
+                    // args, options, ret;
                     args, ret;
                 if (length == 0) {
                     // options()
@@ -872,10 +873,23 @@ requires
                     args = Ox.makeObject.apply(that, arguments);
                     // if options have not been set, extend defaults,
                     // otherwise, extend options
-                    self.options = $.extend(
+                    /*
-                        self.options || self.defaults, args);
+                    options = self.options;
+                    */
+                    self.options = $.extend(self.options || self.defaults, args);
                     $.each(args, function(key, value) {
                         self.onChange(key, value);
+                        /*
+                        fixme: why does this not work?
+                        Ox.print("options", options, key, value)
+                        //Ox.print(!options, !options || !options[key], !options || !options[key] || options[key] !== value)
+                        if (!options || !options[key] || options[key] !== value) {
+                            Ox.print("onChange...")
+                            self.onChange(key, value);
+                        } else {
+                            Ox.print("NO CHANGE");
+                        }
+                        */
                     });
                     ret = that;                            
                 }
@@ -886,6 +900,19 @@ requires
                 delete elements[that.ox];
                 return that;
             }
+            that.triggerEvent = function() {
+                /*
+                triggerEvent(event, fn) or triggerEvent({event0: fn0, event1: fn1, ...})
+                */
+                if (arguments.length == 1) {
+                    $.each(arguments[0], function(event, fn) {
+                        Ox.Event.trigger(event + "." + that.id, fn);
+                    });
+                } else {
+                    Ox.Event.trigger(arguments[0] + "." + that.id, arguments[1]);
+                }
+                return that;
+            }
             that.unbindEvent = function() {
                 /*
                 unbindEvent(event, fn) or unbindEvent({event0: fn0, event1: fn1, ...})
@@ -1138,7 +1165,7 @@ requires
             Ox.ButtonGroup({
                 selectable: true,
                 selected: self.options.selected,
-                size: "small",
+                size: "medium",
                 style: "tab",
                 values: self.options.values
             }).appendTo(that);
@@ -1296,9 +1323,8 @@ requires
                     value: $.isArray(options.value) ?
                         options.value[0] : options.value,
                     values: $.makeArray(options.value)
-                }));
+                }))
-            console.log("!!", self.options)
+                .attr({
-                that.attr({
                     disabled: self.options.disabled ? "disabled" : "",
                     type: self.options.type == "text" ? "button" : "image"
                 })
@@ -1364,7 +1390,7 @@ requires
                     });
                 } else {
                     that.val(value);
-                    Ox.Event.trigger("OxChangeButton." + self.options.id, {
+                    Ox.Event.trigger("change." + that.id, {
                         value: value
                     });
                 }
@@ -1420,7 +1446,6 @@ requires
                 }).appendTo(that);
             });
             that.$element.bind("OxButtonToggle", function(e, data) {
-                console.log("Data", data, self.options)
                 if (data.groupId = self.options.groupId) {
                     if (data.selected) {
                         if (self.options.selected > -1) {
@@ -1665,7 +1690,7 @@ requires
                 });
                 setThumb(animate);
                 //console.log("triggering OxRange" + that.id + "Change")
-                that.publish("change", { value: val });
+                that.triggerEvent("change", { value: val });
             }
         }
         function setWidth(width) {
@@ -1717,8 +1742,7 @@ requires
                     size: "medium"
                 })
                 .options(options)
-                .addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size))
+                .addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size)),
-                .bindEvent("OxChangeButton." + self.options.id, changeButton),
             selected;
 
         $.each(self.options.items, function(i, item) {
@@ -1737,7 +1761,6 @@ requires
                 value: self.options.items[selected].title
             }), {})
             .click(clickButton)
-            .bindEvent("OxClickMenu." + self.options.id, clickMenu)
             .appendTo(that);
 
         that.$symbol = $("<div>", {
@@ -1757,8 +1780,11 @@ requires
             size: self.options.size
         });
         
+        that.bindEvent("change." + that.$button.id, changeButton);
+        that.bindEvent("click." + that.$menu.id, clickMenu);
+
         function changeButton(event, data) {
-            Ox.Event.trigger("OxChangeSelect." + self.options.id, data);
+            that.triggerEvent("change." + that.id, data);
         }
 
         function clickButton() {
@@ -2269,14 +2295,14 @@ requires
                         that.options({
                             checked: !self.options.checked
                         });
+                        Ox.Event.trigger("click." + self.options.menu.id, {
+                            id: self.options.id,
+                            value: self.options.title[0] // fixme: value or title?
+                        });
                     }
                     if (self.options.title.length == 2) {
                         that.toggleTitle();
                     }
-                    Ox.Event.trigger("OxClickMenu." + self.options.menu.options("id"), {
-                        id: self.options.id,
-                        value: self.options.title[0] // fixme: value or title?
-                    });
                 }
             }
         }

demos/test/index.html

@@ -228,7 +228,7 @@
                     value: "Foo"
                 }).addClass("margin").appendTo(mainPanel);
                 Ox.Select({
-                    id: "select",
+                    id: "select1",
                     items: [
                         {
                             checked: true,
@@ -245,6 +245,24 @@
                         }
                     ]
                 }).addClass("margin").width(96).appendTo(mainPanel);
+                Ox.Select({
+                    id: "select2",
+                    items: [
+                        {
+                            checked: true,
+                            id: "four",
+                            title: "Four"
+                        },
+                        {
+                            id: "five",
+                            title: "Five"
+                        },
+                        {
+                            id: "six",
+                            title: "Six"
+                        }
+                    ]
+                }).addClass("margin").width(96).appendTo(mainPanel);
                 //*/
                 function switchTheme() {
                     if (Ox.theme() == "classic") {

demos/test/menu.js

@@ -130,7 +130,7 @@ $(function() {
                 $(this).blur(); // fix for firefox
                 menu.toggleMenu();
             })
-            .bindEvent("OxClickMenu", function(event, data) {
+            .bindEvent("OxClickMenu." + menu.id, function(event, data) {
                 button.options({
                     value: data.value
                 });