")
+ .addClass("OxExtras")
+ .appendTo(that.$element);
+ $.each(self.options.extras, function(position, extra) {
+ extra.appendTo(that.extras);
+ });
+ }
+
function click(event) {
var $target = $(event.target),
position = typeof $target.data("position") != "undefined" ?
@@ -1963,14 +2266,22 @@ requires
};
- that.addMenuAfter = function() {
+ that.addMenuAfter = function(id) {
};
- that.addMenuBefore = function() {
+ that.addMenuBefore = function(id) {
};
+ that.disableItem = function(id) {
+
+ };
+
+ that.enableItem = function(id) {
+
+ };
+
that.removeMenu = function() {
};
@@ -2019,7 +2330,10 @@ requires
events:
change_groupId {id, value} checked item of a group has changed
click_itemId item not belonging to a group was clicked
+ click_menuId {id, value} item not belonging to a group was clicked
+ deselect_menuId {id, value} item was deselected not needed, not implemented
hide_menuId menu was hidden
+ select_menuId {id, value} item was selected not needed, not implemented
*/
@@ -2049,7 +2363,7 @@ requires
.mouseleave(mouseleave)
.mousemove(mousemove),
itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20),
- menuHeight,
+ // menuHeight,
scrollSpeed = 1,
$item; // fixme: used?
// fixme: attach all private vars to self?
@@ -2069,34 +2383,7 @@ requires
that.$content = $("
")
.addClass("OxContent")
.appendTo(that.$container);
- $.each(self.options.items, function(i, item) {
- var position;
- if (item.id) {
- that.items.push(new Ox.MenuItem($.extend(item, {
- menu: that,
- position: position = that.items.length
- })).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
- if (item.items) {
- that.submenus[item.id] = new Ox.Menu({
- element: that.items[position],
- id: Ox.toCamelCase(self.options.id + "/" + item.id),
- items: item.items,
- mainmenu: self.options.mainmenu,
- offset: {
- left: 0,
- top: -4
- },
- parent: that,
- side: "right",
- size: self.options.size,
- });
- }
- } else {
- that.$content.append(constructSpace());
- that.$content.append(constructLine());
- that.$content.append(constructSpace());
- }
- });
+ constructItems(self.options.items);
that.$scrollbars.down = constructScrollbar("down")
.appendTo(that.$element);
that.$bottom = $("")
@@ -2138,6 +2425,10 @@ requires
value: item.options("title")[0] // fixme: value or title?
});
} else {
+ Ox.Event.trigger("click_" + self.options.id, {
+ id: item.options("id"),
+ title: item.options("title")[0]
+ });
Ox.Event.trigger("click_" + item.options("id"));
}
if (item.options("title").length == 2) {
@@ -2156,6 +2447,45 @@ requires
}
}
+ function constructItems(items) {
+ that.items = [];
+ that.$content.empty();
+ scrollMenuUp();
+ $.each(items, function(i, item) {
+ var position;
+ if (item.id) {
+ that.items.push(new Ox.MenuItem($.extend(item, {
+ menu: that,
+ position: position = that.items.length
+ })).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
+ if (item.items) {
+ that.submenus[item.id] = new Ox.Menu({
+ element: that.items[position],
+ id: Ox.toCamelCase(self.options.id + "/" + item.id),
+ items: item.items,
+ mainmenu: self.options.mainmenu,
+ offset: {
+ left: 0,
+ top: -4
+ },
+ parent: that,
+ side: "right",
+ size: self.options.size,
+ });
+ }
+ } else {
+ that.$content.append(constructSpace());
+ that.$content.append(constructLine());
+ that.$content.append(constructSpace());
+ }
+ });
+ if (!that.is(":hidden")) {
+ Ox.print("hide&show")
+ that.hideMenu();
+ that.showMenu();
+ }
+ }
+
function constructLine() {
return $("
").append(
$("| ", {
@@ -2304,9 +2634,9 @@ requires
function selectItem(position) {
var item;
- Ox.print("selectItem", position)
if (self.options.selected > -1) {
- that.items[self.options.selected].removeClass("OxSelected");
+ item = that.items[self.options.selected]
+ item.removeClass("OxSelected");
}
if (position > -1) {
item = that.items[position];
@@ -2316,13 +2646,10 @@ requires
return false;
}
});
- Ox.print("length", item.options("items").length)
item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style?
item.addClass("OxSelected");
}
- that.options({
- selected: position
- });
+ self.options.selected = position;
}
function selectNextItem() {
@@ -2412,7 +2739,11 @@ requires
}
self.onChange = function(key, value) {
-
+ if (key == "items") {
+ constructItems(value);
+ } else if (key == "selected") {
+ selectItem(value);
+ }
}
that.addItemAfter = function(item) {
@@ -2454,6 +2785,9 @@ requires
});
selectItem(-1);
scrollMenuUp();
+ that.$scrollbars.up.is(":visible") && that.$scrollbars.up.hide();
+ that.$scrollbars.down.is(":visible") && that.$scrollbars.down.hide();
+ //that.$scrollbars.down.hide();
if (self.options.parent) {
self.options.element.removeClass("OxSelected");
}
@@ -2483,37 +2817,40 @@ requires
};
that.showMenu = function() {
- Ox.print("showMenu")
+ Ox.print("showMenu");
if (!self.options.parent && !that.$layer.parent().length) {
that.$layer.appendTo($body);
}
that.parent().length || that.appendTo($body);
+ that.css({
+ left: "-1000px",
+ top: "-1000px",
+ }).show();
var offset = self.options.element.offset(),
width = self.options.element.outerWidth(),
height = self.options.element.outerHeight(),
left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width),
top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0),
- maxHeight = Math.floor($window.height() - top - 16);
- menuHeight = menuHeight || that.outerHeight();
- Ox.print("menuHeight", menuHeight, "maxHeight", maxHeight);
+ menuHeight = that.$content.outerHeight(); // fixme: why is outerHeight 0 when hidden?
+ menuMaxHeight = Math.floor($window.height() - top - 16),
+ Ox.print("menuHeight", menuHeight, "menuMaxHeight", menuMaxHeight, that.items.length);
if (self.options.parent) {
- if (menuHeight > maxHeight) {
- top = Ox.limit(top - menuHeight + maxHeight, self.options.parent.offset().top, top);
- maxHeight = Math.floor($window.height() - top - 16);
+ if (menuHeight > menuMaxHeight) {
+ top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top);
+ menuMaxHeight = Math.floor($window.height() - top - 16);
}
}
that.css({
left: left + "px",
top: top + "px"
- }).show();
- if (menuHeight > maxHeight) {
- Ox.print(maxHeight - itemHeight);
- that.$container.height(maxHeight - itemHeight - 8); // margin
+ });
+ if (menuHeight > menuMaxHeight) {
+ that.$container.height(menuMaxHeight - itemHeight - 8); // margin
that.$scrollbars.down.show();
+ } else {
+ that.$container.height(menuHeight);
}
- if (!self.options.parent) {
- that.gainFocus();
- }
+ !self.options.parent && that.gainFocus();
that.bindEvent({
key_up: selectPreviousItem,
key_down: selectNextItem,
@@ -2606,7 +2943,7 @@ requires
);
function parseKeyboard(str) {
- var modifiers = str.split(' '),
+ var modifiers = str.split(" "),
key = modifiers.pop();
return {
modifiers: modifiers,
@@ -2634,9 +2971,15 @@ requires
that.$status.html(value ? oxui.symbols.check : "")
} else if (key == "disabled") {
that.toggleClass("disabled"); // fixme: this will only work if onChange is only invoked on actual change
+ } else if (key == "title") {
+
}
}
+ that.toggle = function() {
+ // toggle id and title
+ };
+
that.toggleChecked = function() {
};
@@ -2649,7 +2992,7 @@ requires
that.options({
title: that.$title.html() == self.options.title[0] ?
self.options.title[1] : self.options.title[0]
- })
+ });
};
return that;
@@ -2817,6 +3160,10 @@ requires
return that;
};
+ Ox.TabPanel = function(options, self) {
+
+ };
+
})();
/*
diff --git a/build/png/ox.ui.classic/buttonClear.png b/build/png/ox.ui.classic/buttonClear.png
new file mode 100644
index 00000000..620e25bd
Binary files /dev/null and b/build/png/ox.ui.classic/buttonClear.png differ
diff --git a/build/png/ox.ui.classic/buttonSelect.png b/build/png/ox.ui.classic/buttonSelect.png
new file mode 100644
index 00000000..28ef8b22
Binary files /dev/null and b/build/png/ox.ui.classic/buttonSelect.png differ
diff --git a/build/png/ox.ui.modern/buttonClear.png b/build/png/ox.ui.modern/buttonClear.png
new file mode 100644
index 00000000..4a6a7c14
Binary files /dev/null and b/build/png/ox.ui.modern/buttonClear.png differ
diff --git a/build/png/ox.ui.modern/buttonSelect.png b/build/png/ox.ui.modern/buttonSelect.png
new file mode 100644
index 00000000..6b5b17cb
Binary files /dev/null and b/build/png/ox.ui.modern/buttonSelect.png differ
diff --git a/demos/test/index.html b/demos/test/index.html
index fbbfd832..481aa51d 100644
--- a/demos/test/index.html
+++ b/demos/test/index.html
@@ -60,6 +60,52 @@
})*/;
var mainMenu = new Ox.MainMenu({
+ extras: [
+ new Ox.Input({
+ autocomplete: {
+ "Find: Title": [
+ "A bout de souffle",
+ "Casino",
+ "Diaries, Notes and Sketches",
+ "L'age d'or",
+ "Far From Heaven",
+ "In girum imus nocte et consumimur igni",
+ "It Felt Like a Kiss",
+ "Mulholland Dr.",
+ "Querelle",
+ "Vertigo"
+ ],
+ "Find: Director": [
+ "Luis Buñuel",
+ "Adam Curtis",
+ "Guy Debord",
+ "Rainer Werner Fassbinder",
+ "Jean-Luc Godard",
+ "Todd Haynes",
+ "Alfred Hitchcock",
+ "David Lynch",
+ "Jonas Mekas",
+ "Martin Scorsese"
+ ],
+ "Find: Country": [
+ "Austria",
+ "Canada",
+ "France",
+ "Germany",
+ "Italy",
+ "Japan",
+ "Spain",
+ "Swizerland",
+ "UK",
+ "USA"
+ ]
+ },
+ clear: true,
+ highlight: false,
+ id: "find",
+ placeholder: ["Find: Title", "Find: Director", "Find: Country"],
+ }).width(256)
+ ],
menus: [
{
id: "oxjs",
@@ -290,6 +336,12 @@
type: "text",
value: "Foo"
}).addClass("margin").appendTo(mainPanel);
+ Ox.Button({
+ selectable: true,
+ size: size,
+ type: "text",
+ value: "Bar"
+ }).addClass("margin").appendTo(mainPanel);
Ox.Select({
id: "select1",
items: [
@@ -326,6 +378,75 @@
}
]
}).addClass("margin").width(96).appendTo(mainPanel);
+ Ox.Button({
+ selectable: true,
+ size: size,
+ type: "text",
+ value: "Foo"
+ }).addClass("margin").appendTo(mainPanel);
+ Ox.Button({
+ selectable: true,
+ size: size,
+ type: "text",
+ value: "Bar"
+ }).addClass("margin").appendTo(mainPanel);
+ Ox.Input({
+ autocomplete: {
+ City: [
+ "Albuquerque",
+ "Austin",
+ "Baltimore",
+ "Boston",
+ "Chicago",
+ "Cleveland",
+ "Dallas",
+ "Denver",
+ "Detroit",
+ "El Paso",
+ "Honululu",
+ "Houston",
+ "Kansas City",
+ "Las Vegas",
+ "Los Angeles",
+ "Memphis",
+ "Miami",
+ "Minneapolis",
+ "Nashville",
+ "New Orleans",
+ "New York",
+ "Oklahoma City",
+ "Philadelphia",
+ "Phoenix",
+ "Pittsburgh",
+ "Portland",
+ "San Antonio",
+ "San Diego",
+ "San Francisco",
+ "St. Louis",
+ "St. Paul",
+ "Seattle",
+ "Washington"
+ ],
+ State: [
+ "Alabama", "Alaska", "Arizona", "Arkansas", "California",
+ "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
+ "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana",
+ "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine",
+ "Maryland", "Massachusetts", "Michigan", "Minnessota", "Mississippi",
+ "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire",
+ "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota",
+ "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island",
+ "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah",
+ "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin",
+ "Wyoming"
+ ]
+ },
+ clear: false,
+ highlight: true,
+ id: "citystate",
+ placeholder: ["City", "State"],
+ selected: 1
+ }).addClass("margin").width(160).appendTo(mainPanel);
//*/
function switchTheme() {
if (Ox.theme() == "classic") {
diff --git a/source/psd/buttons.psd b/source/psd/buttons.psd
index c307394f..06c894ff 100644
Binary files a/source/psd/buttons.psd and b/source/psd/buttons.psd differ
|