r3080 committed - inlineEdit: submission of basic inline edit plugin and demo for labs
Revision: 3080
Author: pazu2k@gmail.com
Date: Tue Aug 18 10:35:32 2009
Log: inlineEdit: submission of basic inline edit plugin and demo for labs
http://code.google.com/p/jquery-ui/source/detail?r=3080
Added:
/branches/labs/inlineedit
/branches/labs/inlineedit/demo.html
/branches/labs/inlineedit/ui.inlineEdit.js
=======================================
--- /dev/null
+++ /branches/labs/inlineedit/demo.html Tue Aug 18 10:35:32 2009
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<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 }
+</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>
+<script type="text/javascript" src="ui.inlineEdit.js"></script>
+<script type="text/javascript">
+
+$(function(){
+ $('.editable').inlineEdit();
+});
+
+</script>
+</head>
+<body>
+
+<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>
+</table>
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/labs/inlineedit/ui.inlineEdit.js Tue Aug 18 10:35:32 2009
@@ -0,0 +1,62 @@
+(function($) {
+
+$.widget('ui.inlineEdit', {
+ _init: function() {
+
+ var self = this;
+
+ this.value = this.element.text() || this.options.value;
+
+ this.element.bind('click', function(event) {
+ var $this = $(event.target);
+
+ if ($this.is('button')) {
+
+ var hash = {
+ value: $input = $this.siblings('input').val()
+ };
+
+ if (self._trigger('save', event, { value: hash }) !==
false) {
+ self.value = hash.value;
+ }
+
+ } else if ($this.is(self.element[0].tagName)) {
+
+ self.element
+ .html('<input type="text" value="'+ self.value +'">
<button>'+ self.options.label +'</button>')
+ .find('input')
+ .bind('blur', function() {
+ if (self.timer) {
+ window.clearTimeout(self.timer);
+ }
+ self.timer = window.setTimeout(function() {
+ self.element.text(self.value);
+
self.element.removeClass(self.options.hover);
+ }, 200);
+ })
+ .focus();
+ }
+ })
+ .hover(
+ function(){
+ $(this).addClass(self.options.hover);
+ },
+ function(){
+ $(this).removeClass(self.options.hover);
+ }
+ );
+
+ }
+});
+
+$.extend($.ui.inlineEdit, {
+ version: "@VERSION",
+ eventPrefix: "edit",
+ defaults: {
+ hover: 'hover',
+ value: '',
+ label: 'Save'
+ }
+});
+
+})(jQuery);