Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add example:resetForm custom event to manually trigger clearing.

  • Loading branch information...
commit d9fe6786f75af673d7ea93ca7d5b79f43a237b0e 1 parent 6d0fbdd
Paul Mucur authored
19 README.markdown
View
@@ -1,4 +1,4 @@
-jQuery Form Example Plugin 1.5.2
+jQuery Form Example Plugin 1.6.0
======================================
This is a jQuery plugin to populate form inputs with example text that
@@ -75,10 +75,23 @@ All events are namespaced with `.example` so they can be selectively unbound wit
* `change.example` on affected inputs;
* `blur.example` on affected inputs.
+As of 1.6.0, if you wish to manually trigger clearing examples from a form (e.g. because you wish to override a form's `submit` event in some way) then you can trigger a special custom event, `example:resetForm` to do so:
+
+```javascript
+$('#myform').trigger('example:resetForm');
+```
+
+Note that, due to event bubbling, triggering `example:resetForm` on a specific field will actual propagate up to its parent form and reset all examples.
+
+```javascript
+/* This will actually bubble up to trigger on #myform. */
+$('#myform input.name').trigger('example:resetForm');
+```
+
Downloading
-----------
-[Download jQuery Example 1.5.2](https://github.com/mudge/jquery_example/zipball/v1.5.2).
+[Download jQuery Example 1.6.0](https://github.com/mudge/jquery_example/zipball/v1.6.0).
Testing
-------
@@ -112,7 +125,7 @@ The code to support the Metadata plugin was contributed by DeLynn Berry (http://
Licensing
---------
-Copyright (c) Paul Mucur (http://mudge.name), 2007-2011.
+Copyright (c) Paul Mucur (http://mudge.name), 2007-2012.
Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL (GPL-LICENSE.txt)
Licenses.
57 jquery.example.js
View
@@ -1,7 +1,7 @@
/*global window, document, jQuery */
/*
- * jQuery Form Example Plugin 1.5.2
+ * jQuery Form Example Plugin 1.6.0
* Populate form inputs with example text that disappears on focus.
*
* e.g.
@@ -13,7 +13,7 @@
* className: 'example_text'
* });
*
- * Copyright (c) Paul Mucur (http://mudge.name), 2007-2011.
+ * Copyright (c) Paul Mucur (http://mudge.name), 2007-2012.
* Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL (GPL-LICENSE.txt)
* licenses.
*
@@ -28,7 +28,38 @@
* GNU General Public License for more details.
*/
(function ($) {
- "use strict";
+ 'use strict';
+
+ /* Define a helper function to attach event handlers in the best possible way
+ * while remaining compatible with older versions of jQuery.
+ */
+ var attach;
+
+ if ($.fn.on) {
+
+ /* jQuery 1.7's `on` is the preferred way of attaching event handlers. */
+ attach = function (selector, events, callback) {
+ $('body').on(events, selector, callback);
+ };
+ } else if ($.fn.delegate) {
+
+ /* Followed by jQuery 1.4.2's `delegate`. */
+ attach = function (selector, events, callback) {
+ $('body').delegate(selector, events, callback);
+ };
+ } else if ($.fn.live) {
+
+ /* Then jQuery 1.3's `live`. */
+ attach = function (selector, events, callback) {
+ $(selector).live(events, callback);
+ };
+ } else {
+
+ /* Fall back to jQuery 1.0's `bind`. */
+ attach = function (selector, events, callback) {
+ $(selector).bind(events, callback);
+ };
+ }
$.fn.example = function (text, args) {
@@ -37,7 +68,7 @@
return this.each(function () {
- var o, clearExamples, $this = $(this);
+ var o, $this = $(this);
/* Merge the plugin defaults with the given options and, if present,
* any metadata.
@@ -48,10 +79,6 @@
o = $.extend({}, $.fn.example.defaults, options);
}
- clearExamples = function () {
- $(this).find('.' + o.className).val('');
- };
-
/* 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.
@@ -67,7 +94,7 @@
* being saved.
*/
$(window).bind('unload.example', function () {
- $('.' + o.className).val('');
+ $('.' + o.className).val('').removeClass(o.className);
});
/* Clear fields that are still examples before any form is submitted
@@ -76,15 +103,9 @@
* Where possible, attempt to delegate this event handler so that
* all forms are bound now and in the future.
*/
- if ($.fn.on) {
- $('body').on('submit.example', 'form', clearExamples);
- } else if ($.fn.delegate) {
- $('body').delegate('form', 'submit.example', clearExamples);
- } else if ($.fn.live) {
- $('form').live('submit.example', clearExamples);
- } else {
- $('form').bind('submit.example', clearExamples);
- }
+ attach('form', 'submit.example example:resetForm', function () {
+ $(this).find('.' + o.className).val('').removeClass(o.className);
+ });
/* Add the class name to the array. */
$.fn.example.boundClassNames[o.className] = true;
23 jquery.example.min.js
View
@@ -1,17 +1,17 @@
/*
- * jQuery Form Example Plugin 1.5.2
+ * jQuery Form Example Plugin 1.6.0
* Populate form inputs with example text that disappears on focus.
*
* e.g.
- * $('input#name').example('Bob Smith');
- * $('input[@title]').example(function() {
- * return $(this).attr('title');
- * });
- * $('textarea#message').example('Type your message here', {
- * className: 'example_text'
- * });
+ * $('input#name').example('Bob Smith');
+ * $('input[@title]').example(function () {
+ * return $(this).attr('title');
+ * });
+ * $('textarea#message').example('Type your message here', {
+ * className: 'example_text'
+ * });
*
- * Copyright (c) Paul Mucur (http://mudge.name), 2007-2011.
+ * Copyright (c) Paul Mucur (http://mudge.name), 2007-2012.
* Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL (GPL-LICENSE.txt)
* licenses.
*
@@ -22,7 +22,6 @@
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
- */
-(function(a){"use strict",a.fn.example=function(b,c){var d=a.isFunction(b),e=a.extend({},c,{example:b});return this.each(function(){var b,c,f=a(this);a.metadata?b=a.extend({},a.fn.example.defaults,f.metadata(),e):b=a.extend({},a.fn.example.defaults,e),c=function(){a(this).find("."+b.className).val("")},a.fn.example.boundClassNames[b.className]||(a(window).bind("unload.example",function(){a("."+b.className).val("")}),a.fn.on?a("body").on("submit.example","form",c):a.fn.delegate?a("body").delegate("form","submit.example",c):a.fn.live?a("form").live("submit.example",c):a("form").bind("submit.example",c),a.fn.example.boundClassNames[b.className]=!0),f.val()!==this.defaultValue&&(d||f.val()===b.example)&&f.val(this.defaultValue),f.val()===""&&!f.is(":focus")&&f.addClass(b.className).val(d?b.example.call(this):b.example),f.bind("focus.example",function(){a(this).is("."+b.className)&&a(this).val("").removeClass(b.className)}).bind("change.example",function(){a(this).is("."+b.className)&&a(this).removeClass(b.className)}).bind("blur.example",function(){a(this).val()===""&&a(this).addClass(b.className).val(d?b.example.call(this):b.example)})})},a.fn.example.defaults={className:"example"},a.fn.example.boundClassNames=[]})(jQuery);
+ */(function(a){"use strict";var b;a.fn.on?b=function(b,c,d){a("body").on(c,b,d)}:a.fn.delegate?b=function(b,c,d){a("body").delegate(b,c,d)}:a.fn.live?b=function(b,c,d){a(b).live(c,d)}:b=function(b,c,d){a(b).bind(c,d)},a.fn.example=function(c,d){var e=a.isFunction(c),f=a.extend({},d,{example:c});return this.each(function(){var c,d=a(this);a.metadata?c=a.extend({},a.fn.example.defaults,d.metadata(),f):c=a.extend({},a.fn.example.defaults,f),a.fn.example.boundClassNames[c.className]||(a(window).bind("unload.example",function(){a("."+c.className).val("").removeClass(c.className)}),b("form","submit.example example:resetForm",function(){a(this).find("."+c.className).val("").removeClass(c.className)}),a.fn.example.boundClassNames[c.className]=!0),d.val()!==this.defaultValue&&(e||d.val()===c.example)&&d.val(this.defaultValue),d.val()===""&&!d.is(":focus")&&d.addClass(c.className).val(e?c.example.call(this):c.example),d.bind("focus.example",function(){a(this).is("."+c.className)&&a(this).val("").removeClass(c.className)}).bind("change.example",function(){a(this).is("."+c.className)&&a(this).removeClass(c.className)}).bind("blur.example",function(){a(this).val()===""&&a(this).addClass(c.className).val(e?c.example.call(this):c.example)})})},a.fn.example.defaults={className:"example"},a.fn.example.boundClassNames=[]})(jQuery);
6 test/index.html
View
@@ -59,6 +59,12 @@ <h2 id=qunit-userAgent></h2>
<p><input autocomplete=off type="text" id="c4"></p>
<p><input autocomplete=off type="text" id="c5" value="Some default"></p>
</form>
+ <form id="custom">
+ <p><input autocomplete=off type="text" id="ce1"></p>
+ </form>
+ <form id="custom2">
+ <p><input autocomplete=off type="text" id="ce2"></p>
+ </form>
</div>
</body>
</html>
26 test/jquery.example_test.js
View
@@ -245,19 +245,37 @@
});
test("value is not touched if it doesn't match the example", function () {
$('#c3').val('Some user input').example('Test');
- equals($('#c3').val(), 'Some user input', 'Value should not have been modified.');
+ equal($('#c3').val(), 'Some user input', 'Value should not have been modified.');
ok(!$('#c3').hasClass('example'), 'The example class should not be set.');
});
test('value is always cleared if the example is a callback', function () {
$('#c4').val('Some user input').example(function () {
return 'Test';
});
- equals($('#c4').val(), 'Test', 'The cached value is overridden.');
+ equal($('#c4').val(), 'Test', 'The cached value is overridden.');
ok($('#c4').hasClass('example'), 'The example class should be set.');
});
- test("value is not touched if it is the default", function () {
+ test('value is not touched if it is the default', function () {
$('#c5').val('Some default').example('Test');
- equals($('#c5').val(), 'Some default', 'Value should not have been modified.');
+ equal($('#c5').val(), 'Some default', 'Value should not have been modified.');
ok(!$('#c5').hasClass('example'), 'The example class should not be set.');
});
+
+ module('Custom events', {
+ teardown: resetPlugin
+ });
+ test('a specific form is cleared when calling example:resetForm on it', function () {
+ $('#ce1, #ce2').example('Testing');
+ $('#custom').trigger('example:resetForm');
+ equal($('#ce1').val(), '', 'The value should have been cleared.');
+ ok(!$('#ce1').hasClass('example'), 'The example class should not be set.');
+ equal($('#ce2').val(), 'Testing', 'The value should not have been cleared.');
+ ok($('#ce2').hasClass('example'), 'The example class should be set.');
+ });
+ test('triggering example:resetForm on a field will bubble to the form', function () {
+ $('#ce1').example('Testing');
+ $('#ce1').trigger('example:resetForm');
+ equal($('#ce1').val(), '', 'The value should have been cleared.');
+ ok(!$('#ce1').hasClass('example'), 'The example class should not be set.');
+ });
}(jQuery));
Please sign in to comment.
Something went wrong with that request. Please try again.