forked from 0x2620/oxjs
basic select (in demos/test/index.html)
This commit is contained in:
Rolux
parent
ed5667de85
commit
75f16e5fb8
3 changed files with 141 additions and 46 deletions
|
|
@ -830,6 +830,7 @@ requires
|
|||
} else {
|
||||
Ox.Event.bind(that.id, arguments[0], arguments[1]);
|
||||
}
|
||||
return that;
|
||||
};
|
||||
that.defaults = function(defaults) {
|
||||
/*
|
||||
|
|
@ -873,8 +874,8 @@ requires
|
|||
// otherwise, extend options
|
||||
self.options = $.extend(
|
||||
self.options || self.defaults, args);
|
||||
$.each(args, function(k, v) {
|
||||
self.onChange(k, v);
|
||||
$.each(args, function(key, value) {
|
||||
self.onChange(key, value);
|
||||
});
|
||||
ret = that;
|
||||
}
|
||||
|
|
@ -883,6 +884,7 @@ requires
|
|||
that.remove = function() {
|
||||
that.$element.remove();
|
||||
delete elements[that.ox];
|
||||
return that;
|
||||
}
|
||||
that.unbindEvent = function() {
|
||||
/*
|
||||
|
|
@ -895,6 +897,7 @@ requires
|
|||
} else {
|
||||
Ox.Event.unbind(that.id, arguments[0], arguments[1]);
|
||||
}
|
||||
return that;
|
||||
}
|
||||
|
||||
// return
|
||||
|
|
@ -1278,12 +1281,12 @@ requires
|
|||
that = new Ox.Element("input", self)
|
||||
.defaults({
|
||||
buttonId: null,
|
||||
click: function() {},
|
||||
//click: function() {},
|
||||
disabled: false,
|
||||
groupId: null,
|
||||
selectable: false,
|
||||
selected: false,
|
||||
size: "small",
|
||||
size: "medium",
|
||||
style: "", // can be symbol or tab
|
||||
type: "text",
|
||||
value: "",
|
||||
|
|
@ -1294,16 +1297,17 @@ requires
|
|||
options.value[0] : options.value,
|
||||
values: $.makeArray(options.value)
|
||||
}));
|
||||
that.attr({
|
||||
disabled: self.options.disabled ? "disabled" : "",
|
||||
type: self.options.type == "text" ? "button" : "image"
|
||||
})
|
||||
.addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) +
|
||||
(self.options.style ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
|
||||
(self.options.disabled ? " OxDisabled": "") +
|
||||
(self.options.selected ? " OxSelected": ""))
|
||||
.mousedown(mousedown)
|
||||
.click(click);
|
||||
console.log("!!", self.options)
|
||||
that.attr({
|
||||
disabled: self.options.disabled ? "disabled" : "",
|
||||
type: self.options.type == "text" ? "button" : "image"
|
||||
})
|
||||
.addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) +
|
||||
(self.options.style ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
|
||||
(self.options.disabled ? " OxDisabled": "") +
|
||||
(self.options.selected ? " OxSelected": ""))
|
||||
.mousedown(mousedown)
|
||||
.click(click);
|
||||
//console.log(self.options.value, self.options.disabled)
|
||||
/*
|
||||
that.bind("OxElement" + that.id + "SetOptions", function(e, data) {
|
||||
|
|
@ -1334,6 +1338,7 @@ requires
|
|||
if (self.options.selectable && !(self.options.groupId !== null && self.options.selected)) {
|
||||
that.toggleSelected();
|
||||
}
|
||||
Ox.print(self.options);
|
||||
if (self.options.values.length == 2) {
|
||||
console.log("2 values")
|
||||
that.options({
|
||||
|
|
@ -1341,16 +1346,17 @@ requires
|
|||
self.options.values[1] : self.options.values[0]
|
||||
});
|
||||
}
|
||||
self.options.click();
|
||||
//self.options.click();
|
||||
}
|
||||
self.onChange = function(option, value) {
|
||||
self.onChange = function(key, value) {
|
||||
//console.log("setOption", option, value)
|
||||
if (option == "selected") {
|
||||
Ox.print("OxButton onChange", key, value)
|
||||
if (key == "selected") {
|
||||
if (value != that.hasClass("OxSelected")) {
|
||||
that.toggleClass("OxSelected");
|
||||
}
|
||||
}
|
||||
if (option == "value") {
|
||||
} else if (key == "value") {
|
||||
Ox.print("OxButton onChange value", value)
|
||||
if (self.options.type == "image") {
|
||||
that.attr({
|
||||
src: oxui.path + "png/ox.ui." + Ox.theme() +
|
||||
|
|
@ -1389,7 +1395,7 @@ requires
|
|||
groupId: Ox.uid(),
|
||||
selectable: false,
|
||||
selected: -1,
|
||||
size: "small",
|
||||
size: "medium",
|
||||
style: "",
|
||||
type: "text",
|
||||
values: []
|
||||
|
|
@ -1436,7 +1442,7 @@ requires
|
|||
that = new Ox.Element("input", self)
|
||||
.defaults({
|
||||
placeholder: "",
|
||||
size: "small",
|
||||
size: "medium",
|
||||
type: "text"
|
||||
})
|
||||
.options(options || {});
|
||||
|
|
@ -1701,31 +1707,73 @@ requires
|
|||
Ox.Select = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Button({}, self)
|
||||
that = new Ox.Element("div", self)
|
||||
.defaults({
|
||||
id: "",
|
||||
items: []
|
||||
items: [],
|
||||
size: "medium"
|
||||
})
|
||||
.options(options)
|
||||
.click(click),
|
||||
items;
|
||||
.addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size)),
|
||||
selected;
|
||||
|
||||
$.each(self.options.items, function(i, item) {
|
||||
items.push({
|
||||
checked: false,
|
||||
self.options.items[i] = $.extend(self.options.items[i], {
|
||||
checked: item.checked || false,
|
||||
group: self.options.id,
|
||||
title: item.title
|
||||
})
|
||||
});
|
||||
if (item.checked) {
|
||||
selected = i;
|
||||
}
|
||||
})
|
||||
|
||||
that.$button = new Ox.Button($.extend(self.options, {
|
||||
type: "text", // fixme: this shouldn't be necessary
|
||||
value: self.options.items[selected].title
|
||||
}), {})
|
||||
.click(clickButton)
|
||||
.bindEvent("OxClickMenu." + self.options.id, clickMenu)
|
||||
.appendTo(that);
|
||||
|
||||
that.$symbol = $("<div>", {
|
||||
"class": "OxSymbol",
|
||||
html: oxui.symbols.select
|
||||
})
|
||||
.click(function() {
|
||||
that.$button.trigger("click");
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
|
||||
that.$menu = new Ox.Menu({
|
||||
|
||||
})
|
||||
element: that.$button,
|
||||
id: self.options.id,
|
||||
items: self.options.items,
|
||||
side: "bottom",
|
||||
size: self.options.size
|
||||
});
|
||||
|
||||
function click() {
|
||||
|
||||
function clickButton() {
|
||||
that.$menu.toggleMenu();
|
||||
}
|
||||
|
||||
function clickMenu(event, data) {
|
||||
that.$button.options({
|
||||
value: data.value
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
|
||||
};
|
||||
|
||||
that.width = function(val) {
|
||||
// fixme: silly hack, and won't work for css()
|
||||
that.$element.width(val);
|
||||
that.$button.width(val);
|
||||
that.$symbol.width(val);
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
}
|
||||
|
|
@ -2216,9 +2264,9 @@ requires
|
|||
if (self.options.title.length == 2) {
|
||||
that.toggleTitle();
|
||||
}
|
||||
Ox.Event.trigger("OxClickMenu", {
|
||||
Ox.Event.trigger("OxClickMenu." + self.options.menu.options("id"), {
|
||||
id: self.options.id,
|
||||
value: self.options.title // fixme: value or title?
|
||||
value: self.options.title[0] // fixme: value or title?
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -2359,7 +2407,6 @@ requires
|
|||
.dblclick(dblclickTitlebar)
|
||||
.appendTo(that),
|
||||
$switch = new Ox.Button({
|
||||
size: "small",
|
||||
style: "symbol",
|
||||
type: "image",
|
||||
value: value,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue