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 {
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

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

@ -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;