<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"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;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.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">
<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>
<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" />
</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>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>
</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.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">
$(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;
});
$('#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';
$('#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>
