FileInput: add label option, update CSS
This commit is contained in:
parent
22a229b3a8
commit
77be06d73d
2 changed files with 28 additions and 6 deletions
|
@ -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
|
||||
|
|
|
@ -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 = $('<div>')
|
||||
.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 = $('<div>')
|
||||
.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;
|
||||
|
|
Loading…
Reference in a new issue