r3202 committed - inlineEdit: fixed bug demo. minor refactor
Revision: 3202
Author: pazu2k@gmail.com
Date: Tue Sep 8 12:30:31 2009
Log: inlineEdit: fixed bug demo. minor refactor
http://code.google.com/p/jquery-ui/source/detail?r=3202
Modified:
/branches/labs/inlineedit/demo.html
/branches/labs/inlineedit/ui.inlineEdit.js
/branches/labs/inlineedit/ui.inlineedit.css
=======================================
--- /branches/labs/inlineedit/demo.html Fri Aug 28 07:56:59 2009
+++ /branches/labs/inlineedit/demo.html Tue Sep 8 12:30:31 2009
@@ -13,10 +13,14 @@
$(function(){
$('.editable').inlineEdit({
save: function(event, ui) {
- console.log(event, ui);
+
+ // perform data save operations (i.e. Ajax post, iframe or hidden field)
+
},
cancel: function(event) {
- console.log(event);
+
+ // actions to perform on cancel
+
}
});
});
@@ -29,18 +33,7 @@
<tr><td><span class="editable">Joe Blogg</span></td></tr>
<tr><td><span class="editable">John Doe</span></td></tr>
<tr><td><span class="editable">Paul White</span></td></tr>
- <tr><td><span class="editable"> </span></td></tr>
-
- <tr><td>
- Static Example:
- <span class="ui-inlineedit">
- <form class="ui-inlineedit-content ui-widget ui-widget-content
ui-corner-all">
- <input type="text" class="ui-inlineedit-input" value="Sarah">
- <a href="#" class="ui-inlineedit-save ui-inlineedit-button
ui-state-default" title="Save"><span class="ui-icon
ui-icon-disk">Save</span></a>
- <a href="#" class="ui-inlineedit-cancel ui-inlineedit-button
ui-state-default" title="Cancel"><span class="ui-icon
ui-icon-cancel">Cancel</span></a>
- </form>
- </span>
- </td></tr>
+ <tr><td><span class="editable"> </span></td></tr>
</table>
</body>
=======================================
--- /branches/labs/inlineedit/ui.inlineEdit.js Thu Aug 27 23:33:47 2009
+++ /branches/labs/inlineedit/ui.inlineEdit.js Tue Sep 8 12:30:31 2009
@@ -16,20 +16,20 @@
this.element
.bind('click', function(event) {
var $this = $(event.target);
-
+
if ($this.hasClass('ui-inlineedit-save') ||
$this.parent().hasClass('ui-inlineedit-save')) {
- self._save(event, self.element.find('.ui-inlineedit-input').val());
- return;
+ self._save(self.element.find('.ui-inlineedit-input').val(), event);
+ return false;
}
if ($this.hasClass('ui-inlineedit-cancel') ||
$this.parent().hasClass('ui-inlineedit-cancel')) {
self._cancel(event, self.element.find('.ui-inlineedit-input').val());
- return;
+ return false;
}
if ($this.hasClass('ui-inlineedit') ||
$this.hasClass('ui-inlineedit-placeholder')) {
self._render();
- return;
+ return false;
}
})
.bind('mouseover', function(event) {
@@ -65,9 +65,9 @@
},
_uiInlineEditHtml: function() {
return '<form class="'+ uiInlineEditClasses +'">' +
- '<input class="ui-inlineedit-input" type="text" value="'+ this.value()
+'">'+
- '<a href="#" class="ui-inlineedit-save ui-inlineedit-button
ui-state-default" title="'+ this.options.saveButton +'"><span
class="ui-icon ui-icon-disk">'+ this.options.saveButton +'</span></a>' +
- '<a href="#" class="ui-inlineedit-cancel ui-inlineedit-button
ui-state-default" title="'+ this.options.cancelButton +'"><span
class="ui-icon ui-icon-cancel">'+ this.options.cancelButton +'</span></a>' +
+ '<input class="ui-inlineedit-input" type="text" value="'+ this.value()
+'"> '+
+ '<a href="#" class="ui-inlineedit-save ui-inlineedit-button
ui-state-default" title="'+ this.options.saveButton +'"><span
class="ui-icon ui-icon-disk"></span>'+ this.options.saveButton +'</a>' +
+ '<a href="#" class="ui-inlineedit-cancel ui-inlineedit-button
ui-state-default" title="'+ this.options.cancelButton +'"><span
class="ui-icon ui-icon-cancel"></span>'+ this.options.cancelButton +'</a>' +
'</form>';
},
_placeholderHtml: function() {
@@ -81,9 +81,10 @@
},
_formSubmit: function() {
var self = this;
+
this.element.find('form')
.submit(function(event) {
- self._save(event, $('input', this).val());
+ self._save($('input', this).val(), event);
$('input', this).blur();
return false;
});
@@ -103,12 +104,8 @@
})
.focus();
},
- _save: function(event, newValue) {
- var hash = {
- value: newValue
- };
-
- if (this._trigger('save', event, hash) !== false) {
+ _save: function(newValue, event) {
+ if (this._trigger('save', event, { value: newValue }) !== false) {
this.value(newValue);
}
},
=======================================
--- /branches/labs/inlineedit/ui.inlineedit.css Fri Aug 28 07:56:59 2009
+++ /branches/labs/inlineedit/ui.inlineedit.css Tue Sep 8 12:30:31 2009
@@ -3,7 +3,7 @@
.ui-inlineedit-content { position: relative; }
.ui-inlineedit-placeholder { color: #555; font-style: italic; }
.ui-inlineedit-input { margin-right: 16px; padding: .2em; border: none;
background: none; }
-.ui-inlineedit-button { position: absolute; width: 16px; height: 16px;
display: block; right: 0; }
+.ui-inlineedit-button { position: absolute; width: 16px; height: 16px;
display: block; right: 0; overflow: hidden; }
.ui-inlineedit .ui-inlineedit-button { background: none; border: none; }
.ui-inlineedit-save { top: 0; }
.ui-inlineedit-cancel { bottom: 0; }