You can use this plugin to show a background image into a HTML password input element to indicate the strength of the password.
This plugin has been probed in the last versions of Firefox, Opera, Internet Explorer and Safari, with jQuery 1.2 version.
Use is quite simple, as you can view in the example that include the plugin. Bassically you can attach and detach password meters into HTML password input:
$('input#mypassword').attachPassMeter();
To detach a password meter you can use the other public method:
$('input#mypassword').detachPassMeter();
You can especify some options to the plugin when call to the first method. The default options are this:
var options = {
useSkin: 'default',
skinsPath: './skins/',
bgRepeat: 'no-repeat',
bgPosition: 'center right'
};
$('input#mypassword').attachPassMeter(options);
The most important options are the "skinsPath", used by plugin to find the appropiate skin to use their images to show the password meters.
You can specify another skin, wich corresponde with a subfolder of skins directory, and can contain different images to show the password meter level.
This plugin is inspired by Password strength meter jQuery plugin by Firas Kassem. In fact, the main methods of the plugin is taken from the plugin of Firas. Thanks!
Thanks so much too Mike Alsup for their article jQuery plugin pattern.