some improvements for menu and select

This commit is contained in:
Rolux 2010-02-06 13:53:42 +05:30
parent f1a6df298b
commit ec1693c2c4
5 changed files with 70 additions and 26 deletions

View file

@ -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;

View file

@ -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;
} }

View file

@ -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?
});
} }
} }
} }

View file

@ -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") {

View file

@ -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
}); });