From fa751bcd638afa2ccb9d1154f53362a060177848 Mon Sep 17 00:00:00 2001 From: Rolux Date: Sat, 6 Feb 2010 13:53:42 +0530 Subject: [PATCH] some improvements for menu and select --- build/css/ox.ui.css | 5 +--- build/js/ox.js | 9 ++++--- build/js/ox.ui.js | 60 +++++++++++++++++++++++++++++++------------ demos/test/index.html | 20 ++++++++++++++- demos/test/menu.js | 2 +- 5 files changed, 70 insertions(+), 26 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 78877e9..570a437 100644 --- a/build/css/ox.ui.css +++ b/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; diff --git a/build/js/ox.js b/build/js/ox.js index 0d65d03..30bbbc4 100644 --- a/build/js/ox.js +++ b/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) { - callback(k, v); + $.each(args, function(key, value) { + if (!obj_ || !obj_[key] || obj_[key] !== value) { + callback(key, value); + } }); ret = context; } diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 23826a3..d888f03 100644 --- a/build/js/ox.ui.js +++ b/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) - that.attr({ + })) + .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)) - .bindEvent("OxChangeButton." + self.options.id, changeButton), + .addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size)), 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 = $("
", { @@ -1756,9 +1779,12 @@ requires side: "bottom", 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? - }); } } } diff --git a/demos/test/index.html b/demos/test/index.html index fd42da8..1142d85 100644 --- a/demos/test/index.html +++ b/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") { diff --git a/demos/test/menu.js b/demos/test/menu.js index 6de9a37..6081952 100644 --- a/demos/test/menu.js +++ b/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 });