adding List object
This commit is contained in:
Rolux
parent
b5cf89ce73
commit
bd08670324
5 changed files with 730 additions and 1 deletions
|
|
@ -424,6 +424,7 @@ OxSelect
|
|||
Layers
|
||||
================================================================================
|
||||
*/
|
||||
|
||||
.OxLayer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -444,6 +445,138 @@ Layers
|
|||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
Lists
|
||||
================================================================================
|
||||
*/
|
||||
|
||||
.OxListPage {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.OxTextList .OxCell {
|
||||
float: left;
|
||||
height: 12px;
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
.OxTextList .OxBar {
|
||||
z-index: 10;
|
||||
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
.OxTextList .OxBar .OxHead {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 12px;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.OxTextList .OxBar .OxCell {
|
||||
float: left;
|
||||
padding: 2px 4px 2px 4px;
|
||||
height: 12px;
|
||||
}
|
||||
.OxTextList .OxBar .OxCell:nthChild(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.OxTextList .OxBar .OxTitle {
|
||||
float: left;
|
||||
height: 15px;
|
||||
padding: 1px 2px 0 2px;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.OxTextList .OxBar .OxTitle:first-child {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.OxTextList .OxBar .OxOrder {
|
||||
float: left;
|
||||
width: 10px;
|
||||
height: 13px;
|
||||
padding: 3px 0 0 6px;
|
||||
font-size: 7px;
|
||||
display: none;
|
||||
}
|
||||
.OxTextList .OxBar .OxOrder.OxSelected {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize {
|
||||
float: left;
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize .OxLeft,
|
||||
.OxTextList .OxBar .OxResize .OxCenter,
|
||||
.OxTextList .OxBar .OxResize .OxRight {
|
||||
float: left;
|
||||
height: 16px;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize .OxLeft,
|
||||
.OxTextList .OxBar .OxResize .OxRight {
|
||||
width: 2px;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize .OxCenter {
|
||||
width: 1px;
|
||||
}
|
||||
.OxTextList .OxBar .OxResize .OxCenter {
|
||||
float: left;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: rgb(24, 24, 24);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.OxTextList .OxBar .OxSelect {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 11px;
|
||||
height: 16px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.OxTextList .OxBody {
|
||||
float: left;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 16px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.OxTextList .OxBody .OxContent {
|
||||
width: 100%;
|
||||
}
|
||||
.OxTextList .OxBody .OxItem {
|
||||
height: 16px;
|
||||
}
|
||||
.OxTextList .OxBody .OxItem .OxCell {
|
||||
float: left;
|
||||
height: 14px;
|
||||
padding: 2px 4px 0 4px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.OxTextList .OxBody .OxItem .OxSpace {
|
||||
float: left;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
}
|
||||
.OxTextList .OxBody .OxItem .OxLine {
|
||||
float: left;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
Menus
|
||||
|
|
|
|||
|
|
@ -98,6 +98,58 @@ Forms
|
|||
color: rgb(96, 96, 96)
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
Lists
|
||||
================================================================================
|
||||
*/
|
||||
|
||||
.OxThemeModern .OxTextList .OxItem .OxCell {
|
||||
border-right: 1px solid rgb(32, 32, 32);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxItem:nth-child(odd) {
|
||||
background: rgb(14, 14, 14);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxItem:nth-child(even) {
|
||||
background: rgb(18, 18, 18);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxItem.OxSelected:nth-child(odd) {
|
||||
background: rgb(30, 30, 30);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxItem.OxSelected:nth-child(even) {
|
||||
background: rgb(34, 34, 34);
|
||||
}
|
||||
.OxThemeModern .OxTextList.OxFocus .OxItem.OxSelected:nth-child(odd) {
|
||||
background: rgb(62, 62, 62);
|
||||
}
|
||||
.OxThemeModern .OxTextList.OxFocus .OxItem.OxSelected:nth-child(even) {
|
||||
background: rgb(66, 66, 66);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBar .OxSelected {
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48)));
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBar .OxOrder {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBar .OxResize .OxCenter {
|
||||
background: rgb(24, 24, 24);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBody .OxItem .OxCell {
|
||||
border-right: 1px solid rgb(24, 24, 24);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxItem.OxSelected .OxCell {
|
||||
border-right: 1px solid rgb(40, 40, 40);
|
||||
}
|
||||
.OxThemeModern .OxTextList.OxFocus .OxItem.OxSelected .OxCell {
|
||||
border-right: 1px solid rgb(72, 72, 72);
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .OxTextList .OxBody .OxItem .OxLine {
|
||||
background: rgb(24, 24, 24);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
Menus
|
||||
|
|
|
|||
|
|
@ -686,6 +686,7 @@ requires
|
|||
data: data,
|
||||
time: Ox.getTime()
|
||||
};
|
||||
//Ox.print("callback", callback, "options.callback", options.callback, "data", data)
|
||||
callback(data);
|
||||
}
|
||||
|
||||
|
|
@ -2382,7 +2383,243 @@ requires
|
|||
Ox.List = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Container({}, self);
|
||||
that = new Ox.Container({}, self)
|
||||
.defaults({
|
||||
itemHeight: 16,
|
||||
itemWidth: 16,
|
||||
orientation: "vertical",
|
||||
request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
|
||||
rowLength: 1,
|
||||
sort: [],
|
||||
type: "text"
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
Ox.print("self1", self)
|
||||
$.extend(self, {
|
||||
$items: [],
|
||||
$pages: [],
|
||||
page: 0,
|
||||
pageLength: 100,
|
||||
pages: 0,
|
||||
selected: []
|
||||
});
|
||||
Ox.print("self2", self)
|
||||
$.extend(self, {
|
||||
pageWidth: self.options.orientation == "horizontal" ?
|
||||
self.pageLength * self.options.itemWidth : 0,
|
||||
pageHeight: self.options.orientation == "horizontal" ? 0 :
|
||||
self.pageLength * self.options.itemHeight / self.options.rowLength
|
||||
});
|
||||
|
||||
function addAllToSelection(pos) {
|
||||
var arr,
|
||||
len = self.$items.length;
|
||||
if (!isSelected(pos)) {
|
||||
if (selected.length == 0) {
|
||||
addToSelection(pos);
|
||||
} else {
|
||||
if (Ox.min(selected) < pos) {
|
||||
var arr = [pos];
|
||||
for (var i = pos - 1; i >= 0; i--) {
|
||||
if (isSelected(i)) {
|
||||
$.each(arr, function(i, v) {
|
||||
addToSelection(v);
|
||||
});
|
||||
break;
|
||||
}
|
||||
arr.push(i);
|
||||
}
|
||||
}
|
||||
if (Ox.max(selected) > pos) {
|
||||
var arr = [pos];
|
||||
for (var i = pos + 1; i < len; i++) {
|
||||
if (isSelected(i)) {
|
||||
$.each(arr, function(i, v) {
|
||||
addToSelection(v);
|
||||
});
|
||||
break;
|
||||
}
|
||||
arr.push(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addToSelection(pos) {
|
||||
if (!isSelected(pos)) {
|
||||
selected.push(pos);
|
||||
if (!Ox.isUndefined(self.$items[pos])) {
|
||||
self.$items[pos].addClass("OxSelected");
|
||||
}
|
||||
Ox.Event.trigger("select_" + self.options.id, {
|
||||
items: selected.length
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function deselect(pos) {
|
||||
if (isSelected(pos)) {
|
||||
selected.splice(selected.indexOf(pos), 1);
|
||||
if (!Ox.isUndefined(self.$items[pos])) {
|
||||
self.$items[pos].removeClass("OxSelected");
|
||||
}
|
||||
Ox.Event.trigger("select_" + self.options.id, {
|
||||
items: selected.length
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getNext() {
|
||||
var pos = -1;
|
||||
if (selected.length) {
|
||||
var pos = Ox.max(selected) + 1;
|
||||
if (pos == self.$items.length) {
|
||||
pos = -1;
|
||||
}
|
||||
}
|
||||
return pos;
|
||||
}
|
||||
|
||||
function getPage() {
|
||||
return self.options.orientation == "vertical"
|
||||
? Math.floor(that.scrollTop() / pageHeight)
|
||||
: Math.floor(that.scrollLeft() / pageWidth);
|
||||
}
|
||||
|
||||
function getPrevious() {
|
||||
var pos = -1;
|
||||
if (selected.length) {
|
||||
var pos = Ox.min(selected) - 1;
|
||||
}
|
||||
return pos;
|
||||
}
|
||||
|
||||
function invertSelection() {
|
||||
$.each(self.options.items, function(i, v) {
|
||||
toggleSelection(i);
|
||||
});
|
||||
}
|
||||
|
||||
function isSelected(pos) {
|
||||
return selected.indexOf(pos) > -1;
|
||||
}
|
||||
|
||||
function loadPage(page, callback) {
|
||||
if (page < 0 || page >= pages) {
|
||||
return;
|
||||
}
|
||||
var offset = page * self.pageLength,
|
||||
range = [offset, offset + (page < self.pages - 1 ?
|
||||
self.pageLength : self.listLength % self.pageLength)];
|
||||
if (Ox.isUndefined(self.$pages[page])) {
|
||||
Ox.Request.send({
|
||||
callback: function(data) {
|
||||
self.$pages[page] = new Ox.ListPage();
|
||||
if (self.options.type == "text") {
|
||||
self.$pages[page].css({
|
||||
top: (page * self.pageHeight) + "px"
|
||||
});
|
||||
} else {
|
||||
self.$pages[page].css({
|
||||
|
||||
});
|
||||
}
|
||||
$.each(data, function(i, v) {
|
||||
var pos = offset + i;
|
||||
self.$items[pos] = new Ox.ListItem(v);
|
||||
if (isSelected(pos)) {
|
||||
self.$items[pos].addClass("OxSelected");
|
||||
}
|
||||
self.$items[pos].appendTo(self.$pages[page])
|
||||
});
|
||||
},
|
||||
range: range,
|
||||
sort: self.options.sort
|
||||
});
|
||||
}
|
||||
self.$pages[page].appendTo(that.$content);
|
||||
}
|
||||
|
||||
function loadPages(page, callback) {
|
||||
var counter = 0,
|
||||
fn = function() {
|
||||
counter++;
|
||||
counter == 2 && !Ox.isUndefined(callback) && callback();
|
||||
};
|
||||
loadPage(page, function() {
|
||||
loadPage(page - 1, fn);
|
||||
loadPage(page + 1, fn);
|
||||
});
|
||||
}
|
||||
|
||||
function select(pos) {
|
||||
if (!isSelected(pos) || selected.length > 1) {
|
||||
selectNone();
|
||||
addToSelection(pos);
|
||||
}
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
$.each(self.$items, function(i, v) {
|
||||
addToSelection(i);
|
||||
});
|
||||
}
|
||||
|
||||
function selectNext() {
|
||||
var pos = getNext();
|
||||
if (pos > -1) {
|
||||
select(pos);
|
||||
scrollTo(pos);
|
||||
}
|
||||
}
|
||||
|
||||
function selectNone() {
|
||||
$.each(self.$items, function(i, v) {
|
||||
deselect(i);
|
||||
});
|
||||
}
|
||||
|
||||
function selectPrevious() {
|
||||
var pos = getPrevious();
|
||||
if (pos > -1) {
|
||||
select(pos);
|
||||
scrollTo(pos);
|
||||
}
|
||||
}
|
||||
|
||||
function selectQuery(str) {
|
||||
$.each(self.$items, function(i, v) {
|
||||
if (Ox.toLatin(v.title).toUpperCase().indexOf(str) == 0) {
|
||||
select(i);
|
||||
scrollTo(i);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function scrollTo(pos) {
|
||||
|
||||
}
|
||||
|
||||
function toggleSelection(pos) {
|
||||
if (!isSelected(pos)) {
|
||||
addToSelection(pos);
|
||||
} else {
|
||||
deselect(pos);
|
||||
}
|
||||
}
|
||||
|
||||
function unloadPage(page) {
|
||||
!Ox.isUndefined(self.$pages[page]) && self.$pages[page].remove();
|
||||
}
|
||||
|
||||
function unloadPages(page) {
|
||||
unloadPage(page);
|
||||
unloadPage(page - 1);
|
||||
unloadPage(page + 1)
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
|
|
@ -2392,6 +2629,250 @@ requires
|
|||
|
||||
};
|
||||
|
||||
Ox.ListPage = function(options, self) {
|
||||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
.addClass("OxListPage");
|
||||
return that;
|
||||
};
|
||||
|
||||
Ox.TextList = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
.defaults({
|
||||
columns: [],
|
||||
request: function() {}, // {sort, range, keys, callback}
|
||||
sort: {}
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass("OxTextList");
|
||||
|
||||
$.extend(self, {
|
||||
columnWidths: [],
|
||||
itemHeight: 16,
|
||||
page: 0,
|
||||
pageLength: 100,
|
||||
scrollLeft: 0,
|
||||
selectedColumn: getColumnById(self.options.sort.key)
|
||||
});
|
||||
$.extend(self, {
|
||||
pageHeight: self.pageLength * self.itemHeight
|
||||
});
|
||||
Ox.print("self", self);
|
||||
|
||||
// Head
|
||||
|
||||
that.$bar = new Ox.Bar({
|
||||
orientation: "horizontal",
|
||||
size: 16
|
||||
}).appendTo(that);
|
||||
that.$head = new Ox.Container()
|
||||
.addClass("OxHead")
|
||||
.appendTo(that.$bar);
|
||||
that.$head.$content.addClass("OxTitles");
|
||||
that.$titles = [];
|
||||
$.each(self.options.columns, function(i, v) {
|
||||
var $order, $resize, $left, $center, $right;
|
||||
self.columnWidths[i] = v.width;
|
||||
that.$titles[i] = $("<div>")
|
||||
.addClass("OxTitle")
|
||||
.css({
|
||||
width: (v.width - 9) + "px",
|
||||
textAlign: v.align
|
||||
})
|
||||
.html(v.title)
|
||||
.click(function() {
|
||||
if (self.options.sort.key != v.id) {
|
||||
that.sort(v.id, v.operator);
|
||||
} else {
|
||||
that.order(self.options.operator == "+" ? "-" : "+");
|
||||
}
|
||||
})
|
||||
.appendTo(that.$head.$content.$element);
|
||||
$order = $("<div>")
|
||||
.addClass("OxOrder")
|
||||
.html(oxui.symbols["triangle_" + (
|
||||
self.options.sort.operator == "+" ? "up" : "down"
|
||||
)])
|
||||
.click(function() {
|
||||
$(this).prev().trigger("click")
|
||||
})
|
||||
.appendTo(that.$head.$content.$element);
|
||||
$resize = $("<div>")
|
||||
.addClass("OxResize")
|
||||
.mousedown(function(e) {
|
||||
var initialWidth = self.columnWidths[i],
|
||||
initialX = e.clientX;
|
||||
$window.mousemove(function(e) {
|
||||
var x = e.clientX,
|
||||
width = Ox.limit(initialWidth - initialX + x, 40, 512);
|
||||
resizeColumn(i, width);
|
||||
});
|
||||
$window.mouseup(function() {
|
||||
$window.unbind("mousemove");
|
||||
$window.unbind("mouseup");
|
||||
});
|
||||
})
|
||||
.dblclick(function() {
|
||||
resizeColumn(i, v.width);
|
||||
})
|
||||
.appendTo(that.$head.$content.$element);
|
||||
$left = $("<div>").addClass("OxLeft").appendTo($resize);
|
||||
$center = $("<div>").addClass("OxCenter").appendTo($resize);
|
||||
$right = $("<div>").addClass("OxRight").appendTo($resize);
|
||||
});
|
||||
that.$head.$content.css({
|
||||
width: Ox.sum(self.columnWidths) + "px"
|
||||
});
|
||||
toggleSelected(self.selectedColumn);
|
||||
that.$titles[self.selectedColumn].css({
|
||||
width: (self.options.columns[self.selectedColumn].width - 25) + "px"
|
||||
});
|
||||
that.$select = $("<div>")
|
||||
.addClass("OxSelect")
|
||||
.html(oxui.symbols.select)
|
||||
.appendTo(that.$bar.$element);
|
||||
|
||||
// Body
|
||||
|
||||
self.options.request({
|
||||
callback: function(result) {
|
||||
Ox.print("result", result);
|
||||
$.extend(self, {
|
||||
listHeight: result.data.items * self.itemHeight,
|
||||
listLength: result.data.items,
|
||||
pages: Math.ceil(result.data.items / self.pageLength)
|
||||
});
|
||||
Ox.print("self", self);
|
||||
that.$body = new Ox.List({
|
||||
itemHeight: 16,
|
||||
itemWidth: Ox.sum(self.columnWidths),
|
||||
orientation: "vertical",
|
||||
request: self.options.request,
|
||||
sort: self.options.sort,
|
||||
type: "text"
|
||||
}, self)
|
||||
.addClass("OxBody")
|
||||
.scroll(function() {
|
||||
var scrollLeft = $(this).scrollLeft();
|
||||
if (scrollLeft != self.scrollLeft) {
|
||||
self.scrollLeft = scrollLeft;
|
||||
that.$head.scrollLeft(scrollLeft);
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
Ox.print("that.$body", that.$body)
|
||||
that.$body.$content.css({
|
||||
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px",
|
||||
height: self.listHeight + "px"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function constructItem(item, pos) {
|
||||
var item = $("<div>")
|
||||
.addClass("OxListItem")
|
||||
.css({
|
||||
width: Ox.sum(columnWidths) + "px"
|
||||
})
|
||||
.data("pos", pos)
|
||||
.click(function() {});
|
||||
$.each(self.options.columns, function(i, v) {
|
||||
var $cell = $("<div>")
|
||||
.addClass("OxCell OxColumn" + Ox.toTitleCase(v.id))
|
||||
.css({
|
||||
width: (columnWidths[i] - 9) + "px",
|
||||
textAlign: v.align
|
||||
})
|
||||
.html(item[v.id])
|
||||
.appendTo($item)
|
||||
});
|
||||
return $item;
|
||||
}
|
||||
|
||||
function getColumnById(id) {
|
||||
var pos = -1;
|
||||
$.each(self.options.columns, function(i, v) {
|
||||
if (v.id == id) {
|
||||
pos = i;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return pos;
|
||||
}
|
||||
|
||||
function resizeColumn(pos, width) {
|
||||
self.columnWidths[pos] = width;
|
||||
that.$head.$content.css({
|
||||
width: (Ox.sum(self.columnWidths) + 2) + "px"
|
||||
});
|
||||
that.$titles[pos].css({
|
||||
width: (width - 9 - (pos == self.selectedColumn ? 16 : 0)) + "px"
|
||||
});
|
||||
that.$body.$content.find(".OxItem").css({ // fixme: can we avoid this lookup?
|
||||
width: Ox.sum(self.columnWidths) + "px"
|
||||
});
|
||||
that.$body.$content.css({
|
||||
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px" // fixme: check if scrollbar visible, and listen to resize/toggle event
|
||||
});
|
||||
$(".OxColumn" + Ox.toTitleCase(args.columns[pos].id)).css({
|
||||
width: (width - 9) + "px"
|
||||
});
|
||||
that.$body.clearCache();
|
||||
}
|
||||
|
||||
function selectColumn(pos) {
|
||||
that.sort(args.columns[pos].id, args.columns[pos].operator);
|
||||
}
|
||||
|
||||
function toggleOrder(pos) {
|
||||
self.options.columns[pos].operator = self.options.columns[pos].operator == "+" ? "-" : "+";
|
||||
that.$titles[pos].next().html(oxui.symbols[
|
||||
"triangle" + self.options.columns[pos].operator == "+" ? "up" : "down"
|
||||
]);
|
||||
}
|
||||
|
||||
function toggleSelected(pos) {
|
||||
if (pos > 0) {
|
||||
that.$titles[pos].prev().children().eq(2).toggleClass("OxSelected");
|
||||
}
|
||||
that.$titles[pos].toggleClass("OxSelected");
|
||||
that.$titles[pos].next().toggleClass("OxSelected");
|
||||
that.$titles[pos].next().next().children().eq(0).toggleClass("OxSelected");
|
||||
that.$titles[pos].css({
|
||||
width: (
|
||||
that.$titles[pos].width() + pos == self.selectedColumn ? -16 : 16
|
||||
) + "px"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
that.order = function(operator) {
|
||||
if (operator != self.options.sort.operator) {
|
||||
self.options.sort.operator = operator;
|
||||
toggleOrder(self.selectedColumn);
|
||||
that.$body.order(operator);
|
||||
}
|
||||
};
|
||||
|
||||
that.sort = function(key, operator) {
|
||||
if (key != self.options.sort.key || operator != self.options.sort.operator) {
|
||||
self.options.sort = {
|
||||
key: key,
|
||||
operator: operator
|
||||
};
|
||||
toggleSelected(self.selectedColumn);
|
||||
selectedColumn = getColumnById(key);
|
||||
toggleSelected(self.selectedColumn);
|
||||
that.$body.sort(self.options.sort.key, self.options.sort.operator);
|
||||
}
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
============================================================================
|
||||
Menus
|
||||
|
|
|
|||
13
demos/test/list.html
Normal file
13
demos/test/list.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
||||
<script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
||||
<script type="text/javascript" src="list.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
50
demos/test/list.js
Normal file
50
demos/test/list.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
$(function() {
|
||||
Ox.theme("modern");
|
||||
var $body = $("body"),
|
||||
app = new Ox.App({
|
||||
requestURL: "http://blackbook.local:8000/api/"
|
||||
}),
|
||||
$list = new Ox.TextList({
|
||||
columns: [
|
||||
{
|
||||
align: "left",
|
||||
id: "title",
|
||||
operator: "+",
|
||||
title: "Title",
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
align: "left",
|
||||
id: "director",
|
||||
operator: "+",
|
||||
title: "Director",
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
align: "right",
|
||||
id: "year",
|
||||
operator: "-",
|
||||
title: "Year",
|
||||
width: 80
|
||||
}
|
||||
],
|
||||
request: function(options) {
|
||||
app.request("find", $.extend(options, {
|
||||
query: {
|
||||
conditions: [
|
||||
{
|
||||
key: "country",
|
||||
value: "france",
|
||||
operator: ""
|
||||
}
|
||||
],
|
||||
operator: ""
|
||||
}
|
||||
}), options.callback);
|
||||
},
|
||||
sort: {
|
||||
key: "year",
|
||||
operator: "-"
|
||||
}
|
||||
}).appendTo($body);
|
||||
});
|
||||
Loading…
Reference in a new issue