@@ -2,8 +2,8 @@ Copyright (c) 2008, Paul Mucur, http://mucur.name All rights reserved. -Redistribution and use in source and binary forms, with or without modification, are -permitted provided that the following conditions are met: +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. BSD-LICENSE.txt @@ -1,12 +1,12 @@ - GNU GENERAL PUBLIC LICENSE - Version 2, June 1991 + GNU GENERAL PUBLIC LICENSE + Version 2, June 1991 Copyright (C) 1989, 1991 Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. - Preamble + Preamble The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public @@ -56,7 +56,7 @@ patent must be licensed for everyone's free use or not licensed at all. The precise terms and conditions for copying, distribution and modification follow. - GNU GENERAL PUBLIC LICENSE + GNU GENERAL PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 0. This License applies to any program or other work which contains @@ -255,7 +255,7 @@ make exceptions for this. Our decision will be guided by the two goals of preserving the free status of all derivatives of our free software and of promoting the sharing and reuse of software generally. - NO WARRANTY + NO WARRANTY 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN GPL-LICENSE.txt @@ -1,5 +1,5 @@ -jQuery Form Input Example Plugin -================================ +jQuery Form Input Example Plugin 1.3.2 +====================================== This is a jQuery plugin to populate form inputs with example text that disappears on focus. @@ -8,38 +8,52 @@ Basic usage revolves around the use of the `example` function like so: $('input#name').example('Bob Smith'); -This will then put the example text "Bob Smith" into the input with the ID "name". When a user then focuses on this input, the example text will disappear, allowing them to enter their data. If they then click elsewhere *without entering any information*, the example will re-appear. +This will then put the example text "Bob Smith" into the input with the ID +"name". When a user then focuses on this input, the example text will +disappear, allowing them to enter their data. If they then click elsewhere +*without entering any information*, the example will re-appear. -By default, example text is given the class `example`, allowing you to style it with CSS like so: +By default, example text is given the class `example`, allowing you to style +it with CSS like so: .example { color: #666; } -If this class name conflicts with one you already use, you can override it with the `class_name` option like so: +If this class name conflicts with one you already use, you can override it +with the `class_name` option like so: $('input#name').example('Bob Smith', { class_name: 'hint' }); The above example would then be given the class `hint` instead of `example`. -The other option available is `hide_label` which will hide any input's associated label (and any line-break following it) when set to `true` (it is `false` by default): +The other option available is `hide_label` which will hide any input's +associated label (and any line-break following it) when set to `true` (it is +`false` by default): $('input#name').example('Bob Smith', { hide_label: true }); -If you plan to use the same options repeatedly, it is possible to override the plugin's defaults directly: +If you plan to use the same options repeatedly, it is possible to override the +plugin's defaults directly: $.fn.example.defaults.class_name = 'not_example'; $.fn.example.defaults.hide_label = true; -This will cause any uses of the plugin after this point to use the new defaults. +This will cause any uses of the plugin after this point to use the new +defaults. -As well as supplying the example text via a string, a callback function can be used instead to determine the value at runtime: +As well as supplying the example text via a string, a callback function can be +used instead to determine the value at runtime: $('input#name').example(function() { return $(this).attr('title'); }); -The above example will set the example text to the `title` attribute of the input. The callback is executed within the context of the input field so, as in the example above, `$(this)` will return the input itself. +The above example will set the example text to the `title` attribute of the +input. The callback is executed within the context of the input field so, as +in the example above, `$(this)` will return the input itself. -It is worth noting that the callback is evaluated every time the example text needs to be inserted and *is not cached*. This makes it possible to dynamically change the example text of a field after page load like so: +It is worth noting that the callback is evaluated every time the example text +needs to be inserted and *is not cached*. This makes it possible to +dynamically change the example text of a field after page load like so: $('input#name').example(function() { var text = $(this).attr('title'); @@ -47,25 +61,31 @@ It is worth noting that the callback is evaluated every time the example text ne return text; }); -For more usage examples (and something of a test suite), please see index.html. +For more usage examples (and something of a test suite), please see +index.html. Compatibility ------------- -This plugin has been tested with jQuery 1.1 and newer and should work in all browsers supported by jQuery itself (it has been tested with Safari 3 and newer, Mozilla Firefox 2 and newer and Internet Explorer 6). +This plugin has been tested with jQuery 1.1 and newer and should work in all +browsers supported by jQuery itself (it has been tested with Safari 3 and +newer, Mozilla Firefox 2 and newer, Opera 9.26 and Internet Explorer 6). Author ------ -This plugin was written by and is maintained by Paul Mucur aka "mudge". Please 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 +This plugin was written by and is maintained by Paul Mucur aka "mudge". Please +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 Licensing --------- Copyright (c) Paul Mucur (http://mucur.name), 2007-2008. -Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL License -(GPL-LICENSE.txt). +Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL (GPL-LICENSE.txt) +Licenses. This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by README.markdown @@ -1,216 +1,264 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" - "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> - <title>jQuery Form Input Example Plugin</title> - <style type="text/css"> - html { - font: small Helvetica; - } - body { - margin: 20px; - } - .example { - color: #666; - } - .not_example { - color: #f99; - } - .case { - margin-bottom: 10px; - border: 1px solid #999; - padding: 0 10px; - } - pre { - border: 1px solid #999; - background: #efefef; - padding: 5px; - } - </style> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <title>jQuery Form Input Example Plugin</title> + <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</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"> - <p>The following field should contain the example text "Simple example".</p> - <p><input id="simple" type="text" /></p> -<pre><code>$('#simple').example('Simple example');</code></pre> - </div> - <div class="case"> - <p>The following field should contain the example text "Taken from the title" which is stored in its title attribute and set using a callback.</p> - <p><input type="text" id="callback" title="Taken from the title" /></p> - <pre><code>$('#callback').example(function() { - return $(this).attr('title'); -});</code></pre> - </p> - </div> - <div class="case"> - <p>The following field should contain the example text "Taken from the title and pink" in pink as it uses both a callback and the <code>class_name</code> option.</p> - <p><input type="text" id="callback_with_custom_class" title="Taken from the title" /></p> - <pre><code>$('#callback_with_custom_class').example(function() { + <h1>jQuery Form Input Example Plugin 1.3.2</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"> + <p>The following field should contain the example text "Simple example".</p> + <p><input id="simple" type="text" /></p> + <h3>HTML</h3> + <pre><code><input id="simple" type="text" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#simple').example('Simple example');</code></pre> + </div> + + <div class="case"> + <p>The following field should contain the example text "Taken from the title" which is stored in its title attribute and set using a callback.</p> + <p><input type="text" id="callback" title="Taken from the title" /></p> + <h3>HTML</h3> + <pre><code><input type="text" id="callback" title="Taken from the title" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#callback').example(function() { return $(this).attr('title'); +});</code></pre> + </p> + </div> + + <div class="case"> + <p>The following field should contain the example text "Taken from the title and pink" in pink as it uses both a callback and the <code>class_name</code> option.</p> + <p><input type="text" id="callback_with_custom_class" title="Taken from the title and pink" /></p> + <h3>HTML</h3> + <pre><code><input type="text" id="callback_with_custom_class" title="Taken from the title and pink" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#callback_with_custom_class').example(function() { +return $(this).attr('title'); }, {class_name: 'not_example'});</code></pre> - </p> - </div> - <div class="case"> - <p>The following fields should all have examples set from their title attribute.</p> - <p> - <input type="text" class="multiple_callback" title="Title 1" /> - <input type="text" class="multiple_callback" title="Title 2" /> - <input type="text" class="multiple_callback" title="Title 3" /> - </p> - <pre><code>$('.multiple_callback').example(function() { - return $(this).attr('title'); + </p> + </div> + + <div class="case"> + <p>The following fields should all have examples set from their title attribute.</p> + <p> + <input type="text" class="multiple_callback" title="Title 1" /> + <input type="text" class="multiple_callback" title="Title 2" /> + <input type="text" class="multiple_callback" title="Title 3" /> + </p> + <h3>HTML</h3> + <pre><code><input type="text" class="multiple_callback" title="Title 1" /> +<input type="text" class="multiple_callback" title="Title 2" /> +<input type="text" class="multiple_callback" title="Title 3" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('.multiple_callback').example(function() { + return $(this).attr('title'); });</code></pre> - </div> - <div class="case"> - <p>The following field should contain the example text "Forename" and the label and line-break before it should be hidden.</p> - <p> - <label for="first_name">First name</label><br /> - <input id="first_name" name="first_name" type="text" /><br /> - </p> -<pre><code>$('#first_name').example('Forename', { - hide_label: true + </div> + + <div class="case"> + <p>The following field should contain the example text "Forename" and the label and line-break before it should be hidden.</p> + <p> + <label for="first_name">First name</label><br /> + <input id="first_name" name="first_name" type="text" /> + </p> + <h3>HTML</h3> + <pre><code><label for="first_name">First name</label><br /> +<input id="first_name" name="first_name" type="text" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#first_name').example('Forename', { + hide_label: true });</code></pre> - </div> - <div class="case"> - <p>The following field should contain the example text "Boys 4pk Sports" and have no label and line-break preceding it despite setting "hide_label" to true (there wasn't anything to hide).</p> - <p> - <label for="description">Description</label><input id="description" name="description" type="text" /> - </p> -<pre><code>$('#description').example('Boys 4pk Sports', { - hide_label: true + </div> + + <div class="case"> + <p>The following field should contain the example text "Boys 4pk Sports" and have no label and line-break preceding it despite setting "hide_label" to true (there wasn't anything to hide).</p> + <p> + <label for="description">Description</label><input id="description" name="description" type="text" /> + </p> + <h3>HTML</h3> + <pre><code><label for="description">Description</label><input id="description" name="description" type="text" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#description').example('Boys 4pk Sports', { + hide_label: true });</code></pre> - </div> - <div class="case"> - <p>The following field should contain the example text "First!" in pink text and it should have a label and line-break before it reading "Comments".</p> - <p> - <label for="comments">Comments</label><br /> - <textarea id="comments" name="comments"></textarea> - </p> -<pre><code>$('#comments').example('First!', { - hide_label: false, - class_name: 'not_example' + </div> + + <div class="case"> + <p>The following field should contain the example text "First!" in pink text and it should have a label and line-break before it reading "Comments".</p> + <p> + <label for="comments">Comments</label><br /> + <textarea id="comments" name="comments"></textarea> + </p> + <h3>HTML</h3> + <pre><code><label for="comments">Comments</label><br /> +<textarea id="comments" name="comments"></textarea></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#comments').example('First!', { + hide_label: false, + class_name: 'not_example' });</code></pre> - </div> - <div class="case"> - <p>The following field should contain the example text "Type here..." in pink text.</p> - <p> - <textarea id="content"></textarea> - </p> -<pre><code>$('#content').example('Type here...', { - class_name: 'not_example' + </div> + + <div class="case"> + <p>The following field should contain the example text "Type here..." in pink text.</p> + <p> + <textarea id="content"></textarea> + </p> + <h3>HTML</h3> + <pre><code><textarea id="content"></textarea></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#content').example('Type here...', { + class_name: 'not_example' });</code></pre> - </div> - <div class="case"> - <p>The following fields should all contain the same example text of "Several at once."</p> - <p> - <input type="text" class="multiple" /> - <input type="text" class="multiple" /> - <input type="text" class="multiple" /> - <input type="text" class="multiple" /> - </p> -<pre><code>$('.multiple').example('Several at once.');</code></pre> - </div> - <div class="case"> - <p>The following field should have a value of "I already have a value" on page load but once cleared should have the example text of "This should not appear on page load."</p> - <p> - <input id="prefilled" type="text" value="I already have a value" /> - </p> + </div> + + <div class="case"> + <p>The following fields should all contain the same example text of "Several at once."</p> + <p> + <input type="text" class="multiple" /> + <input type="text" class="multiple" /> + <input type="text" class="multiple" /> + <input type="text" class="multiple" /> + </p> + <h3>HTML</h3> + <pre><code><input type="text" class="multiple" /> +<input type="text" class="multiple" /> +<input type="text" class="multiple" /> +<input type="text" class="multiple" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('.multiple').example('Several at once.');</code></pre> + </div> + + <div class="case"> + <p>The following field should have a value of "I already have a value" on page load but once cleared should have the example text of "This should not appear on page load."</p> + <p> + <input id="prefilled" type="text" value="I already have a value" /> + </p> + <h3>HTML</h3> + <pre><code><input id="prefilled" type="text" value="I already have a value" /></code></pre> + <h3>JavaScript</h3> <pre><code>$('#prefilled').example('This should not appear on page load.');</code></pre> - </div> - <div class="case"> - <p>The following field should contain the example text "Multiple class names".</p> - <p> - <input id="multiple_class_names" type="text" class="something anything"/> - </p> + </div> + <div class="case"> + <p>The following field should contain the example text "Multiple class names".</p> + <p> + <input id="multiple_class_names" type="text" class="something anything" /> + </p> + <h3>HTML</h3> + <pre><code><input id="multiple_class_names" type="text" class="something anything" /></code></pre> + <h3>JavaScript</h3> <pre><code>$('#multiple_class_names').example('Multiple class names');</code></pre> - </div> - - <div class="case"> - <p>The following field should contain the example text "This is one thing" taken from its <code>title</code> attribute but after focusing on it once, the example should change to "Not anymore".</p> - <p><input id="modifying_callback" title="This is one thing" type="text" /></p> - <pre><code>$('#modifying_callback').example(function() { - var text = $(this).attr('title'); - $(this).attr('title', 'Not anymore'); - return text; + </div> + + <div class="case"> + <p>The following field should contain the example text "This is one thing" taken from its <code>title</code> attribute but after focusing on it once, the example should change to "Not anymore".</p> + <p><input id="modifying_callback" title="This is one thing" type="text" /></p> + <h3>HTML</h3> + <pre><code><input id="modifying_callback" title="This is one thing" type="text" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#modifying_callback').example(function() { +var text = $(this).attr('title'); +$(this).attr('title', 'Not anymore'); +return text; });</code></pre> - </div> - - <div class="case"> - <p>The following three fields should have values of "Not example by default" in pink text as they are all styled with the CSS class name "not_example" by changing the plugin defaults.</p> - <p> - <input id="defaults_test_1" type="text" /> - <input id="defaults_test_2" type="text" /> - <input id="defaults_test_3" type="text" /> - </p> -<pre><code>$.fn.example.defaults.class_name = 'not_example'; + </div> + + <div class="case"> + <p>The following three fields should have values of "Not example by default" in pink text as they are all styled with the CSS class name "not_example" by changing the plugin defaults.</p> + <p> + <input id="defaults_test_1" type="text" /> + <input id="defaults_test_2" type="text" /> + <input id="defaults_test_3" type="text" /> + </p> + <h3>HTML</h3> + <pre><code><input id="defaults_test_1" type="text" /> +<input id="defaults_test_2" type="text" /> +<input id="defaults_test_3" type="text" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$.fn.example.defaults.class_name = 'not_example'; $('#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>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> - </div> - </form> - <form action="javascript:alert('Second form submitted, all examples within this form only should be cleared.');"> - <div class="case"> - <p>This field is inside a separate form and submitting it should only clear the values here, leaving the other form intact.</p> - <p><input id="second_form" type="text" /></p> - <p><input type="submit" /></p> - <pre><code>$('#second_form').example('Only I should be cleared when you click below');</code></pre> - </div> - </form> -  - <script type="text/javascript" src="jquery-1.2.3.pack.js" charset="utf-8"></script> - <script type="text/javascript" src="jquery.example.js" charset="utf-8"></script> -  - <script type="text/javascript" charset="utf-8"> - $(function() { - $('#modifying_callback').example(function() { - var text = $(this).attr('title'); - $(this).attr('title', 'Not anymore'); - return text; - }); - $('#callback').example(function() { - return $(this).attr('title'); - }); - $('#callback_with_custom_class').example(function() { - return $(this).attr('title'); - }, { class_name: 'not_example' }); - $('.multiple_callback').example(function() { - return $(this).attr('title'); - }); - $('#password').example('Test'); - $('#simple').example('Simple example'); - $('#first_name').example('Forename', { - hide_label: true - }); - $('#description').example('Boys 4pk Sports', { - hide_label: true - }); - $('#comments').example('First!', { - hide_label: false, - class_name: 'not_example' - }); - $('#content').example('Type here...', { - class_name: 'not_example' - }); - $('.multiple').example('Several at once.'); - $('#prefilled').example('This should not appear on page load.'); - - $('#multiple_class_names').example('Multiple class names'); - - $('#second_form').example('Only I should be cleared when you click below'); - - $.fn.example.defaults.class_name = 'not_example'; - $('#defaults_test_1').example('Not example by default'); - $('#defaults_test_2').example('Not example by default'); - $('#defaults_test_3').example('Not example by default'); - }); - </script> + </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> + </div> + </form> + + <form action="javascript:alert('Second form submitted, all examples within this form only should be cleared.');"> + <div class="case"> + <p>This field is inside a separate form and submitting it should only clear the values here, leaving the other form intact.</p> + <p><input id="second_form" type="text" /></p> + <p><input type="submit" /></p> + <h3>HTML</h3> + <pre><code><input id="second_form" type="text" /></code></pre> + <h3>JavaScript</h3> + <pre><code>$('#second_form').example('Only I should be cleared when you click below');</code></pre> + </div> + </form> + +  + <script type="text/javascript" src="jquery-1.2.3.pack.js" charset="utf-8"></script> + <script type="text/javascript" src="jquery.example.js" charset="utf-8"></script> +  + <script type="text/javascript" charset="utf-8"> + $(function() { + $('#simple').example('Simple example'); + + $('#callback').example(function() { + return $(this).attr('title'); + }); + + $('#callback_with_custom_class').example(function() { + return $(this).attr('title'); + }, { class_name: 'not_example' }); + + $('.multiple_callback').example(function() { + return $(this).attr('title'); + }); + + $('#first_name').example('Forename', { + hide_label: true + }); + + $('#description').example('Boys 4pk Sports', { + hide_label: true + }); + + $('#comments').example('First!', { + hide_label: false, + class_name: 'not_example' + }); + + $('#content').example('Type here...', { + class_name: 'not_example' + }); + + $('.multiple').example('Several at once.'); + + $('#prefilled').example('This should not appear on page load.'); + + $('#multiple_class_names').example('Multiple class names'); + + $('#modifying_callback').example(function() { + var text = $(this).attr('title'); + $(this).attr('title', 'Not anymore'); + return text; + }); + + $('#second_form').example('Only I should be cleared when you click below'); + + $.fn.example.defaults.class_name = 'not_example'; + $('#defaults_test_1').example('Not example by default'); + $('#defaults_test_2').example('Not example by default'); + $('#defaults_test_3').example('Not example by default'); + }); + </script> </body> </html> \ No newline at end of file index.html @@ -1,5 +1,5 @@ /* - * jQuery Example Plugin 1.3.1 + * jQuery Example Plugin 1.3.2 * Populate form inputs with example text that disappears on focus. * * e.g. @@ -13,8 +13,8 @@ * }); * * Copyright (c) Paul Mucur (http://mucur.name), 2007-2008. - * Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL License - * (GPL-LICENSE.txt). + * Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL (GPL-LICENSE.txt) + * licenses. * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by @@ -30,20 +30,24 @@ $.fn.example = function(text, args) { - /* Load the default options. */ + /* Merge the default options with the given arguments. */ var options = $.extend({}, $.fn.example.defaults, args); + /* Only calculate once whether a callback has been used. */ + var callback = $.isFunction(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. * 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. + * + * As of 1.3.2, the class names are stored as keys in the + * array, rather than as elements. This removes the need for + * $.inArray(). */ - var bound_class_names = $.fn.example.bound_class_names; - - /* If the class name is *not* in the array. */ - if ($.inArray(options.class_name, bound_class_names) == -1) { + if (!$.fn.example.bound_class_names[options.class_name]) { /* Because Gecko-based browsers "helpfully" cache form values * but ignore all other attributes such as class, all example @@ -57,7 +61,7 @@ /* Clear fields that are still examples before any form is submitted * otherwise those examples will be sent along as well. * - * Previous to 1.3, this would only be bound to forms that were + * Prior to 1.3, this would only be bound to forms that were * parents of example fields but this meant that a page with * multiple forms would not work correctly. */ @@ -68,11 +72,12 @@ }); /* Add the class name to the array. */ - bound_class_names.push(options.class_name); - $.fn.example.bound_class_names = bound_class_names; + $.fn.example.bound_class_names[options.class_name] = true; } return this.each(function() { + + /* Reduce method calls by saving the current jQuery object. */ var $this = $(this); /* Initially place the example text in the field if it is empty. */ @@ -80,16 +85,22 @@ $this.addClass(options.class_name); /* The text argument can now be a function; if this is the case, - * call it, passing the current jQuery object as `this`. + * call it, passing the current element as `this`. */ - $this.val($.isFunction(text) ? text.call(this) : text); + $this.val(callback ? text.call(this) : text); } - /* If the option is set, hide the associated label (and its line-break - * if it has one). - */ + /* DEPRECATION WARNING: I am considering removing this option. + * + * If the option is set, hide the associated label (and its line-break + * if it has one). + */ if (options.hide_label) { var label = $('label[@for=' + $this.attr('id') + ']'); + + /* The label and its line break must be hidden separately as + * jQuery 1.1 does not support andSelf(). + */ label.next('br').hide(); label.hide(); } @@ -102,6 +113,8 @@ * input. */ $this.focus(function() { + + /* jQuery 1.1 has no hasClass(), so is() must be used instead. */ if ($(this).is('.' + options.class_name)) { $(this).val(''); $(this).removeClass(options.class_name); @@ -118,7 +131,7 @@ * is not as efficient as caching the value, it allows for * more dynamic applications of the plugin. */ - $(this).val($.isFunction(text) ? text.call(this) : text); + $(this).val(callback ? text.call(this) : text); } }); }); @@ -131,10 +144,12 @@ */ $.fn.example.defaults = { class_name: 'example', + + /* DEPRECATION WARNING: I am considering removing this option. */ hide_label: false }; - /* All the class names used are stored in the following array. */ + /* All the class names used are stored as keys in the following array. */ $.fn.example.bound_class_names = []; })(jQuery); jquery.example.js @@ -1,5 +1,5 @@ /* - * jQuery Example Plugin 1.3.1 + * jQuery Example Plugin 1.3.2 * Populate form inputs with example text that disappears on focus. * * e.g. @@ -13,8 +13,8 @@ * }); * * Copyright (c) Paul Mucur (http://mucur.name), 2007-2008. - * Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL License - * (GPL-LICENSE.txt). + * Dual-licensed under the BSD (BSD-LICENSE.txt) and GPL (GPL-LICENSE.txt) + * licenses. * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by @@ -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(E,D){var C=A.extend({},A.fn.example.defaults,D);var B=A.fn.example.bound_class_names;if(A.inArray(C.class_name,B)==-1){A(window).unload(function(){A("."+C.class_name).val("")});A("form").submit(function(){A(this).find("."+C.class_name).val("")});B.push(C.class_name);A.fn.example.bound_class_names=B}return this.each(function(){var G=A(this);if(G.val()==""){G.addClass(C.class_name);G.val(A.isFunction(E)?E.call(this):E)}if(C.hide_label){var F=A("label[@for="+G.attr("id")+"]");F.next("br").hide();F.hide()}G.focus(function(){if(A(this).is("."+C.class_name)){A(this).val("");A(this).removeClass(C.class_name)}});G.blur(function(){if(A(this).val()==""){A(this).addClass(C.class_name);A(this).val(A.isFunction(E)?E.call(this):E)}})})};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);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(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 jquery.example.min.js bb690cdcb4395247a0ac9559768ea221fa03163c Paul Mucur mudge@mudge.name http://github.com/mudge/jquery_example/commit/cf4ef3848365e87a7e069fefd3d4c4af2ce73435 cf4ef3848365e87a7e069fefd3d4c4af2ce73435

2008-03-13T04:03:25-07:00

Reduced the number of function calls and improved the index.html. ba83aabd57a12994c7c19e81f3be225135d90dec Paul Mucur mudge@mudge.name