From 234f1abcd09ccb6d091963ceda284819b893d404 Mon Sep 17 00:00:00 2001 From: Rolux Date: Sat, 20 Feb 2010 13:16:31 +0530 Subject: [PATCH] adding label to input element --- build/css/ox.ui.classic.css | 8 ++-- build/css/ox.ui.css | 12 ++++- build/js/ox.ui.js | 89 +++++++++++++++++++++++-------------- demos/test/index.html | 9 ++-- 4 files changed, 77 insertions(+), 41 deletions(-) diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index a8f5918..ec83c97 100644 --- a/build/css/ox.ui.classic.css +++ b/build/css/ox.ui.classic.css @@ -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 { diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 6514b90..6ef3f68 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -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%; diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 61809b5..61c3fb0 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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.enable = function() { + that.$layer.removeClass("OxFront"); + } + that.open = function() { - if (!that.$layer.length) { - that.$layer = new Ox.Element() - .addClass("OxLayer") - .appendTo($body); - } + 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,19 +1752,21 @@ requires //call(); } - function change() { - - } - - 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 { + 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); + //that.$input.focus(); + } else { + that.$input.focus(); + call(); + } } } @@ -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; } diff --git a/demos/test/index.html b/demos/test/index.html index 58742f4..dfa8229 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -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: [ {