This time I will share jQuery Plugin and tutorial about jQuery Plugin For Text Field Float Label – floatlabels.js, hope it will help you in programming stack.
floatlabels.js is a jQuery plugin to create an animated text label floating within the input text field when the user starts typing, inspired by Matt D. Smith‘s float label concept. By default, the plug will use the placeholder
attribute as the label text, you can custom the text and style by using data-label
and data-class
attributes.
Basic Usage:
1. Create an text input field on the web page.
1 |
< input type = "text" class = "demo" placeholder = "User Name" data-label = "Your User Name" data-class = "red-label" /> |
2. Include the jQuery library and floatlabels.js on your web page.
2 |
< script src = "floatlabels.js" ></ script > |
3. Initialize the plugin.
2 |
$(document).ready( function () { |
3 |
$( '.demo' ).floatlabel(); |
4. Available configurations.
01 |
$( '.demo' ).floatlabel({ |
07 |
labelStartTop : '20px' , |
12 |
paddingOffset : '12px' , |
15 |
transitionDuration : 0.3, |
18 |
transitionEasing: 'ease-in-out' , |
26 |
typeMatches : /text|password|email|number|search|url/, |
28 |
focusColor : '#8F6593' , |
Change log:
2016-11-03
- Added support for ‘tel’ input type
2014-08-06
- Added support for ‘tel’ input type
This awesome jQuery plugin is developed by probots-io. For more Advanced Usages, please check the demo page or visit the official website.