From 521d9dd5e5d70ced5e04fb46c465fad9889a404a Mon Sep 17 00:00:00 2001 From: Rolux Date: Wed, 10 Feb 2010 15:29:59 +0530 Subject: [PATCH] some fixes for button groups --- build/css/ox.ui.css | 20 ++++++++--- build/js/ox.ui.js | 79 +++++++++++++++++++++++++++++++++---------- demos/test/index.html | 21 +++++++++--- 3 files changed, 94 insertions(+), 26 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 7f512bc..2cbb5bd 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -217,25 +217,37 @@ OxButtonGroup .OxButtonGroup > .OxButton:last-child { border-right-width: 1px; } -.OxButtonGroup > .OxButton.OxSmall:first-child { +.OxButtonGroup > .OxButton.OxLarge:first-child { + -moz-border-radius-topleft: 6px; + -moz-border-radius-bottomleft: 6px; + -webkit-border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; +} +.OxButtonGroup > .OxButton.OxLarge:last-child { + -moz-border-radius-topright: 6px; + -moz-border-radius-bottomright: 6px; + -webkit-border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; +} +.OxButtonGroup > .OxButton.OxMedium:first-child { -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; } -.OxButtonGroup > .OxButton.OxSmall:last-child { +.OxButtonGroup > .OxButton.OxMedium:last-child { -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; } -.OxButtonGroup > .OxButton.OxXsmall:first-child { +.OxButtonGroup > .OxButton.OxSmall:first-child { -moz-border-radius-topleft: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; } -.OxButtonGroup > .OxButton.OxXsmall:last-child { +.OxButtonGroup > .OxButton.OxSmall:last-child { -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-top-right-radius: 2px; diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 663e6e5..f22c98c 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1159,18 +1159,18 @@ requires }, self) .defaults({ selected: 0, - values: [] + tabs: [] }) .options(options || {}) .addClass("OxTabbar"); Ox.ButtonGroup({ + buttons: self.options.tabs, group: true, selectable: true, selected: self.options.selected, size: "medium", style: "tab", - values: self.options.values }).appendTo(that); return that; @@ -1309,15 +1309,22 @@ requires */ Ox.Button = function(options, self) { + /* + events: + click non-selectable button was clicked + deselect selectable button was deselected + select selectable button was selected + */ var self = self || {}, that = new Ox.Element("input", self) .defaults({ disabled: false, - group: false, + group: null, + id: "", selectable: false, selected: false, size: "medium", - style: "", // can be symbol or tab + style: "default", // can be default, symbol or tab type: "text", value: "", values: [] @@ -1364,8 +1371,14 @@ requires } } function click() { - if (self.options.selectable && !(self.options.group && self.options.selected)) { - that.toggleSelected(); + if (!self.options.selectable) { + that.triggerEvent("click"); + } else if (!self.options.group || !self.options.selected) { + if (self.options.group) { + that.triggerEvent("select"); + } else { + that.toggleSelected(); + } } if (self.options.values.length == 2) { Ox.print("2 values") @@ -1383,7 +1396,7 @@ requires if (value != that.hasClass("OxSelected")) { // fixme: neccessary? that.toggleClass("OxSelected"); } - that.triggerEvent(value ? "select" : "deselect", {}); + that.triggerEvent("change"); } else if (key == "value") { Ox.print("OxButton onChange value", value) if (self.options.type == "image") { @@ -1393,9 +1406,6 @@ requires }); } else { that.val(value); - that.triggerEvent("change", { - value: value - }); } } } @@ -1421,38 +1431,46 @@ requires Ox.ButtonGroup = function(options, self) { + /* + events: + change {id, value} selection within a group changed + */ + var self = self || {}, that = new Ox.Element({}, self) .defaults({ + buttons: [], group: false, selectable: false, selected: -1, size: "medium", style: "", type: "text", - values: [] }) .options(options || {}) .addClass("OxButtonGroup"); self.position = {}; that.$buttons = []; - $.each(self.options.values, function(position, value) { + $.each(self.options.buttons, function(position, button) { that.$buttons[position] = Ox.Button({ - group: self.options.group, + disabled: button.disabled, + group: self.options.group ? that : null, + id: button.id, selectable: self.options.selectable, selected: position == self.options.selected, size: self.options.size, style: self.options.style, type: self.options.type, - value: value + value: button.value }).appendTo(that); self.position[that.$buttons.id] = position; - Ox.print("binding", "select_" + that.$buttons[position].id); - that.bindEvent("select_" + that.$buttons[position].id, select); + that.bindEvent("select_" + that.$buttons[position].options("id"), function() { + selectButton(position); + }); }); - function select(event, data) { + function onChange(event, data) { console.log("event", event, "data", data) var id = event.split("_")[1]; Ox.print("OK") @@ -1464,7 +1482,13 @@ requires value: id }); } - + + function selectButton(position) { + that.$buttons[self.options.selected].toggleSelected(); + self.options.selected = position; + that.$buttons[self.options.selected].toggleSelected(); + }; + return that; }; @@ -1825,6 +1849,25 @@ requires } + /* + ============================================================================ + Lists + ============================================================================ + */ + + Ox.List = function(options, self) { + + var self = self || {}, + that = new Ox.Container({}, self); + + return that; + + }; + + Ox.ListItem = function(options, self) { + + }; + /* ============================================================================ Menus diff --git a/demos/test/index.html b/demos/test/index.html index eef2fb4..fbbfd83 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -161,8 +161,13 @@ }).appendTo(sidePanel); oxuijsPanel.$content.html("Core
Bars
Forms
Panels") - $tabbar = Ox.Tabbar({ - values: ["Documentation", "Demo", "Source Code"] + $tabbar = new Ox.Tabbar({ + selected: 0, // fixme: should not be necessary + tabs: [ + { id: "documentation", value: "Documentation" }, + { id: "demo", value: "Demo" }, + { id: "source_code", value: "Source Code" } + ] }).appendTo(mainPanel); for (var i = 0; i < 5; i++) { @@ -194,7 +199,11 @@ value: "Button, selectable=true" }).addClass("margin").appendTo($toolbars[1]); Ox.ButtonGroup({ - values: ["Button Group (0)", "Button Group (1)", "Button Group (2)"] + buttons: [ + { id: "buttongroup0", value: "Button Group (0)" }, + { id: "buttongroup1", value: "Button Group (1)" }, + { id: "buttongroup2", value: "Button Group (2)" } + ] }).addClass("padding").appendTo($toolbars[1]); $.each(["close", "add", "remove", ["play", "pause"]], function(i, v) { Ox.Button({ @@ -222,11 +231,15 @@ }).addClass("margin").appendTo($toolbars[2]); //*/ Ox.ButtonGroup({ + buttons: [ + { id: "close", value: "close" }, + { id: "add", value: "add" }, + { id: "remove", value: "remove" } + ], selectable: true, selected: 0, size: "medium", type: "image", - values: ["close", "add", "remove"] }).addClass("padding").appendTo($toolbars[2]); ///* Ox.Input({