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