0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

adding label to input element

Browse source
This commit is contained in:
Rolux 2010-02-20 13:16:31 +05:30
parent af4a5e931e
commit 96b29f0c19
4 changed files with 77 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
build/css/ox.ui.classic.css
View file

@ -34,13 +34,13 @@ Dialog
*/ */
.OxThemeClassic .OxDialog { .OxThemeClassic .OxDialog {
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
} }
.OxThemeClassic .OxDialog .OxBar { .OxThemeClassic .OxDialog .OxBar {
background: -moz-linear-gradient(top, rgba(192, 192, 192, 0.96), rgba(160, 160, 160, 0.96)); background: -moz-linear-gradient(top, rgba(208, 208, 208, 0.96), rgba(176, 176, 176, 0.96));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, 0.96)), to(rgba(160, 160, 160, 0.96))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96)));
} }
.OxThemeClassic .OxDialog .OxContent { .OxThemeClassic .OxDialog .OxContent {

12
build/css/ox.ui.css
View file

@ -288,7 +288,14 @@ div.OxInput {
div.OxInput.OxMedium { div.OxInput.OxMedium {
height: 14px; height: 14px;
} }
div.OxInput > .OxButton:first-child { div.OxInput > .OxLabel {
float: left;
padding-left: 8px;
text-overflow: ellipsis;
cursor: default;
overflow: hidden;
}
div.OxInput > .OxButton {
float: left; float: left;
margin-top: -1px; margin-top: -1px;
} }
@ -375,6 +382,9 @@ Layers
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
} }
.OxLayer.OxFront {
z-index: 100;
}
.OxMainMenuLayer { .OxMainMenuLayer {
position: absolute; position: absolute;
width: 100%; width: 100%;

89
build/js/ox.ui.js
View file

@ -1228,6 +1228,7 @@ requires
*/ */
Ox.Dialog = function(options, self) { Ox.Dialog = function(options, self) {
// fixme: dialog should be derived from a generic draggable // fixme: dialog should be derived from a generic draggable
var self = self || {}, var self = self || {},
that = new Ox.Element("div", self) that = new Ox.Element("div", self)
@ -1245,6 +1246,7 @@ requires
width: self.options.width + "px", width: self.options.width + "px",
height: (self.options.height + 80) + "px" height: (self.options.height + 80) + "px"
}); });
that.$titlebar = new Ox.Bar({ that.$titlebar = new Ox.Bar({
size: "medium" size: "medium"
}) })
@ -1298,16 +1300,20 @@ requires
}).click(button.click).appendTo(that.$buttonsbar); }).click(button.click).appendTo(that.$buttonsbar);
}); });
that.$buttons[0].focus(); that.$buttons[0].focus();
that.$layer = $(".OxLayer"); // fixme: lazy loading of layer is fine, but save in var, dont look up that.$layer = new Ox.Element()
.addClass("OxLayer");
self.onChange = function(key, value) { self.onChange = function(key, value) {
if (key == "title") { if (key == "title") {
that.$title.html(value); that.$title.html(value);
} }
} }
that.append = function($element) { that.append = function($element) {
that.$content.append($element); that.$content.append($element);
return that; return that;
} }
that.close = function(callback) { that.close = function(callback) {
callback = callback || function() {}; callback = callback || function() {};
that.animate({ that.animate({
@ -1318,15 +1324,18 @@ requires
callback(); callback();
}) })
} }
that.disableButtons = function() {
that.disable = function() {
// to be used on submit of form, like login // to be used on submit of form, like login
that.$layer.addClass("OxFront");
}; };
that.enable = function() {
that.$layer.removeClass("OxFront");
}
that.open = function() { that.open = function() {
if (!that.$layer.length) { that.$layer.appendTo($body);
that.$layer = new Ox.Element()
.addClass("OxLayer")
.appendTo($body);
}
that.css({ that.css({
opacity: 0 opacity: 0
}).appendTo(that.$layer).animate({ }).appendTo(that.$layer).animate({
@ -1334,7 +1343,9 @@ requires
}, 200); }, 200);
return that; return that;
} }
return that; return that;
} }
/* /*
@ -1584,9 +1595,11 @@ requires
if (self.options.label) { if (self.options.label) {
self.options.label = Ox.makeArray(self.options.label); self.options.label = Ox.makeArray(self.options.label);
self.label = self.options.label[self.options.selected]; self.label = self.options.label[self.options.selected];
self.items = self.options.label;
} else if (self.options.placeholder) { } else if (self.options.placeholder) {
self.options.placeholder = Ox.makeArray(self.options.placeholder); self.options.placeholder = Ox.makeArray(self.options.placeholder);
self.placeholder = self.options.placeholder[self.options.selected]; self.placeholder = self.options.placeholder[self.options.selected];
self.items = self.options.placeholder;
} }
if (Ox.isArray(self.options.autocomplete)) { if (Ox.isArray(self.options.autocomplete)) {
autocomplete = self.options.autocomplete; autocomplete = self.options.autocomplete;
@ -1595,8 +1608,14 @@ requires
} }
if (self.options.label) { if (self.options.label) {
that.$label = "foo"; that.$label = new Ox.Element()
} else if (self.options.placeholder.length > 1) { .addClass("OxLabel")
.width(self.options.labelWidth)
.html(self.options.label[0])
.appendTo(that);
}
if (self.options.label.length > 1 || self.options.placeholder.length > 1) {
that.$label && that.$label.click(select);
that.$select = new Ox.Button({ that.$select = new Ox.Button({
style: "symbol", style: "symbol",
type: "image", type: "image",
@ -1604,15 +1623,15 @@ requires
}) })
.click(select) .click(select)
.appendTo(that); .appendTo(that);
self.placeholderId = self.options.id + "_placeholder"; self.selectId = self.options.id + "_placeholder";
self.placeholderMenu = new Ox.Menu({ self.selectMenu = new Ox.Menu({
element: that, element: that,
id: self.placeholderId, id: self.selectId,
items: $.map(self.options.placeholder, function(title, position) { items: $.map(self.items, function(title, position) {
return { return {
checked: position == self.options.selected, checked: position == self.options.selected,
id: title.toLowerCase(), id: title.toLowerCase(),
group: self.placeholderId, // fixme: same id, works here, but should be different group: self.selectId, // fixme: same id, works here, but should be different
title: title title: title
}; };
}), }),
@ -1621,7 +1640,7 @@ requires
top: 0 top: 0
} }
}); });
that.bindEvent("change_" + self.placeholderId, changePlaceholder); that.bindEvent("change_" + self.selectId, change);
} }
that.$input = new Ox.Element( that.$input = new Ox.Element(
@ -1656,7 +1675,7 @@ requires
}); });
self.autocompleteId = self.options.id + "_menu"; // fixme: we do this in other places ... are we doing it the same way? var name? self.autocompleteId = self.options.id + "_menu"; // fixme: we do this in other places ... are we doing it the same way? var name?
self.autocompleteMenu = new Ox.Menu({ self.autocompleteMenu = new Ox.Menu({
element: that, element: that.$input,
id: self.autocompleteId, id: self.autocompleteId,
offset: { offset: {
left: 4, left: 4,
@ -1678,7 +1697,7 @@ requires
if (value === "") { if (value === "") {
// items = self.options.autocomplete[self.placeholder]; // items = self.options.autocomplete[self.placeholder];
} else { } else {
$.each(self.options.autocomplete[self.placeholder], function(i, item) { $.each(self.options.autocomplete[self.label || self.placeholder], function(i, item) {
if (item.toLowerCase().indexOf(value) > -1) { if (item.toLowerCase().indexOf(value) > -1) {
if (self.options.highlight) { if (self.options.highlight) {
item = item.replace( item = item.replace(
@ -1714,7 +1733,7 @@ requires
title: title title: title
}; };
}); });
self.placeholderMenu.hideMenu(); self.selectMenu.hideMenu();
self.autocompleteMenu.options({ self.autocompleteMenu.options({
items: items, items: items,
selected: selected selected: selected
@ -1733,19 +1752,21 @@ requires
//call(); //call();
} }
function change() { function change(event, data) {
if (self.options.label) {
} self.label = data.value; // fixme: could be "title" as well
that.$label.html(self.label);
function changePlaceholder(event, data) {
Ox.print("cP", event, data);
self.placeholder = data.value; // fixme: could be "title" as well
if (that.$input.is(".OxPlaceholder")) {
that.$input.val(self.placeholder);
//that.$input.focus();
} else {
that.$input.focus(); that.$input.focus();
call(); call();
} else {
self.placeholder = data.value; // fixme: could be "title" as well
if (that.$input.is(".OxPlaceholder")) {
that.$input.val(self.placeholder);
//that.$input.focus();
} else {
that.$input.focus();
call();
}
} }
} }
@ -1795,7 +1816,7 @@ requires
} }
function select() { function select() {
self.placeholderMenu.showMenu(); self.selectMenu.showMenu();
} }
function selection() { function selection() {
@ -1817,9 +1838,11 @@ requires
that.width = function(value) { that.width = function(value) {
that.$element.width(value); that.$element.width(value);
that.$input.width(value - 2 - self.options.labelWidth - that.$input.width(value - 2 -
(self.options.placeholder.length > 1) * 26 - (self.options.labelWidth ? self.options.labelWidth + 34 : 0) -
self.options.clear * 15); (self.options.placeholder.length > 1 ? 26 : 0) -
(self.options.clear ? 15 : 0));
// fixme: the values above are all weird guesswork
return that; return that;
} }

9
demos/test/index.html
View file

@ -63,6 +63,7 @@
extras: [ extras: [
new Ox.Input({ new Ox.Input({
autocomplete: { autocomplete: {
"Find: All": [],
"Find: Title": [ "Find: Title": [
"A bout de souffle", "A bout de souffle",
"Casino", "Casino",
@ -98,13 +99,15 @@
"Swizerland", "Swizerland",
"UK", "UK",
"USA" "USA"
] ],
"Find: Cinematographer": []
}, },
clear: true, clear: true,
highlight: false, highlight: false,
id: "find", id: "find",
placeholder: ["Find: Title", "Find: Director", "Find: Country"], label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"],
}).width(256) labelWidth: 96
}).width(320)
], ],
menus: [ menus: [
{ {