r3164 committed - Inline Edit: added cancel button
Revision: 3164
Author: pazu2k@gmail.com
Date: Thu Aug 27 23:33:47 2009
Log: Inline Edit: added cancel button
http://code.google.com/p/jquery-ui/source/detail?r=3164
Modified:
/branches/labs/inlineedit/demo.html
/branches/labs/inlineedit/ui.inlineEdit.js
/branches/labs/inlineedit/ui.inlineedit.css
=======================================
--- /branches/labs/inlineedit/demo.html Thu Aug 27 14:14:09 2009
+++ /branches/labs/inlineedit/demo.html Thu Aug 27 23:33:47 2009
@@ -14,6 +14,9 @@
$('.editable').inlineEdit({
save: function(event, ui) {
console.log(event, ui);
+ },
+ cancel: function(event) {
+ console.log(event);
}
});
});
@@ -33,7 +36,8 @@
<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-button ui-state-default"
title="Save"><span class="ui-icon ui-icon-disk">Save</span></a>
+ <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">Save</span></a>
</form>
</span>
</td></tr>
=======================================
--- /branches/labs/inlineedit/ui.inlineEdit.js Thu Aug 27 14:14:09 2009
+++ /branches/labs/inlineedit/ui.inlineEdit.js Thu Aug 27 23:33:47 2009
@@ -17,11 +17,16 @@
.bind('click', function(event) {
var $this = $(event.target);
- if ($this.hasClass('ui-inlineedit-button') ||
$this.hasClass('ui-icon')) {
+ if ($this.hasClass('ui-inlineedit-save') ||
$this.parent().hasClass('ui-inlineedit-save')) {
self._save(event, self.element.find('.ui-inlineedit-input').val());
return;
}
-
+
+ if ($this.hasClass('ui-inlineedit-cancel') ||
$this.parent().hasClass('ui-inlineedit-cancel')) {
+ self._cancel(event, self.element.find('.ui-inlineedit-input').val());
+ return;
+ }
+
if ($this.hasClass('ui-inlineedit') ||
$this.hasClass('ui-inlineedit-placeholder')) {
self._render();
return;
@@ -33,8 +38,8 @@
self.element.removeClass(highlight);
self.element.find('.ui-inlineedit-button').removeClass('ui-state-hover');
- if ($this.hasClass('ui-inlineedit-button') ||
$this.hasClass('ui-icon')) {
- self.element.find('.ui-inlineedit-button').addClass('ui-state-hover');
+ if ($this.hasClass('ui-inlineedit-save') ||
$this.parent().hasClass('ui-inlineedit-save')) {
+ self.element.find('.ui-inlineedit-save').addClass('ui-state-hover');
return;
}
@@ -46,8 +51,8 @@
.bind('mouseout', function(event) {
var $this = $(event.target);
- if ($this.hasClass('ui-inlineedit-button') ||
$this.hasClass('ui-icon')) {
-
self.element.find('.ui-inlineedit-button').removeClass('ui-state-hover');
+ if ($this.hasClass('ui-inlineedit-save') ||
$this.parent().hasClass('ui-inlineedit-save')) {
+
self.element.find('.ui-inlineedit-save').removeClass('ui-state-hover');
return;
}
@@ -61,7 +66,8 @@
_uiInlineEditHtml: function() {
return '<form class="'+ uiInlineEditClasses +'">' +
'<input class="ui-inlineedit-input" type="text" value="'+ this.value()
+'">'+
- '<a href="#" class="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-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>' +
'</form>';
},
_placeholderHtml: function() {
@@ -104,7 +110,10 @@
if (this._trigger('save', event, hash) !== false) {
this.value(newValue);
- }
+ }
+ },
+ _cancel: function(event) {
+ this._trigger('cancel', event);
},
value: function(newValue) {
@@ -121,6 +130,7 @@
defaults: {
value: '',
saveButton: 'Save',
+ cancelButton: 'Cancel',
placeholder: 'Click to edit'
}
});
=======================================
--- /branches/labs/inlineedit/ui.inlineedit.css Thu Aug 27 14:09:31 2009
+++ /branches/labs/inlineedit/ui.inlineedit.css Thu Aug 27 23:33:47 2009
@@ -3,5 +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; top: 0; right: 0; }
+.ui-inlineedit-button { position: absolute; width: 16px; height: 16px;
display: block; right: 0; }
.ui-inlineedit .ui-inlineedit-button { background: none; border: none; }
+.ui-inlineedit-save { top: 0; }
+.ui-inlineedit-cancel { bottom: 0; }