some improvements for menu and select
This commit is contained in:
Rolux
parent
f1a6df298b
commit
ec1693c2c4
5 changed files with 70 additions and 26 deletions
|
|
@ -142,9 +142,6 @@ input[type=image] {
|
|||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
input.OxSelect {
|
||||
text-align: left;
|
||||
}
|
||||
/*
|
||||
input.OxXlarge {
|
||||
height: 26px;
|
||||
|
|
@ -317,7 +314,7 @@ OxSelect
|
|||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.OxSelect.OxMedium {
|
||||
|
||||
padding: 0 8px 0 8px;
|
||||
}
|
||||
.OxSelect > .OxButton {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ Ox.getset = function(obj, args, callback, context) {
|
|||
calls callback(key, val),
|
||||
returns context
|
||||
*/
|
||||
var args = args || {},
|
||||
var obj_ = obj,
|
||||
args = args || {},
|
||||
callback = callback || function() {},
|
||||
context = context || {},
|
||||
length = args.length,
|
||||
|
|
@ -36,8 +37,10 @@ Ox.getset = function(obj, args, callback, context) {
|
|||
// translate (str, val) to ({str: val})
|
||||
args = Ox.makeObject(args);
|
||||
obj = $.extend(obj, args);
|
||||
$.each(args, function(k, v) {
|
||||
callback(k, v);
|
||||
$.each(args, function(key, value) {
|
||||
if (!obj_ || !obj_[key] || obj_[key] !== value) {
|
||||
callback(key, value);
|
||||
}
|
||||
});
|
||||
ret = context;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -859,6 +859,7 @@ requires
|
|||
returns that
|
||||
*/
|
||||
var length = arguments.length,
|
||||
// args, options, ret;
|
||||
args, ret;
|
||||
if (length == 0) {
|
||||
// options()
|
||||
|
|
@ -872,10 +873,23 @@ requires
|
|||
args = Ox.makeObject.apply(that, arguments);
|
||||
// if options have not been set, extend defaults,
|
||||
// otherwise, extend options
|
||||
self.options = $.extend(
|
||||
self.options || self.defaults, args);
|
||||
/*
|
||||
options = self.options;
|
||||
*/
|
||||
self.options = $.extend(self.options || self.defaults, args);
|
||||
$.each(args, function(key, value) {
|
||||
self.onChange(key, value);
|
||||
/*
|
||||
fixme: why does this not work?
|
||||
Ox.print("options", options, key, value)
|
||||
//Ox.print(!options, !options || !options[key], !options || !options[key] || options[key] !== value)
|
||||
if (!options || !options[key] || options[key] !== value) {
|
||||
Ox.print("onChange...")
|
||||
self.onChange(key, value);
|
||||
} else {
|
||||
Ox.print("NO CHANGE");
|
||||
}
|
||||
*/
|
||||
});
|
||||
ret = that;
|
||||
}
|
||||
|
|
@ -886,6 +900,19 @@ requires
|
|||
delete elements[that.ox];
|
||||
return that;
|
||||
}
|
||||
that.triggerEvent = function() {
|
||||
/*
|
||||
triggerEvent(event, fn) or triggerEvent({event0: fn0, event1: fn1, ...})
|
||||
*/
|
||||
if (arguments.length == 1) {
|
||||
$.each(arguments[0], function(event, fn) {
|
||||
Ox.Event.trigger(event + "." + that.id, fn);
|
||||
});
|
||||
} else {
|
||||
Ox.Event.trigger(arguments[0] + "." + that.id, arguments[1]);
|
||||
}
|
||||
return that;
|
||||
}
|
||||
that.unbindEvent = function() {
|
||||
/*
|
||||
unbindEvent(event, fn) or unbindEvent({event0: fn0, event1: fn1, ...})
|
||||
|
|
@ -1138,7 +1165,7 @@ requires
|
|||
Ox.ButtonGroup({
|
||||
selectable: true,
|
||||
selected: self.options.selected,
|
||||
size: "small",
|
||||
size: "medium",
|
||||
style: "tab",
|
||||
values: self.options.values
|
||||
}).appendTo(that);
|
||||
|
|
@ -1296,9 +1323,8 @@ requires
|
|||
value: $.isArray(options.value) ?
|
||||
options.value[0] : options.value,
|
||||
values: $.makeArray(options.value)
|
||||
}));
|
||||
console.log("!!", self.options)
|
||||
that.attr({
|
||||
}))
|
||||
.attr({
|
||||
disabled: self.options.disabled ? "disabled" : "",
|
||||
type: self.options.type == "text" ? "button" : "image"
|
||||
})
|
||||
|
|
@ -1364,7 +1390,7 @@ requires
|
|||
});
|
||||
} else {
|
||||
that.val(value);
|
||||
Ox.Event.trigger("OxChangeButton." + self.options.id, {
|
||||
Ox.Event.trigger("change." + that.id, {
|
||||
value: value
|
||||
});
|
||||
}
|
||||
|
|
@ -1420,7 +1446,6 @@ requires
|
|||
}).appendTo(that);
|
||||
});
|
||||
that.$element.bind("OxButtonToggle", function(e, data) {
|
||||
console.log("Data", data, self.options)
|
||||
if (data.groupId = self.options.groupId) {
|
||||
if (data.selected) {
|
||||
if (self.options.selected > -1) {
|
||||
|
|
@ -1665,7 +1690,7 @@ requires
|
|||
});
|
||||
setThumb(animate);
|
||||
//console.log("triggering OxRange" + that.id + "Change")
|
||||
that.publish("change", { value: val });
|
||||
that.triggerEvent("change", { value: val });
|
||||
}
|
||||
}
|
||||
function setWidth(width) {
|
||||
|
|
@ -1717,8 +1742,7 @@ requires
|
|||
size: "medium"
|
||||
})
|
||||
.options(options)
|
||||
.addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size))
|
||||
.bindEvent("OxChangeButton." + self.options.id, changeButton),
|
||||
.addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size)),
|
||||
selected;
|
||||
|
||||
$.each(self.options.items, function(i, item) {
|
||||
|
|
@ -1737,7 +1761,6 @@ requires
|
|||
value: self.options.items[selected].title
|
||||
}), {})
|
||||
.click(clickButton)
|
||||
.bindEvent("OxClickMenu." + self.options.id, clickMenu)
|
||||
.appendTo(that);
|
||||
|
||||
that.$symbol = $("<div>", {
|
||||
|
|
@ -1756,9 +1779,12 @@ requires
|
|||
side: "bottom",
|
||||
size: self.options.size
|
||||
});
|
||||
|
||||
that.bindEvent("change." + that.$button.id, changeButton);
|
||||
that.bindEvent("click." + that.$menu.id, clickMenu);
|
||||
|
||||
function changeButton(event, data) {
|
||||
Ox.Event.trigger("OxChangeSelect." + self.options.id, data);
|
||||
that.triggerEvent("change." + that.id, data);
|
||||
}
|
||||
|
||||
function clickButton() {
|
||||
|
|
@ -2269,14 +2295,14 @@ requires
|
|||
that.options({
|
||||
checked: !self.options.checked
|
||||
});
|
||||
Ox.Event.trigger("click." + self.options.menu.id, {
|
||||
id: self.options.id,
|
||||
value: self.options.title[0] // fixme: value or title?
|
||||
});
|
||||
}
|
||||
if (self.options.title.length == 2) {
|
||||
that.toggleTitle();
|
||||
}
|
||||
Ox.Event.trigger("OxClickMenu." + self.options.menu.options("id"), {
|
||||
id: self.options.id,
|
||||
value: self.options.title[0] // fixme: value or title?
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -228,7 +228,7 @@
|
|||
value: "Foo"
|
||||
}).addClass("margin").appendTo(mainPanel);
|
||||
Ox.Select({
|
||||
id: "select",
|
||||
id: "select1",
|
||||
items: [
|
||||
{
|
||||
checked: true,
|
||||
|
|
@ -245,6 +245,24 @@
|
|||
}
|
||||
]
|
||||
}).addClass("margin").width(96).appendTo(mainPanel);
|
||||
Ox.Select({
|
||||
id: "select2",
|
||||
items: [
|
||||
{
|
||||
checked: true,
|
||||
id: "four",
|
||||
title: "Four"
|
||||
},
|
||||
{
|
||||
id: "five",
|
||||
title: "Five"
|
||||
},
|
||||
{
|
||||
id: "six",
|
||||
title: "Six"
|
||||
}
|
||||
]
|
||||
}).addClass("margin").width(96).appendTo(mainPanel);
|
||||
//*/
|
||||
function switchTheme() {
|
||||
if (Ox.theme() == "classic") {
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ $(function() {
|
|||
$(this).blur(); // fix for firefox
|
||||
menu.toggleMenu();
|
||||
})
|
||||
.bindEvent("OxClickMenu", function(event, data) {
|
||||
.bindEvent("OxClickMenu." + menu.id, function(event, data) {
|
||||
button.options({
|
||||
value: data.value
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue