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

improve form elements

Browse source
This commit is contained in:
rlx 2011-11-02 10:23:15 +00:00
parent dfe12646e6
commit 14a6b6c148
5 changed files with 43 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -530,10 +530,13 @@ Forms
================================================================================ ================================================================================
*/ */
input {
border: 1px;
}
input, input,
textarea { textarea {
padding: 0; padding: 0;
border: 1px; //border: 1px;
margin: 0; margin: 0;
} }
input[type=button], input[type=button],
@ -606,8 +609,8 @@ input::-moz-focus-inner {
border: none; border: none;
} }
textarea { textarea {
//padding: 2px 4px 2px 4px; padding: 2px 6px 2px 6px;
padding: 0 4px 0 4px; //padding: 0 4px 0 4px;
border-radius: 8px; border-radius: 8px;
resize: none; resize: none;
} }

17
source/Ox.UI/js/Form/Ox.Checkbox.js
View file

@ -33,9 +33,9 @@ Ox.Checkbox = function(options, self) {
width: 'auto' width: 'auto'
}) })
.options(options || {}) .options(options || {})
.addClass('OxCheckbox' + .addClass('OxCheckbox'
(self.options.overlap == 'none' ? '' : ' OxOverlap' + + (self.options.overlap == 'none' ? '' : ' OxOverlap'
Ox.toTitleCase(self.options.overlap)) + Ox.toTitleCase(self.options.overlap))
) )
.attr({ .attr({
disabled: self.options.disabled disabled: self.options.disabled
@ -50,8 +50,7 @@ Ox.Checkbox = function(options, self) {
id: self.options.id + 'Label', id: self.options.id + 'Label',
overlap: 'left', overlap: 'left',
title: self.options.title, title: self.options.title,
width: self.options.width - 16 width: getTitleWidth()
- !!self.options.label * self.options.labelWidth
}) })
.css({float: 'right'}) .css({float: 'right'})
.click(clickTitle) .click(clickTitle)
@ -100,6 +99,11 @@ Ox.Checkbox = function(options, self) {
!self.options.disabled && self.$button.trigger('click'); !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) { self.setOption = function(key, value) {
if (key == 'checked') { if (key == 'checked') {
that.toggleChecked(); that.toggleChecked();
@ -109,6 +113,9 @@ Ox.Checkbox = function(options, self) {
self.$title && self.$title.options({disabled: value}); self.$title && self.$title.options({disabled: value});
} else if (key == 'title') { } else if (key == 'title') {
self.$title.options({title: value}); self.$title.options({title: value});
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$title && self.$title.options({width: getTitleWidth()});
} }
}; };

14
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -222,7 +222,7 @@ Ox.Input = function(options, self) {
width: self.inputWidth + 'px', width: self.inputWidth + 'px',
textAlign: self.options.textAlign textAlign: self.options.textAlign
}, self.options.type == 'textarea' ? { }, self.options.type == 'textarea' ? {
height: self.options.height + 'px', height: self.options.height - 6 + 'px',
} : {}) } : {})
) )
.val(self.options.value) .val(self.options.value)
@ -232,7 +232,7 @@ Ox.Input = function(options, self) {
.appendTo(that.$element); .appendTo(that.$element);
if (self.options.type == 'textarea') { 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? // fixme: is there a better way than this one?
@ -694,11 +694,11 @@ Ox.Input = function(options, self) {
} }
function getInputWidth() { function getInputWidth() {
return self.options.width - return self.options.width
(self.options.arrows ? 32 : 0) - - (self.options.arrows ? 32 : 0)
(self.options.clear ? 16 : 0) - - (self.options.clear ? 16 : 0)
(self.options.label ? self.options.labelWidth : 0) - - (self.options.label ? self.options.labelWidth : 0)
(self.options.style == 'rounded' ? 14 : 6); - (self.options.style == 'rounded' ? 14 : 6);
} }
function keydown(event) { function keydown(event) {

9
source/Ox.UI/js/List/Ox.List.js
View file

@ -295,8 +295,8 @@ Ox.List = function(options, self) {
} }
function clear() { function clear() {
self.requests.forEach(function(v) { self.requests.forEach(function(request) {
Ox.Request.cancel(v); Ox.Request.cancel(request);
}); });
Ox.extend(self, { Ox.extend(self, {
$items: [], $items: [],
@ -1029,11 +1029,6 @@ Ox.List = function(options, self) {
self.scrollTimeout = setTimeout(function() { self.scrollTimeout = setTimeout(function() {
self.scrollTimeout = 0; self.scrollTimeout = 0;
self.page = getPage(); self.page = getPage();
/*
if (self.page != page) {
Ox.print('page', page, '-->', self.page);
}
*/
if (self.page == page - 1) { if (self.page == page - 1) {
unloadPage(self.page + 2); unloadPage(self.page + 2);
loadPage(self.page - 1); loadPage(self.page - 1);

24
source/Ox.UI/js/Panel/Ox.TabPanel.js
View file

@ -9,6 +9,8 @@ Ox.TabPanel = function(options, self) {
}) })
.options(options || {}); .options(options || {});
self.selected = getSelected();
self.$bar = Ox.Bar({size: 24}); self.$bar = Ox.Bar({size: 24});
self.$tabs = Ox.ButtonGroup({ self.$tabs = Ox.ButtonGroup({
@ -18,10 +20,10 @@ Ox.TabPanel = function(options, self) {
}) })
.bindEvent({ .bindEvent({
change: function(event) { change: function(event) {
var id = event.selected[0]; self.selected = event.selected[0];
that.$element.replaceElement(1, self.options.content(id)); that.$element.replaceElement(1, self.options.content(self.selected));
that.triggerEvent('change', { that.triggerEvent('change', {
selected: id selected: self.selected
}); });
} }
}) })
@ -34,17 +36,23 @@ Ox.TabPanel = function(options, self) {
size: 24 size: 24
}, },
{ {
element: self.options.content( element: self.options.content(self.selected)
self.options.tabs.filter(function(tab) {
return tab.selected;
})[0].id
)
} }
], ],
orientation: 'vertical' orientation: 'vertical'
}) })
.addClass('OxTabPanel'); .addClass('OxTabPanel');
function getSelected() {
return self.options.tabs.filter(function(tab) {
return tab.selected;
})[0].id;
}
that.selected = function() {
return self.selected;
};
return that; return that;
}; };