some fixes for button groups
This commit is contained in:
Rolux
parent
3a85be24da
commit
91318e1398
3 changed files with 94 additions and 26 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in a new issue