Developed by William Duffy
jLabel is a jQuery plugin that formats text input fields with unobtrusive labels featuring
interactive suggestions. This allows input fields to be labelled clearly and presented with
minimal interface obstruction.
Examples of jLabel in action
Pre Labelled
Pre labelled is the suggested method for implementing jLabel. By creating the text field's label in your html markup there are no usability restrictions on javascript disabled browsers. This enables jLabel to apply progressive enhancement on your text fields. To see this in action disable javascript in your browser.
<label for="prelabel_example1">First Name</label>
<input type="text" id="prelabel_example1" />
<label for="prelabel_example2">Last Name</label>
<input type="text" id="prelabel_example2" />
<input type="text" id="prelabel_example1" />
<label for="prelabel_example2">Last Name</label>
<input type="text" id="prelabel_example2" />
Post Labelled
In the instance that jLabel cannot find a related label in your markup it will create a new one. This label's text is based on the value in its related text field title attribute. jLabel will then insert this into the DOM directly before the text field.
<input type="text" id="postlabel_example1" title="First Name" />
<input type="text" id="postlabel_example2" title="Last Name" />
<input type="text" id="postlabel_example2" title="Last Name" />
Customised Options
jLabel allows customisation of its animation, opacity and label positions.These can be specified either globally or per selector.
$.fn.jLabel.defaults.speed = 1000;
$.fn.jLabel.defaults.opacity = 0.1;
or...
$(':text').jLabel({ speed : 1000, opacity : 0.1 });
$.fn.jLabel.defaults.opacity = 0.1;
or...
$(':text').jLabel({ speed : 1000, opacity : 0.1 });
Getting started with jLabel is easy
First, you need to ensure that you have jQuery included in your page. If you have never used jQuery before I would recommend reading this quick introduction.To jLabel every text field on the page use the following syntax:
$(':text').jLabel();
If you wish to jLabel a specific text field you can use jQuery's ID selector:
$('#your_element_id').jLabel();
Or, to jLabel a group of text fields you can use jQuery's class selector:
$('.your_class').jLabel();
Of course, you can also use any jQuery selector to jLabel your text fields.
Why use jLabel?
Listed are a few of the nice features that help set jLabel apart from similar plugins:- jLabels are kept visible until the input field's first character is typed
- jLabels are reinstated as soon as the input field's final character is deleted
- jLabel adheres to the concepts of Progressive Enhancement and Graceful Degradation
- jLabel correctly handles pre-populated fields and ASP.NET's viewstate postback model
- jLabel allows control over positioning of the input field's label, animation speed and opacity
- jLabel fully supports jQuery's method chaining idiom
- jLabels do not obstruct interaction with their related text field
- jLabels cannot have their text selected
- jLabels cursors mimic their related text field cursor
- jLabels can be targeted and configured individually and collectively
- jLabels automatically relocate themselves in the DOM relative to their relateted text fields
- jLabels automatically positions and format themselves to mimic that of their related text field