diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 7f512bcf..2cbb5bdf 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 663e6e5f..f22c98c0 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 eef2fb45..fbbfd832 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({