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

add tooltips to textlist cells

Browse source
This commit is contained in:
rlx 2011-08-28 19:50:06 +00:00
parent 5d454f0a80
commit b55ade5687
4 changed files with 57 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -161,7 +161,8 @@ Ox.List = function(options, self) {
}); });
} }
self.pageLengthByRowLength = [ self.pageLengthByRowLength = [
0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60, 64, 68, 72, 76, 60 0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60,
66, 60, 65, 70, 60, 64, 68, 72, 76, 60
]; ];
} }
/* /*

35
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -213,9 +213,9 @@ Ox.TextList = function(options, self) {
//Ox.print('INIT????') //Ox.print('INIT????')
//that.triggerEvent('init', data); //that.triggerEvent('init', data);
}, },
select: function(data) { select: function() {
Ox.print('SELECT????') Ox.print('SELECT????')
self.options.selected = data.ids; self.options.selected = that.$body.options('selected');
} }
}) })
.appendTo(that); .appendTo(that);
@ -389,7 +389,12 @@ Ox.TextList = function(options, self) {
//Ox.print(data[v.id], '(--value--)') //Ox.print(data[v.id], '(--value--)')
var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data), var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data),
editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data), editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data),
$cell = $('<div>') $cell = Ox.Element({
tooltip: v.tooltip ? function() {
return self.options.selected.indexOf(data[self.unique]) > -1
? (Ox.isString(v.tooltip) ? v.tooltip : v.tooltip(data)) : '';
} : null
})
.addClass( .addClass(
'OxCell OxColumn' + Ox.toTitleCase(v.id) + 'OxCell OxColumn' + Ox.toTitleCase(v.id) +
(clickable ? ' OxClickable' : '') + (clickable ? ' OxClickable' : '') +
@ -400,14 +405,17 @@ Ox.TextList = function(options, self) {
borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px', borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px',
textAlign: v.align textAlign: v.align
}) })
.html(v.id in data ? formatValue(v.id, data[v.id]) : '') .html(v.id in data ? formatValue(v.id, data[v.id], data) : '')
.appendTo($item); .appendTo($item);
}); });
//Math.random() < 0.01 && Ox.print('item', data, $item); //Math.random() < 0.01 && Ox.print('item', data, $item);
return $item; return $item;
} }
function formatValue(key, value) { function formatValue(key, value, data) {
// fixme: this may be obscure...
// since the format of a value may depend on another value,
// we pass all data as a second parameter to the supplied format function
var format = self.format[key]; var format = self.format[key];
if (value === null) { if (value === null) {
value = ''; value = '';
@ -415,7 +423,7 @@ Ox.TextList = function(options, self) {
value = Ox.isObject(format) ? value = Ox.isObject(format) ?
Ox['format' + Ox.toTitleCase(format.type)] Ox['format' + Ox.toTitleCase(format.type)]
.apply(this, $.merge([value], format.args)) : .apply(this, $.merge([value], format.args)) :
format(value); format(value, data);
} else if (Ox.isArray(value)) { } else if (Ox.isArray(value)) {
value = value.join(', '); value = value.join(', ');
} }
@ -517,7 +525,7 @@ Ox.TextList = function(options, self) {
} }
function getCell(id, key) { function getCell(id, key) {
//Ox.print('getCell', id, key) Ox.print('getCell', id, key)
var $item = getItem(id); var $item = getItem(id);
key = key || ''; key = key || '';
return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]); return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]);
@ -643,7 +651,7 @@ Ox.TextList = function(options, self) {
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px' width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
}); });
} }
that.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({ that.$element.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px' width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px'
}); });
setWidth(); setWidth();
@ -848,17 +856,18 @@ Ox.TextList = function(options, self) {
that.value = function(id, key, value) { that.value = function(id, key, value) {
// fixme: make this accept id, {k: v, ...} // fixme: make this accept id, {k: v, ...}
//Ox.print('value', id, key, value) Ox.print('value', id, key, value)
var $item = getItem(id), var $cell,
$cell = getCell(id, key), $item = getItem(id);
column = self.options.columns[getColumnIndexById(key)]; //column = self.options.columns[getColumnIndexById(key)];
if (arguments.length == 1) { if (arguments.length == 1) {
return that.$body.value(id); return that.$body.value(id);
} else if (arguments.length == 2) { } else if (arguments.length == 2) {
return that.$body.value(id, key); return that.$body.value(id, key);
} else { } else {
that.$body.value(id, key, value); that.$body.value(id, key, value);
Ox.print('? ? ?', column, column.format) //Ox.print('? ? ?', column, column.format)
$cell = getCell(id, key);
$cell && $cell.html(formatValue(key, value)); $cell && $cell.html(formatValue(key, value));
if (key == self.options.sort[0].key) { if (key == self.options.sort[0].key) {
that.$body.sort(); that.$body.sort();

4
source/Ox.UI/js/Window/Ox.Tooltip.js
View file

@ -32,6 +32,7 @@ Ox.Tooltip = function(options, self) {
}; };
that.hide = function() { that.hide = function() {
if (self.options.title) {
if (self.options.animate) { if (self.options.animate) {
that.animate({ that.animate({
opacity: 0 opacity: 0
@ -41,6 +42,7 @@ Ox.Tooltip = function(options, self) {
} else { } else {
that.removeElement(); that.removeElement();
} }
}
return that; return that;
}; };
@ -48,6 +50,7 @@ Ox.Tooltip = function(options, self) {
// fixme: use this in widgets // fixme: use this in widgets
that.show = function(x, y) { that.show = function(x, y) {
var left, top, width, height; var left, top, width, height;
if (self.options.title) {
if (arguments.length == 1) { if (arguments.length == 1) {
y = arguments[0].clientY; y = arguments[0].clientY;
x = arguments[0].clientX; x = arguments[0].clientX;
@ -65,6 +68,7 @@ Ox.Tooltip = function(options, self) {
self.options.animate && that.animate({ self.options.animate && that.animate({
opacity: 1 opacity: 1
}, 250); }, 250);
}
return that; return that;
}; };

6
source/Ox.UI/themes/classic/svg/symbolClick.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="rotate(-25, 128, 128)">
<polygon points="128,0 208,176 128,144 48,176" fill="#404040"/>
<line x1="128" y1="128" x2="128" y2="256" stroke="#404040" stroke-width="48"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 282 B