r3155 committed - inlineEdit: added placeholder for empty values
Revision: 3155
Author: pazu2k@gmail.com
Date: Thu Aug 27 10:24:15 2009
Log: inlineEdit: added placeholder for empty values
http://code.google.com/p/jquery-ui/source/detail?r=3155
Modified:
/branches/labs/inlineedit/demo.html
/branches/labs/inlineedit/ui.inlineEdit.js
=======================================
--- /branches/labs/inlineedit/demo.html Wed Aug 19 09:14:22 2009
+++ /branches/labs/inlineedit/demo.html Thu Aug 27 10:24:15 2009
@@ -5,6 +5,7 @@
<title>jQuery UI: Inline Edit Plugin Demo</title>
<style type="text/css">
.hover { background-color: #ffC }
+ .ui-inline-edit-placeholder { color: #555; font-style: italic; }
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
@@ -27,6 +28,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>
</table>
</body>
=======================================
--- /branches/labs/inlineedit/ui.inlineEdit.js Thu Aug 27 00:14:20 2009
+++ /branches/labs/inlineedit/ui.inlineEdit.js Thu Aug 27 10:24:15 2009
@@ -1,8 +1,12 @@
(function($) {
+var uiInlineEditClasses = 'ui-inline-edit';
+
$.widget('ui.inlineEdit', {
_init: function() {
- this.value(this.element.text() || this.options.value);
+ if (!this.value(this.element.text() || this.options.value)) {
+ this.element.html($(this._placeholderHtml()));
+ }
this._delegate();
this._hover(this.options.hover);
},
@@ -10,19 +14,21 @@
var self = this,
originalElement = this.element[0];
- this.element.bind('click', function(event) {
- var $this = $(event.target);
-
- if ($this.is('button')) {
- self._save(event, $this.siblings('input').val());
- return;
- }
-
- if ($this.is(originalElement.tagName)) {
- self._render();
- return;
- }
- });
+ this.element
+ .bind('click', function(event) {
+ var $this = $(event.target);
+
+ if ($this.is('button')) {
+ self._save(event, $this.siblings('input').val());
+ return;
+ }
+
+ if ($this.is(originalElement.tagName) ||
$this.hasClass('ui-inline-edit-placeholder')) {
+ self._render();
+ return;
+ }
+ })
+ .addClass(uiInlineEditClasses);
},
_hover: function(hover) {
this.element.hover(function(){
@@ -32,7 +38,10 @@
});
},
_uiInlineEditHtml: function() {
- return '<form><input type="text" value="'+ this.value() +'"> <button
type="button">'+ this.options.label +'</button></form>';
+ return '<form class="ui-inline-edit-form"><input
class="ui-inline-edit-input" type="text" value="'+ this.value() +'">
<button class="ui-inline-edit-button-save" type="button">'+
this.options.saveButton +'</button></form>';
+ },
+ _placeholderHtml: function() {
+ return '<span class="ui-inline-edit-placeholder">'+
this.options.placeholder +'</span>';
},
_render: function() {
this.element.html(this._uiInlineEditHtml());
@@ -57,7 +66,7 @@
window.clearTimeout(self.timer);
}
self.timer = window.setTimeout(function() {
- self.element.text(self.value());
+ self.element.html(self.value() ||
self._placeholderHtml());
self.element.removeClass(self.options.hover);
}, 200);
})
@@ -75,9 +84,9 @@
value: function(newValue) {
if (arguments.length) {
- this._setData('value', newValue);
- }
- return this._getData('value');
+ this._setData('value',
$(newValue).hasClass('ui-inline-edit-placeholder') ? '' : newValue);
+ }
+ return this.options.value;
}
});
@@ -87,7 +96,8 @@
defaults: {
hover: 'hover',
value: '',
- label: 'Save'
+ saveButton: 'Save',
+ placeholder: 'Click to edit'
}
});