some fixes for button groups

This commit is contained in:
Rolux 2010-02-10 15:29:59 +05:30
parent 3a85be24da
commit 91318e1398
3 changed files with 94 additions and 26 deletions

View file

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

View file

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

View file

@ -161,8 +161,13 @@
}).appendTo(sidePanel);
oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>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({