jQuery Super Labels Plugin with Label-Over-Field Method

File Size: 75 KB
Views Total: 487
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Super Labels Plugin with Label-Over-Field Method

A sexy jQuery Super Labels Plugin that makes the label slide across the field when gaining focus and fade out when a value is entered.

Features:

  • Tweakable
  • Character Limit
  • Placehold

Basic Usage:

1. Markup

<form action="" method="POST">
<ul>
<li>
<label for="text-input">Name</label>
<input type="text" name="text-input" value="" />
</li>
<li>
<label for="textarea">Message</label>
<textarea rows="2" cols="20" name="textarea"></textarea>
</li>
<li>
<label for="select">Why is the sky blue?</label>
<select rows="2" cols="20" name="select">
<option value="1">It's painted blue.</option>
<option value="2">Why not?</option>
<option value="3">Rayleigh scattering.</option>
</select>
</li>
</ul>
</form>

2. Include necessary CSS files in your head section

<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="css/prism.css" type="text/css" rel="stylesheet" />

3. Include necessary javascript files on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script> 
<script src="scripts/prism.js" type="text/javascript"></script> 
<script src="../jquery.superLabels.js" type="text/javascript"></script> 

4. Call the plugin

$(function() {
	$('form').superLabels({
		labelLeft:5,
		labelTop:5
	});
});

Change Log:

v2.0.3 (2013-03-06)


This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.