jquery.metadata.pack.js
@@ -1,4 +1,4 @@
-jQuery Form Input Example Plugin 1.3.3
+jQuery Form Input Example Plugin 1.3.4
======================================
This is a jQuery plugin to populate form inputs with example text that
@@ -60,6 +60,15 @@ dynamically change the example text of a field after page load like so:
$(this).attr('title', 'Not the original title anymore');
return text;
});
+
+The plugin also supports the jQuery Metadata plugin which allows you to
+specify metadata in elements themselves. You can specify the example text and
+hide_label options like so:
+
+ <input id="m1" class="{example_text: 'An example', hide_label: true}" />
+
+Please note that you *cannot* set the class_name option using metadata and
+that anything specified using metadata will take precedence.
For more usage examples (and something of a test suite), please see
index.html.
@@ -79,6 +88,14 @@ do not hesitate to contact me with comments and bug reports through the
plugin's official entry on the jQuery Plugins directory:
http://plugins.jquery.com/project/example
+You can view the latest source code (and fork the entire project if you wish)
+at http://github.com/mudge/jquery_example
+
+Contributors
+------------
+
+The code to support the Metadata plugin was contributed by DeLynn Berry (http://github.com/delynn).
+
Licensing
---------
README.markdown
@@ -7,7 +7,7 @@
<style type="text/css">html{font:small Helvetica;background:#eee;}body{margin:20px;}.example{color:#666;}.not_example{color:#c6c;}.case{margin-bottom:10px;border:1px solid #999;padding:0 10px;background:#fff;}pre{border:1px solid #996;background:#ffc;padding:5px;}h1,h3,pre,code{font-size:1em;}h1{font-size:1.5em;}input{width:200px;}</style>
</head>
<body>
- <h1>jQuery Form Input Example Plugin 1.3.3</h1>
+ <h1>jQuery Form Input Example Plugin 1.3.4</h1>
<p>This is both a test and usage guide for the <a href="http://mucur.name/posts/jquery-example">jQuery Form Input Example plugin</a> by <a href="http://mucur.name/">Paul Mucur</a>. Below you will find several test cases and the relevant JavaScript source code used in the test.</p>
<form action="javascript:alert('Form submitted, all examples should be cleared.');">
<div class="case">
@@ -185,6 +185,29 @@ $('#defaults_test_1').example('Not example by default');
$('#defaults_test_2').example('Not example by default');
$('#defaults_test_3').example('Not example by default');</code></pre>
</div>
+
+ <div class="case">
+ <p>The following field should have its example set to "Metadata plugin rules" as defined by using the Metadata plugin.</p>
+ <p>
+ <input id="metadata_1" class="{example_text: 'Metadata plugin rules'}" />
+ </p>
+ <h3>HTML</h3>
+ <pre><code><input id="metadata_1" class="{example_text: 'Metadata plugin rules'}" /></code></pre>
+ <h3>JavaScript</h3>
+ <pre><code>$('#metadata_1').example();</code></pre>
+ </div>
+
+ <div class="case">
+ <p>The following field should have its example set to "Metadata plugin takes precedence" as set with the Metadata plugin despite setting the text in the function call.</p>
+ <p>
+ <input id="metadata_2" class="{example_text: 'Metadata plugin takes precedence'}" />
+ </p>
+ <h3>HTML</h3>
+ <pre><code><input id="metadata_2" class="{example_text: 'Metadata plugin takes precedence'}" /></code></pre>
+ <h3>JavaScript</h3>
+ <pre><code>$('#metadata_2').example('This will be overridden by the Metadata');</code></pre>
+ </div>
+
<div class="case">
<p>Clicking the following submit button should clear all example text but leave real values (if this was a real form, you do not want the examples to be sent with the form).</p>
<p><input type="submit" /></p>
@@ -205,6 +228,7 @@ $('#defaults_test_3').example('Not example by default');</code></pre>
<!-- <script type="text/javascript" src="jquery-1.1.pack.js" charset="utf-8"></script> -->
<script type="text/javascript" src="jquery-1.2.3.pack.js" charset="utf-8"></script>
+ <script type="text/javascript" src="jquery.metadata.pack.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.example.js" charset="utf-8"></script>
<!-- <script type="text/javascript" src="jquery.example.min.js" charset="utf-8"></script> -->
<script type="text/javascript" charset="utf-8">
@@ -252,6 +276,9 @@ $('#defaults_test_3').example('Not example by default');</code></pre>
return text;
});
+ $('#metadata_1').example();
+ $('#metadata_2').example('This will be overriden by the Metadata');
+
$('#second_form').example('Only I should be cleared when you click below');
$.fn.example.defaults.class_name = 'not_example';
index.html
@@ -1,5 +1,5 @@
/*
- * jQuery Example Plugin 1.3.3
+ * jQuery Example Plugin 1.3.4
* Populate form inputs with example text that disappears on focus.
*
* e.g.
@@ -27,18 +27,23 @@
* GNU General Public License for more details.
*/
(function($) {
-
+
$.fn.example = function(text, args) {
- /* Merge the default options with the given arguments. */
- var options = $.extend({}, $.fn.example.defaults, args);
+ /* Merge the default options with the given arguments and the given
+ * text with the example_text option.
+ */
+ var options = $.extend({},
+ $.fn.example.defaults,
+ args,
+ {example_text: text});
/* Only calculate once whether a callback has been used. */
- var callback = $.isFunction(text);
+ var callback = $.isFunction(options.example_text);
/* The following event handlers only need to be bound once
* per class name. In order to do this, an array of used
- * class names is stored and checked on each use of the plugin.
+ * class names is stored and checked on each use of the plugin.
* If the class name is in the array then this whole section
* is skipped. If not, the events are bound and the class name
* added to the array.
@@ -72,7 +77,7 @@
});
/* Add the class name to the array. */
- $.fn.example.bound_class_names[options.class_name] = true;
+ $.fn.example.bound_class_names[options.class_name] = true;
}
return this.each(function() {
@@ -80,6 +85,18 @@
/* Reduce method calls by saving the current jQuery object. */
var $this = $(this);
+ /* As of 1.3.4 and thanks to DeLynn Berry, the Metadata plugin can be
+ * used in conjunction with this plugin. This means that the example
+ * text can be set in the element itself, e.g.
+ *
+ * <input class="{example_text: 'Some text'}" />
+ *
+ * CAVEAT: It is not possible to set the class_name option using
+ * the Metadata plugin as the class name is used before iterating
+ * through each element (which is when the Metadata merging happens).
+ */
+ var o = $.metadata ? $.extend({}, options, $this.metadata()) : options;
+
/* Internet Explorer will cache form values even if they are cleared
* on unload, so this will clear any value that matches the example
* text and hasn't been specified in the value attribute.
@@ -98,10 +115,10 @@
* Many thanks to Klaus Hartl for this technique.
*/
if ($.browser.msie && !$this.attr('defaultValue') &&
- (callback ? $this.val() != '' : $this.val() == text)) {
+ (callback ? $this.val() != '' : $this.val() == o.example_text)) {
$this.val('');
}
-
+
/* Initially place the example text in the field if it is empty. */
if ($this.val() == '') {
$this.addClass(options.class_name);
@@ -109,9 +126,9 @@
/* The text argument can now be a function; if this is the case,
* call it, passing the current element as `this`.
*/
- $this.val(callback ? text.call(this) : text);
+ $this.val(callback ? o.example_text.call(this) : o.example_text);
}
-
+
/* DEPRECATION WARNING: I am considering removing this option.
*
* If the option is set, hide the associated label (and its line-break
@@ -126,7 +143,7 @@
label.next('br').hide();
label.hide();
}
-
+
/* Make the example text disappear when someone focuses.
*
* To determine whether the value of the field is an example or not,
@@ -153,7 +170,7 @@
* is not as efficient as caching the value, it allows for
* more dynamic applications of the plugin.
*/
- $(this).val(callback ? text.call(this) : text);
+ $(this).val(callback ? o.example_text.call(this) : o.example_text);
}
});
});
@@ -165,6 +182,7 @@
* $.fn.example.defaults.hide_label = true;
*/
$.fn.example.defaults = {
+ example_text: '',
class_name: 'example',
/* DEPRECATION WARNING: I am considering removing this option. */
@@ -174,4 +192,4 @@
/* All the class names used are stored as keys in the following array. */
$.fn.example.bound_class_names = [];
-})(jQuery);
+})(jQuery);
\ No newline at end of file
jquery.example.js
@@ -1,5 +1,5 @@
/*
- * jQuery Example Plugin 1.3.3
+ * jQuery Example Plugin 1.3.4
* Populate form inputs with example text that disappears on focus.
*
* e.g.
@@ -26,4 +26,4 @@
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*/
-(function(A){A.fn.example=function(D,C){var B=A.extend({},A.fn.example.defaults,C);var E=A.isFunction(D);if(!A.fn.example.bound_class_names[B.class_name]){A(window).unload(function(){A("."+B.class_name).val("")});A("form").submit(function(){A(this).find("."+B.class_name).val("")});A.fn.example.bound_class_names[B.class_name]=true}return this.each(function(){var G=A(this);if(A.browser.msie&&!G.attr("defaultValue")&&(E?G.val()!="":G.val()==D)){G.val("")}if(G.val()==""){G.addClass(B.class_name);G.val(E?D.call(this):D)}if(B.hide_label){var F=A("label[@for="+G.attr("id")+"]");F.next("br").hide();F.hide()}G.focus(function(){if(A(this).is("."+B.class_name)){A(this).val("");A(this).removeClass(B.class_name)}});G.blur(function(){if(A(this).val()==""){A(this).addClass(B.class_name);A(this).val(E?D.call(this):D)}})})};A.fn.example.defaults={class_name:"example",hide_label:false};A.fn.example.bound_class_names=[]})(jQuery);
\ No newline at end of file
+(function(A){A.fn.example=function(D,C){var B=A.extend({},A.fn.example.defaults,C,{example_text:D});var E=A.isFunction(B.example_text);if(!A.fn.example.bound_class_names[B.class_name]){A(window).unload(function(){A("."+B.class_name).val("")});A("form").submit(function(){A(this).find("."+B.class_name).val("")});A.fn.example.bound_class_names[B.class_name]=true}return this.each(function(){var G=A(this);var H=A.metadata?A.extend({},B,G.metadata()):B;if(A.browser.msie&&!G.attr("defaultValue")&&(E?G.val()!="":G.val()==H.example_text)){G.val("")}if(G.val()==""){G.addClass(B.class_name);G.val(E?H.example_text.call(this):H.example_text)}if(B.hide_label){var F=A("label[@for="+G.attr("id")+"]");F.next("br").hide();F.hide()}G.focus(function(){if(A(this).is("."+B.class_name)){A(this).val("");A(this).removeClass(B.class_name)}});G.blur(function(){if(A(this).val()==""){A(this).addClass(B.class_name);A(this).val(E?H.example_text.call(this):H.example_text)}})})};A.fn.example.defaults={example_text:"",class_name:"example",hide_label:false};A.fn.example.bound_class_names=[]})(jQuery);
\ No newline at end of file
jquery.example.min.js
8f03a4d8ed03d6af9760473f3b3b9c2f624c2a17
Paul Mucur
mudge@mudge.name
http://github.com/mudge/jquery_example/commit/d19505a1dd1966e3111039d37db8026d5388e5aa
d19505a1dd1966e3111039d37db8026d5388e5aa
2008-05-18T12:47:45-07:00
2008-05-18T12:47:45-07:00
Added support for the Metadata plugin based on DeLynn Berry's changes.
6ca2a913e4444f5cefff43d20d0e5e385213cc78
Paul Mucur
mudge@mudge.name