improve form elements
This commit is contained in:
rlx
parent
dfe12646e6
commit
14a6b6c148
5 changed files with 43 additions and 30 deletions
|
|
@ -530,10 +530,13 @@ Forms
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
input {
|
||||
border: 1px;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
border: 1px;
|
||||
//border: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
input[type=button],
|
||||
|
|
@ -606,8 +609,8 @@ input::-moz-focus-inner {
|
|||
border: none;
|
||||
}
|
||||
textarea {
|
||||
//padding: 2px 4px 2px 4px;
|
||||
padding: 0 4px 0 4px;
|
||||
padding: 2px 6px 2px 6px;
|
||||
//padding: 0 4px 0 4px;
|
||||
border-radius: 8px;
|
||||
resize: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@ Ox.Checkbox = function(options, self) {
|
|||
width: 'auto'
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxCheckbox' +
|
||||
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
|
||||
Ox.toTitleCase(self.options.overlap))
|
||||
.addClass('OxCheckbox'
|
||||
+ (self.options.overlap == 'none' ? '' : ' OxOverlap'
|
||||
+ Ox.toTitleCase(self.options.overlap))
|
||||
)
|
||||
.attr({
|
||||
disabled: self.options.disabled
|
||||
|
|
@ -50,8 +50,7 @@ Ox.Checkbox = function(options, self) {
|
|||
id: self.options.id + 'Label',
|
||||
overlap: 'left',
|
||||
title: self.options.title,
|
||||
width: self.options.width - 16
|
||||
- !!self.options.label * self.options.labelWidth
|
||||
width: getTitleWidth()
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.click(clickTitle)
|
||||
|
|
@ -100,6 +99,11 @@ Ox.Checkbox = function(options, self) {
|
|||
!self.options.disabled && self.$button.trigger('click');
|
||||
}
|
||||
|
||||
function getTitleWidth() {
|
||||
return self.options.width - 16
|
||||
- !!self.options.label * self.options.labelWidth;
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'checked') {
|
||||
that.toggleChecked();
|
||||
|
|
@ -109,6 +113,9 @@ Ox.Checkbox = function(options, self) {
|
|||
self.$title && self.$title.options({disabled: value});
|
||||
} else if (key == 'title') {
|
||||
self.$title.options({title: value});
|
||||
} else if (key == 'width') {
|
||||
that.css({width: value + 'px'});
|
||||
self.$title && self.$title.options({width: getTitleWidth()});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@ Ox.Input = function(options, self) {
|
|||
width: self.inputWidth + 'px',
|
||||
textAlign: self.options.textAlign
|
||||
}, self.options.type == 'textarea' ? {
|
||||
height: self.options.height + 'px',
|
||||
height: self.options.height - 6 + 'px',
|
||||
} : {})
|
||||
)
|
||||
.val(self.options.value)
|
||||
|
|
@ -232,7 +232,7 @@ Ox.Input = function(options, self) {
|
|||
.appendTo(that.$element);
|
||||
|
||||
if (self.options.type == 'textarea') {
|
||||
Ox.print('TEXTAREA', self.options.width, self.options.height, '...', that.css('width'), that.css('height'), '...', self.$input.css('width'), self.$input.css('height'))
|
||||
Ox.print('TEXTAREA', self.options.width, self.options.height, '...', that.css('width'), that.css('height'), '...', self.$input.css('width'), self.$input.css('height'), '...', self.$input.css('border'))
|
||||
}
|
||||
|
||||
// fixme: is there a better way than this one?
|
||||
|
|
@ -694,11 +694,11 @@ Ox.Input = function(options, self) {
|
|||
}
|
||||
|
||||
function getInputWidth() {
|
||||
return self.options.width -
|
||||
(self.options.arrows ? 32 : 0) -
|
||||
(self.options.clear ? 16 : 0) -
|
||||
(self.options.label ? self.options.labelWidth : 0) -
|
||||
(self.options.style == 'rounded' ? 14 : 6);
|
||||
return self.options.width
|
||||
- (self.options.arrows ? 32 : 0)
|
||||
- (self.options.clear ? 16 : 0)
|
||||
- (self.options.label ? self.options.labelWidth : 0)
|
||||
- (self.options.style == 'rounded' ? 14 : 6);
|
||||
}
|
||||
|
||||
function keydown(event) {
|
||||
|
|
|
|||
|
|
@ -295,8 +295,8 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
|
||||
function clear() {
|
||||
self.requests.forEach(function(v) {
|
||||
Ox.Request.cancel(v);
|
||||
self.requests.forEach(function(request) {
|
||||
Ox.Request.cancel(request);
|
||||
});
|
||||
Ox.extend(self, {
|
||||
$items: [],
|
||||
|
|
@ -1029,11 +1029,6 @@ Ox.List = function(options, self) {
|
|||
self.scrollTimeout = setTimeout(function() {
|
||||
self.scrollTimeout = 0;
|
||||
self.page = getPage();
|
||||
/*
|
||||
if (self.page != page) {
|
||||
Ox.print('page', page, '-->', self.page);
|
||||
}
|
||||
*/
|
||||
if (self.page == page - 1) {
|
||||
unloadPage(self.page + 2);
|
||||
loadPage(self.page - 1);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ Ox.TabPanel = function(options, self) {
|
|||
})
|
||||
.options(options || {});
|
||||
|
||||
self.selected = getSelected();
|
||||
|
||||
self.$bar = Ox.Bar({size: 24});
|
||||
|
||||
self.$tabs = Ox.ButtonGroup({
|
||||
|
|
@ -18,10 +20,10 @@ Ox.TabPanel = function(options, self) {
|
|||
})
|
||||
.bindEvent({
|
||||
change: function(event) {
|
||||
var id = event.selected[0];
|
||||
that.$element.replaceElement(1, self.options.content(id));
|
||||
self.selected = event.selected[0];
|
||||
that.$element.replaceElement(1, self.options.content(self.selected));
|
||||
that.triggerEvent('change', {
|
||||
selected: id
|
||||
selected: self.selected
|
||||
});
|
||||
}
|
||||
})
|
||||
|
|
@ -34,17 +36,23 @@ Ox.TabPanel = function(options, self) {
|
|||
size: 24
|
||||
},
|
||||
{
|
||||
element: self.options.content(
|
||||
self.options.tabs.filter(function(tab) {
|
||||
return tab.selected;
|
||||
})[0].id
|
||||
)
|
||||
element: self.options.content(self.selected)
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.addClass('OxTabPanel');
|
||||
|
||||
function getSelected() {
|
||||
return self.options.tabs.filter(function(tab) {
|
||||
return tab.selected;
|
||||
})[0].id;
|
||||
}
|
||||
|
||||
that.selected = function() {
|
||||
return self.selected;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue