Fancy Form

A jQuery plugin to style form elements while keeping the original form for people without javascript.
© 2008 the people's valley

Version control

• Version 1.2 (test) Release date 12-11-2008: Added the lazyPulldown; fixed the way input[type=text] and input[type=password] are rendered.
• Version 1.1.1 (test) Release date 10-11-2008: IE fix pulldown
• Version 1.1 (test) Release date 05-11-2008: Multiple fix
• Version 1.0 (test) Release date 05-11-2008: Initial release

Known issues

• cannot click the arrow in pulldown menu's in IE7
• File browser not showing in IE8

How to use

• Create a form like you usually do
• Add jQuery to your project
• Add the jquery-fancyform.js to your project
• Enable the plugin by calling:

  $(window).load(function () {
  	$("form").fancyForm();
  });

  If you don't load the plugin with $(window).load but $(document).ready Webkit based browsers (safari/chrome) might not render multiple input elements correctly
• Override the default properties if needed
• Create images for the style to use
• Edit the fancyform.css to include your new style
• enjoy your fully themed forms!

Properties

1. theme: <String> defaults to "fancy"; name of the theme to use; you can define more then one theme in a page and switch themes example
2. debug: <Boolean> defaults to true; Do you want a notification if the theme is not found? example
3. pulldownItems: <Number> defaults to 10; how many items do you want to be displayed in a pulldown menu? example
4. lazyPulldown: <Boolean> defaults to false; The pulldownwidth in a lazyPulldown is dynamic; while the pulldownwidth in a strictPulldown is fixed example

Images

Every theme uses it's own images which you can group in a folder; since you create the theme you can use your own naming scheme.
You can either make images for normal and active state seperate or put them in 1 image; if you decide to put them together in one file you can switch between accoring to this example:

.fancy .checkbox {
	background: url(../images/checkbox.gif) no-repeat 0 0;
	width: 15px;
	height: 13px;
}
.fancy .checkboxactive {
	background: url(../images/checkbox.gif) no-repeat 0 -13px;
	width: 15px;
	height: 13px;
}