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 {
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
-webkit-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: 0 0 8px rgba(0, 0, 0, 0.75);
}
.OxThemeClassic .OxDialog .OxBar {
background: -moz-linear-gradient(top, rgba(192, 192, 192, 0.96), rgba(160, 160, 160, 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: -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(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96)));
}
.OxThemeClassic .OxDialog .OxContent {

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

@ -288,7 +288,14 @@ div.OxInput {
div.OxInput.OxMedium {
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;
margin-top: -1px;
}
@ -375,6 +382,9 @@ Layers
overflow: hidden;
z-index: 10;
}
.OxLayer.OxFront {
z-index: 100;
}
.OxMainMenuLayer {
position: absolute;
width: 100%;

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

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

9
demos/test/index.html
View file

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