r1006 - in branches: dev/grid/tests/visual dev/grid/themes/default dev/grid/ui experimental/ui
Author: paul.bakaus
Date: Tue Nov 25 03:28:14 2008
New Revision: 1006
Modified:
branches/dev/grid/tests/visual/grid.html
branches/dev/grid/themes/default/ui.all.css
branches/dev/grid/ui/ui.grid.js
branches/experimental/ui/ui.selectable.js
Log:
selectable (experimental): renamed selected/focussedClass to
select/focusClass
grid: themerollerized some of the grid (very experimental), auto scrolling
while selecting (i.e. through up/down using keyboard)
Modified: branches/dev/grid/tests/visual/grid.html
==============================================================================
--- branches/dev/grid/tests/visual/grid.html (original)
+++ branches/dev/grid/tests/visual/grid.html Tue Nov 25 03:28:14 2008
@@ -3,24 +3,25 @@
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>grid</title>
+ <link rel="stylesheet" href="../../themes/default/ui.all.css"
type="text/css" media="screen" title="no title" charset="utf-8">
+
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.grid.js"></script>
<script type="text/javascript" src="../../ui/ui.gridmodel.js"></script>
- <script type="text/javascript" src="../../ui/ui.selectable.js"></script>
- <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <script src="../../../../experimental/ui/ui.selectable.js"
type="text/javascript" charset="utf-8"></script>
+ <script src="../../ui/ui.resizable.js" type="text/javascript"
charset="utf-8"></script>
+
<style type="text/css" media="screen">
- #uiGridLogic {}
-
- .ui-grid {
- border: 5px solid black;
- font-family: Arial;
- font-size: 12px;
+ body, html {
+ font-size: 10px;
}
+ #uiGridLogic {}
+
.ui-grid-content {
overflow: auto;
height: 100%;
@@ -41,15 +42,6 @@
background: #fff;
}
- .ui-grid-inner {
-
- }
-
- .ui-grid-column-header {
- background: #eee;
- border-right: 1px solid #666;
- }
-
.ui-grid-column-header div {
padding: 3px;
overflow: hidden;
@@ -58,20 +50,10 @@
.ui-grid-column {
overflow: hidden;
- border-right: 1px solid #666;
}
.ui-grid-column div {
padding: 3px;
-
- }
-
- .ui-grid-row-hover td {
- background: #eee;
- }
-
- .ui-grid-row-selected td {
- background: #bbb;
}
@@ -83,7 +65,7 @@
$("#grid").grid({
url: "../data/employees-json.php",
- limit: 10,
+ limit: 20,
height: 200,
toolbar: false
});
Modified: branches/dev/grid/themes/default/ui.all.css
==============================================================================
--- branches/dev/grid/themes/default/ui.all.css (original)
+++ branches/dev/grid/themes/default/ui.all.css Tue Nov 25 03:28:14 2008
@@ -432,6 +432,22 @@
}
+
+.ui-grid-row-hover td {
+ border: 1px solid #d3d3d3;
+ background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0
50% repeat-x;
+ font-weight: normal;
+ color: #555555 !important;
+}
+
+.ui-grid-row-selected td {
+ border: 1px solid #999999;
+ background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0
50% repeat-x;
+ font-weight: normal;
+ color: #212121 !important;
+}
+
+
/*
Generic ThemeRoller Classes
>> Make your jQuery Components ThemeRoller-Compatible!
Modified: branches/dev/grid/ui/ui.grid.js
==============================================================================
--- branches/dev/grid/ui/ui.grid.js (original)
+++ branches/dev/grid/ui/ui.grid.js Tue Nov 25 03:28:14 2008
@@ -23,7 +23,7 @@
var self = this;
//Generate the grid element
- this.grid = $('<table class="ui-grid" cellpadding="0" cellspacing="0"
width="100%" height="100%"></table>')
+ this.grid = $('<table class="ui-grid ui-component ui-component-content"
cellpadding="0" cellspacing="0" width="100%" height="100%"></table>')
.css({ width: this.options.width })
.appendTo(this.element);
@@ -34,7 +34,6 @@
//Generate columns
this._generateColumns();
-
//Generate content element and table
this.content = $('<tr><td><div class="ui-grid-content"
style="width:'+this.options.width+'px;
height: '+this.options.height+'px;"><table cellpadding="0"
cellspacing="0"><tbody></tbody></table></div></td></tr>')
.appendTo(this.grid).find('tbody');
@@ -60,8 +59,6 @@
//Selection of rows
this._makeRowsSelectable();
-
-
},
_handleClick: function(event) {
@@ -81,7 +78,21 @@
filter: 'tr',
multiple: this.options.multipleSelection,
selectClass: 'ui-grid-row-selected',
- focusClass: 'ui-grid-row-focussed'
+ focusClass: 'ui-grid-row-focussed',
+ select: function(e, ui) {
+
+ var itemOffset = ui.currentFocus.offset();
+ var itemHeight = ui.currentFocus.height();
+ var listOffset = $(this).offset();
+ var listHeight = $(this).height();
+
+ if(itemOffset.top - listOffset.top + itemHeight > listHeight) {
+ this.scrollTop = ((itemOffset.top + this.scrollTop - listOffset.top +
itemHeight) - listHeight);
+ } else if(itemOffset.top < listOffset.top) {
+ this.scrollTop = itemOffset.top + this.scrollTop - listOffset.top;
+ };
+
+ }
});
},
@@ -132,7 +143,7 @@
this.columns = item;
for (var i=0; i < item.length; i++) {
- var column = $('<td
class="ui-grid-column-header"><div>'+item[i].label+'</div></td>')
+ var column = $('<td class="ui-grid-column-header
ui-default-state"><div>'+item[i].label+'</div></td>')
.data('grid-column-header', item[i])
.appendTo(this.columnsContainer);
};
@@ -141,7 +152,7 @@
_addRow: function(item) {
- var row = $('<tr class="ui-grid-row ui-grid-inner"></tr>')
+ var row = $('<tr class="ui-grid-row"></tr>')
.appendTo(this.content)
.hover(function() {
$(this).addClass('ui-grid-row-hover');
@@ -150,7 +161,8 @@
});
for (var i=0; i < this.columns.length; i++) {
- row.append('<td
class="ui-grid-column"><div>'+item[this.columns[i].id]+'</div></td>');
+ $('<td class="ui-grid-column
ui-active-state"><div>'+item[this.columns[i].id]+'</div></td>')
+ .appendTo(row);
};
}
Modified: branches/experimental/ui/ui.selectable.js
==============================================================================
--- branches/experimental/ui/ui.selectable.js (original)
+++ branches/experimental/ui/ui.selectable.js Tue Nov 25 03:28:14 2008
@@ -22,7 +22,7 @@
this.currentFocus = $($(this.options.filter, this.element)[0]);
//Disable text selection
- $.ui.disableSelection(this.element);
+ this.element.disableSelection();
this.element
.bind('mousedown', function(event) {
@@ -40,10 +40,10 @@
event.preventDefault();
})
.bind('focus.selectable', function() {
- self.currentFocus.addClass(self.options.focusedClass);
+ self.currentFocus.addClass(self.options.focusClass);
})
.bind('blur.selectable', function() {
- self.currentFocus.removeClass(self.options.focusedClass);
+ self.currentFocus.removeClass(self.options.focusClass);
})
.bind('keydown.selectable', function(event) {
@@ -71,7 +71,7 @@
for (var i = this._selection.length - 1; i >= 0; i--){
this._selection[i]
- .removeClass(this.options.selectedClass)
+ .removeClass(this.options.selectClass)
.data('ui-selected', false);
};
@@ -95,7 +95,7 @@
this._selection.push(item);
this.latestSelection = item;
item
- .addClass(this.options.selectedClass)
+ .addClass(this.options.selectClass)
.data('ui-selected', true);
},
@@ -105,7 +105,7 @@
for (var i=0; i < this._selection.length; i++) {
if (this._selection[i][0] == item[0]) {
this._selection[i]
- .removeClass(this.options.selectedClass)
+ .removeClass(this.options.selectClass)
.data('ui-selected', false);
this._selection.splice(i,1);
break;
@@ -186,8 +186,8 @@
this.previousFocus = this.currentFocus;
this.currentFocus = $(item);
- this.previousFocus.removeClass(this.options.focusedClass);
- this.currentFocus.addClass(this.options.focusedClass);
+ this.previousFocus.removeClass(this.options.focusClass);
+ this.currentFocus.addClass(this.options.focusClass);
//Set and update the selection
this._updateSelectionMouse(event);
@@ -207,8 +207,8 @@
this.previousFocus = this.currentFocus;
this.currentFocus = this.currentFocus[dir]();
- this.previousFocus.removeClass(this.options.focusedClass);
- this.currentFocus.addClass(this.options.focusedClass);
+ this.previousFocus.removeClass(this.options.focusClass);
+ this.currentFocus.addClass(this.options.focusClass);
//Set and update the selection
this._updateSelection(event, dir);
@@ -240,8 +240,8 @@
defaults: {
multiple: true,
filter: '> *',
- selectedClass: 'ui-selected',
- focusedClass: 'ui-focused'
+ selectClass: 'ui-selected',
+ focusClass: 'ui-focused'
}
});