diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 4703ef6f..97ee4442 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -893,6 +893,7 @@ OxFileInput -------------------------------------------------------------------------------- */ .OxFileInput > .OxBar { + float: left; border-width: 1px; border-style: solid; border-radius: 8px; @@ -910,6 +911,9 @@ OxFileInput border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } +.OxFileInput > .OxLabel { + float: left; +} /* -------------------------------------------------------------------------------- OxForm diff --git a/source/Ox.UI/js/Form/FileInput.js b/source/Ox.UI/js/Form/FileInput.js index af320c30..a7e01681 100644 --- a/source/Ox.UI/js/Form/FileInput.js +++ b/source/Ox.UI/js/Form/FileInput.js @@ -20,6 +20,8 @@ Ox.FileInput = function(options, self) { var that = Ox.Element({}, self) .defaults({ disabled: false, + label: '', + labelWidth: 128, maxFiles: -1, maxLines: -1, maxSize: -1, @@ -40,10 +42,20 @@ Ox.FileInput = function(options, self) { self.multiple = self.options.maxFiles != 1; self.size = getSize(); + if (self.options.label) { + self.$label = Ox.Label({ + overlap: 'right', + textAlign: 'right', + title: self.options.label, + width: self.options.labelWidth + }) + .appendTo(that); + } + self.$bar = Ox.Bar({size: 14}) .css( Ox.extend({ - width: self.options.width - 2 + 'px' + width: getWidth() - 2 + 'px' }, self.multiple && self.options.value.length ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 @@ -54,8 +66,8 @@ Ox.FileInput = function(options, self) { self.$title = $('
') .css({ float: 'left', - width: self.options.width - 102 + 'px', - paddingLeft: '4px', + width: getWidth() - 104 + 'px', + paddingLeft: '6px', overflow: 'hidden', textOverflow: 'ellipsis' }) @@ -102,7 +114,7 @@ Ox.FileInput = function(options, self) { self.$files = $('
') .addClass('OxFiles') .css({ - width: self.options.width - 2 + 'px', + width: getWidth() - 2 + 'px', height: getHeight() }) .appendTo(that); @@ -112,7 +124,7 @@ Ox.FileInput = function(options, self) { { id: 'name', visible: true, - width: self.options.width - 94 + width: getWidth() - 94 }, { align: 'right', @@ -152,7 +164,7 @@ Ox.FileInput = function(options, self) { .css({ left: 0, top: 0, - width: self.options.width - 2 + 'px', + width: getWidth() - 2 + 'px', height: '64px' }) .bindEvent({ @@ -263,6 +275,12 @@ Ox.FileInput = function(options, self) { : self.options.value[0].name; } + function getWidth() { + return self.options.width - ( + self.options.label ? self.options.labelWidth : 0 + ); + } + function removeFiles(ids) { self.options.value = self.options.value.filter(function(v, i) { return ids.indexOf(i) == -1;