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

FileInput: add label option, update CSS

Browse source
This commit is contained in:
rlx 2014-09-17 15:56:59 +02:00
parent 22a229b3a8
commit 77be06d73d
2 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
source/Ox.UI/css/Ox.UI.css
View file

@ -893,6 +893,7 @@ OxFileInput
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
*/ */
.OxFileInput > .OxBar { .OxFileInput > .OxBar {
float: left;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 8px; border-radius: 8px;
@ -910,6 +911,9 @@ OxFileInput
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
.OxFileInput > .OxLabel {
float: left;
}
/* /*
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
OxForm OxForm

30
source/Ox.UI/js/Form/FileInput.js
View file

@ -20,6 +20,8 @@ Ox.FileInput = function(options, self) {
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
disabled: false, disabled: false,
label: '',
labelWidth: 128,
maxFiles: -1, maxFiles: -1,
maxLines: -1, maxLines: -1,
maxSize: -1, maxSize: -1,
@ -40,10 +42,20 @@ Ox.FileInput = function(options, self) {
self.multiple = self.options.maxFiles != 1; self.multiple = self.options.maxFiles != 1;
self.size = getSize(); 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}) self.$bar = Ox.Bar({size: 14})
.css( .css(
Ox.extend({ Ox.extend({
width: self.options.width - 2 + 'px' width: getWidth() - 2 + 'px'
}, self.multiple && self.options.value.length ? { }, self.multiple && self.options.value.length ? {
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
borderBottomRightRadius: 0 borderBottomRightRadius: 0
@ -54,8 +66,8 @@ Ox.FileInput = function(options, self) {
self.$title = $('<div>') self.$title = $('<div>')
.css({ .css({
float: 'left', float: 'left',
width: self.options.width - 102 + 'px', width: getWidth() - 104 + 'px',
paddingLeft: '4px', paddingLeft: '6px',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis' textOverflow: 'ellipsis'
}) })
@ -102,7 +114,7 @@ Ox.FileInput = function(options, self) {
self.$files = $('<div>') self.$files = $('<div>')
.addClass('OxFiles') .addClass('OxFiles')
.css({ .css({
width: self.options.width - 2 + 'px', width: getWidth() - 2 + 'px',
height: getHeight() height: getHeight()
}) })
.appendTo(that); .appendTo(that);
@ -112,7 +124,7 @@ Ox.FileInput = function(options, self) {
{ {
id: 'name', id: 'name',
visible: true, visible: true,
width: self.options.width - 94 width: getWidth() - 94
}, },
{ {
align: 'right', align: 'right',
@ -152,7 +164,7 @@ Ox.FileInput = function(options, self) {
.css({ .css({
left: 0, left: 0,
top: 0, top: 0,
width: self.options.width - 2 + 'px', width: getWidth() - 2 + 'px',
height: '64px' height: '64px'
}) })
.bindEvent({ .bindEvent({
@ -263,6 +275,12 @@ Ox.FileInput = function(options, self) {
: self.options.value[0].name; : self.options.value[0].name;
} }
function getWidth() {
return self.options.width - (
self.options.label ? self.options.labelWidth : 0
);
}
function removeFiles(ids) { function removeFiles(ids) {
self.options.value = self.options.value.filter(function(v, i) { self.options.value = self.options.value.filter(function(v, i) {
return ids.indexOf(i) == -1; return ids.indexOf(i) == -1;