r3101 committed - dev selectables: added refresh demo, fixed some smaller issues
Revision: 3101
Author: paul.bakaus
Date: Fri Aug 21 06:20:46 2009
Log: dev selectables: added refresh demo, fixed some smaller issues
http://code.google.com/p/jquery-ui/source/detail?r=3101
Modified:
/branches/dev/selectable/demos/selectable/serialize.html
/branches/dev/selectable/ui/ui.selectable.js
=======================================
--- /branches/dev/selectable/demos/selectable/serialize.html Fri Aug 21
05:56:01 2009
+++ /branches/dev/selectable/demos/selectable/serialize.html Fri Aug 21
06:20:46 2009
@@ -21,6 +21,7 @@
</style>
<script type="text/javascript">
$(function() {
+
$("#selectable").selectable({
stop: function(e, ui) {
@@ -39,6 +40,17 @@
}
});
+
+ $('button.add').bind('click', function() {
+ $('#selectable').append('<li
class="ui-widget-content">Item '+($('#selectable li').length+1)+'</li>');
+ $('#selectable').selectable('refresh');
+ });
+
+ $('button.remove').bind('click', function() {
+ $('#selectable li:last').remove();
+ $('#selectable').selectable('refresh');
+ });
+
});
</script>
</head>
@@ -49,6 +61,11 @@
You've selected: <span id="select-result">none</span>.
+
+ <button class="add">Add item</button>
+ <button class="remove">Remove item</button>
+
+
<ol id="selectable" tabindex='1'>
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
=======================================
--- /branches/dev/selectable/ui/ui.selectable.js Fri Aug 21 05:56:01 2009
+++ /branches/dev/selectable/ui/ui.selectable.js Fri Aug 21 06:20:46 2009
@@ -83,22 +83,22 @@
return true;
if(event.keyCode == $.ui.keyCode.DOWN) {
- self.options.smart ? self.selectClosest('down', event) :
self.selectNext(event);
+ self.options.closest ? self.selectClosest('down', event) :
self.selectNext(event);
event.preventDefault();
}
if(event.keyCode == $.ui.keyCode.RIGHT) {
- self.options.smart ? self.selectClosest('right', event) :
self.selectNext(event);
+ self.options.closest ? self.selectClosest('right', event) :
self.selectNext(event);
event.preventDefault();
}
if(event.keyCode == $.ui.keyCode.UP) {
- self.options.smart ? self.selectClosest('up', event) :
self.selectPrevious(event);
+ self.options.closest ? self.selectClosest('up', event) :
self.selectPrevious(event);
event.preventDefault();
}
if(event.keyCode == $.ui.keyCode.LEFT) {
- self.options.smart ? self.selectClosest('left', event) :
self.selectPrevious(event);
+ self.options.closest ? self.selectClosest('left', event) :
self.selectPrevious(event);
event.preventDefault();
}
@@ -117,10 +117,9 @@
var current = [/(down|right)/.test(direction) ? 10000 : -10000, null],
overlap = 10000,
- selfOffset = this.currentFocus.data('selectable-item'),
- items = $(this.options.filter, this.element);
-
- items.not(this.currentFocus).filter(':visible').each(function() {
+ selfOffset = this.currentFocus.data('selectable-item');
+
+ this.items.not(this.currentFocus).filter(':visible').each(function() {
var $this = $(this),
offset = $this.data('selectable-item'),
@@ -169,8 +168,8 @@
//We need to find the index of the current, and the index of the new
one to call selectAdjacent
// - calling _select doesn't work, since it's only for mouse
interaction (no ctrl focus move!)
- var currentIndex = items.index(this.currentFocus[0]);
- var newIndex = items.index(current[1]);
+ var currentIndex = this.items.index(this.currentFocus[0]);
+ var newIndex = this.items.index(current[1]);
return this._selectAdjacent(event, newIndex - currentIndex);
@@ -576,7 +575,7 @@
appendTo: 'body',
multiple: true,
- smart: true,
+ closest: true,
filter: '> *',
keyboard: true,