r3157 committed - inlineEdit: add TR styling
Revision: 3157
Author: pazu2k@gmail.com
Date: Thu Aug 27 14:09:31 2009
Log: inlineEdit: add TR styling
http://code.google.com/p/jquery-ui/source/detail?r=3157
Added:
/branches/labs/inlineedit/ui.inlineedit.css
Modified:
/branches/labs/inlineedit/demo.html
/branches/labs/inlineedit/ui.inlineEdit.js
=======================================
--- /dev/null
+++ /branches/labs/inlineedit/ui.inlineedit.css Thu Aug 27 14:09:31 2009
@@ -0,0 +1,7 @@
+/* InlineEdit
+----------------------------------*/
+.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 .ui-inlineedit-button { background: none; border: none; }
=======================================
--- /branches/labs/inlineedit/demo.html Thu Aug 27 10:24:15 2009
+++ /branches/labs/inlineedit/demo.html Thu Aug 27 14:09:31 2009
@@ -3,10 +3,8 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
+<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"
type="text/css" />
+<link rel="stylesheet" href="ui.inlineedit.css" type="text/css" />
<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>
<script type="text/javascript" src="ui.inlineEdit.js"></script>
@@ -27,8 +25,18 @@
<table>
<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">Paul White</span> blah blah</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-button ui-state-default"
title="Save"><span class="ui-icon ui-icon-disk">Save</span></a>
+ </form>
+ </span>
+ </td></tr>
</table>
</body>
=======================================
--- /branches/labs/inlineedit/ui.inlineEdit.js Thu Aug 27 10:24:15 2009
+++ /branches/labs/inlineedit/ui.inlineEdit.js Thu Aug 27 14:09:31 2009
@@ -1,6 +1,7 @@
(function($) {
-var uiInlineEditClasses = 'ui-inline-edit';
+var uiInlineEditClasses = 'ui-inlineedit-content ui-widget
ui-widget-content ui-corner-all',
+ highlight = 'ui-state-highlight';
$.widget('ui.inlineEdit', {
_init: function() {
@@ -8,43 +9,67 @@
this.element.html($(this._placeholderHtml()));
}
this._delegate();
- this._hover(this.options.hover);
},
_delegate: function() {
- var self = this,
- originalElement = this.element[0];
+ var self = this;
this.element
.bind('click', function(event) {
var $this = $(event.target);
- if ($this.is('button')) {
- self._save(event, $this.siblings('input').val());
+ if ($this.hasClass('ui-inlineedit-button') ||
$this.hasClass('ui-icon')) {
+ self._save(event, self.element.find('.ui-inlineedit-input').val());
return;
}
- if ($this.is(originalElement.tagName) ||
$this.hasClass('ui-inline-edit-placeholder')) {
+ if ($this.hasClass('ui-inlineedit') ||
$this.hasClass('ui-inlineedit-placeholder')) {
self._render();
return;
}
})
- .addClass(uiInlineEditClasses);
- },
- _hover: function(hover) {
- this.element.hover(function(){
- $(this).addClass(hover);
- }, function(){
- $(this).removeClass(hover);
- });
+ .bind('mouseover', function(event) {
+ var $this = $(event.target);
+
+ 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');
+ return;
+ }
+
+ if ($this.hasClass('ui-inlineedit') ||
$this.hasClass('ui-inlineedit-placeholder')) {
+ self.element.addClass(highlight);
+ return;
+ }
+ })
+ .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');
+ return;
+ }
+
+ if ($this.hasClass('ui-inlineedit') ||
$this.hasClass('ui-inlineedit-placeholder')) {
+ self.element.removeClass(highlight);
+ return;
+ }
+ })
+ .addClass('ui-inlineedit');
},
_uiInlineEditHtml: function() {
- 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>';
+ 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>' +
+ '</form>';
},
_placeholderHtml: function() {
- return '<span class="ui-inline-edit-placeholder">'+
this.options.placeholder +'</span>';
+ return '<span class="ui-inlineedit-placeholder">'+
this.options.placeholder +'</span>';
},
_render: function() {
- this.element.html(this._uiInlineEditHtml());
+ this.element
+ .html(this._uiInlineEditHtml());
this._complete();
this._formSubmit();
},
@@ -67,7 +92,7 @@
}
self.timer = window.setTimeout(function() {
self.element.html(self.value() ||
self._placeholderHtml());
- self.element.removeClass(self.options.hover);
+ self.element.removeClass(highlight);
}, 200);
})
.focus();
@@ -94,7 +119,6 @@
version: "@VERSION",
eventPrefix: "edit",
defaults: {
- hover: 'hover',
value: '',
saveButton: 'Save',
placeholder: 'Click to edit'