some fixes for button groups
This commit is contained in:
parent
3a85be24da
commit
91318e1398
3 changed files with 94 additions and 26 deletions
|
@ -217,25 +217,37 @@ OxButtonGroup
|
||||||
.OxButtonGroup > .OxButton:last-child {
|
.OxButtonGroup > .OxButton:last-child {
|
||||||
border-right-width: 1px;
|
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-topleft: 4px;
|
||||||
-moz-border-radius-bottomleft: 4px;
|
-moz-border-radius-bottomleft: 4px;
|
||||||
-webkit-border-top-left-radius: 4px;
|
-webkit-border-top-left-radius: 4px;
|
||||||
-webkit-border-bottom-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-topright: 4px;
|
||||||
-moz-border-radius-bottomright: 4px;
|
-moz-border-radius-bottomright: 4px;
|
||||||
-webkit-border-top-right-radius: 4px;
|
-webkit-border-top-right-radius: 4px;
|
||||||
-webkit-border-bottom-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-topleft: 2px;
|
||||||
-moz-border-radius-bottomleft: 2px;
|
-moz-border-radius-bottomleft: 2px;
|
||||||
-webkit-border-top-left-radius: 2px;
|
-webkit-border-top-left-radius: 2px;
|
||||||
-webkit-border-bottom-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-topright: 2px;
|
||||||
-moz-border-radius-bottomright: 2px;
|
-moz-border-radius-bottomright: 2px;
|
||||||
-webkit-border-top-right-radius: 2px;
|
-webkit-border-top-right-radius: 2px;
|
||||||
|
|
|
@ -1159,18 +1159,18 @@ requires
|
||||||
}, self)
|
}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
selected: 0,
|
selected: 0,
|
||||||
values: []
|
tabs: []
|
||||||
})
|
})
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.addClass("OxTabbar");
|
.addClass("OxTabbar");
|
||||||
|
|
||||||
Ox.ButtonGroup({
|
Ox.ButtonGroup({
|
||||||
|
buttons: self.options.tabs,
|
||||||
group: true,
|
group: true,
|
||||||
selectable: true,
|
selectable: true,
|
||||||
selected: self.options.selected,
|
selected: self.options.selected,
|
||||||
size: "medium",
|
size: "medium",
|
||||||
style: "tab",
|
style: "tab",
|
||||||
values: self.options.values
|
|
||||||
}).appendTo(that);
|
}).appendTo(that);
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
@ -1309,15 +1309,22 @@ requires
|
||||||
*/
|
*/
|
||||||
|
|
||||||
Ox.Button = function(options, self) {
|
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 || {},
|
var self = self || {},
|
||||||
that = new Ox.Element("input", self)
|
that = new Ox.Element("input", self)
|
||||||
.defaults({
|
.defaults({
|
||||||
disabled: false,
|
disabled: false,
|
||||||
group: false,
|
group: null,
|
||||||
|
id: "",
|
||||||
selectable: false,
|
selectable: false,
|
||||||
selected: false,
|
selected: false,
|
||||||
size: "medium",
|
size: "medium",
|
||||||
style: "", // can be symbol or tab
|
style: "default", // can be default, symbol or tab
|
||||||
type: "text",
|
type: "text",
|
||||||
value: "",
|
value: "",
|
||||||
values: []
|
values: []
|
||||||
|
@ -1364,8 +1371,14 @@ requires
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function click() {
|
function click() {
|
||||||
if (self.options.selectable && !(self.options.group && self.options.selected)) {
|
if (!self.options.selectable) {
|
||||||
that.toggleSelected();
|
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) {
|
if (self.options.values.length == 2) {
|
||||||
Ox.print("2 values")
|
Ox.print("2 values")
|
||||||
|
@ -1383,7 +1396,7 @@ requires
|
||||||
if (value != that.hasClass("OxSelected")) { // fixme: neccessary?
|
if (value != that.hasClass("OxSelected")) { // fixme: neccessary?
|
||||||
that.toggleClass("OxSelected");
|
that.toggleClass("OxSelected");
|
||||||
}
|
}
|
||||||
that.triggerEvent(value ? "select" : "deselect", {});
|
that.triggerEvent("change");
|
||||||
} else if (key == "value") {
|
} else if (key == "value") {
|
||||||
Ox.print("OxButton onChange value", value)
|
Ox.print("OxButton onChange value", value)
|
||||||
if (self.options.type == "image") {
|
if (self.options.type == "image") {
|
||||||
|
@ -1393,9 +1406,6 @@ requires
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
that.val(value);
|
that.val(value);
|
||||||
that.triggerEvent("change", {
|
|
||||||
value: value
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1421,38 +1431,46 @@ requires
|
||||||
|
|
||||||
Ox.ButtonGroup = function(options, self) {
|
Ox.ButtonGroup = function(options, self) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
events:
|
||||||
|
change {id, value} selection within a group changed
|
||||||
|
*/
|
||||||
|
|
||||||
var self = self || {},
|
var self = self || {},
|
||||||
that = new Ox.Element({}, self)
|
that = new Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
buttons: [],
|
||||||
group: false,
|
group: false,
|
||||||
selectable: false,
|
selectable: false,
|
||||||
selected: -1,
|
selected: -1,
|
||||||
size: "medium",
|
size: "medium",
|
||||||
style: "",
|
style: "",
|
||||||
type: "text",
|
type: "text",
|
||||||
values: []
|
|
||||||
})
|
})
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.addClass("OxButtonGroup");
|
.addClass("OxButtonGroup");
|
||||||
self.position = {};
|
self.position = {};
|
||||||
|
|
||||||
that.$buttons = [];
|
that.$buttons = [];
|
||||||
$.each(self.options.values, function(position, value) {
|
$.each(self.options.buttons, function(position, button) {
|
||||||
that.$buttons[position] = Ox.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,
|
selectable: self.options.selectable,
|
||||||
selected: position == self.options.selected,
|
selected: position == self.options.selected,
|
||||||
size: self.options.size,
|
size: self.options.size,
|
||||||
style: self.options.style,
|
style: self.options.style,
|
||||||
type: self.options.type,
|
type: self.options.type,
|
||||||
value: value
|
value: button.value
|
||||||
}).appendTo(that);
|
}).appendTo(that);
|
||||||
self.position[that.$buttons.id] = position;
|
self.position[that.$buttons.id] = position;
|
||||||
Ox.print("binding", "select_" + that.$buttons[position].id);
|
that.bindEvent("select_" + that.$buttons[position].options("id"), function() {
|
||||||
that.bindEvent("select_" + that.$buttons[position].id, select);
|
selectButton(position);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function select(event, data) {
|
function onChange(event, data) {
|
||||||
console.log("event", event, "data", data)
|
console.log("event", event, "data", data)
|
||||||
var id = event.split("_")[1];
|
var id = event.split("_")[1];
|
||||||
Ox.print("OK")
|
Ox.print("OK")
|
||||||
|
@ -1465,6 +1483,12 @@ requires
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function selectButton(position) {
|
||||||
|
that.$buttons[self.options.selected].toggleSelected();
|
||||||
|
self.options.selected = position;
|
||||||
|
that.$buttons[self.options.selected].toggleSelected();
|
||||||
|
};
|
||||||
|
|
||||||
return that;
|
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
|
Menus
|
||||||
|
|
|
@ -161,8 +161,13 @@
|
||||||
}).appendTo(sidePanel);
|
}).appendTo(sidePanel);
|
||||||
oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>Panels")
|
oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>Panels")
|
||||||
|
|
||||||
$tabbar = Ox.Tabbar({
|
$tabbar = new Ox.Tabbar({
|
||||||
values: ["Documentation", "Demo", "Source Code"]
|
selected: 0, // fixme: should not be necessary
|
||||||
|
tabs: [
|
||||||
|
{ id: "documentation", value: "Documentation" },
|
||||||
|
{ id: "demo", value: "Demo" },
|
||||||
|
{ id: "source_code", value: "Source Code" }
|
||||||
|
]
|
||||||
}).appendTo(mainPanel);
|
}).appendTo(mainPanel);
|
||||||
|
|
||||||
for (var i = 0; i < 5; i++) {
|
for (var i = 0; i < 5; i++) {
|
||||||
|
@ -194,7 +199,11 @@
|
||||||
value: "Button, selectable=true"
|
value: "Button, selectable=true"
|
||||||
}).addClass("margin").appendTo($toolbars[1]);
|
}).addClass("margin").appendTo($toolbars[1]);
|
||||||
Ox.ButtonGroup({
|
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]);
|
}).addClass("padding").appendTo($toolbars[1]);
|
||||||
$.each(["close", "add", "remove", ["play", "pause"]], function(i, v) {
|
$.each(["close", "add", "remove", ["play", "pause"]], function(i, v) {
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
|
@ -222,11 +231,15 @@
|
||||||
}).addClass("margin").appendTo($toolbars[2]);
|
}).addClass("margin").appendTo($toolbars[2]);
|
||||||
//*/
|
//*/
|
||||||
Ox.ButtonGroup({
|
Ox.ButtonGroup({
|
||||||
|
buttons: [
|
||||||
|
{ id: "close", value: "close" },
|
||||||
|
{ id: "add", value: "add" },
|
||||||
|
{ id: "remove", value: "remove" }
|
||||||
|
],
|
||||||
selectable: true,
|
selectable: true,
|
||||||
selected: 0,
|
selected: 0,
|
||||||
size: "medium",
|
size: "medium",
|
||||||
type: "image",
|
type: "image",
|
||||||
values: ["close", "add", "remove"]
|
|
||||||
}).addClass("padding").appendTo($toolbars[2]);
|
}).addClass("padding").appendTo($toolbars[2]);
|
||||||
///*
|
///*
|
||||||
Ox.Input({
|
Ox.Input({
|
||||||
|
|
Loading…
Reference in a new issue