Fancyform

Fancyform is a tool that offers a nice and elegant way to transform your HTML elements into custom styled elements. It is build on the Javascript framework jQuery and is easy to implement and customize. The elements you can style are input:radio, input:checkbox, select and textarea.

Now also available on GitHub!

Radio button

You can transform your own radio button into any image you want to use. If an image is clicked the radio button will be checked and the $("input:radio").change(); event will be triggered.

Image:
Yes No Unknown
$("input:radio").transformRadio({
	checked : "img/chk_on.png", 	// Checked image to show
	unchecked : "img/chk_off.png"	// Unchecked image to show
});
Class:
Yes No Unknown
$("input:radio").transformRadio({
	base : "class" // Can be image or class, if class a span will be added
});

Checkbox

You can transform your own checkbox into any image you want to use. If an image is clicked the checkbox will be checked and the $("input:checkbox").change(); event will be triggered.
It is also possible to use the checkboxes as a Tri-State the, if you put them in and UL LI treeview.

Image:
Optie Optie
Optie Optie
Optie Optie
Class:
Optie Optie
Optie Optie
Optie Optie
$("input:checkbox").transformCheckbox({
	checked: "/images/content/filterBoxCheckboxChecked.jpg", // Checked image
	unchecked: "/images/content/filterBoxCheckbox.jpg",		// Unchecked image
	disabledChecked : "/images/content/filterBoxCheckboxDisabledChecked.jpg", // Disabled checked image
	disabledUnchecked : "/images/content/filterBoxCheckboxDisabledUnChecked.jpg", // Disabled unchecked image
	tristateHalfChecked : "/images/content/filterBoxCheckboxDisabledUnChecked.jpg", // Tri-state image
	changeHandler: function (is_checked) { }, // handler when checkbox is clicked
	trigger: "self", // Can be self, parent
	tristate : false // Use tri state? need to be ul > li > checkbox // ul > li > ul > li > checkbox
});

Tri-State

$("input:checkbox").transformCheckbox({
			checked: "/images/content/filterBoxCheckboxChecked.jpg", // Checked image
			unchecked: "/images/content/filterBoxCheckbox.jpg",		// Unchecked image
			tristateHalfChecked : "/images/content/filterBoxCheckboxDisabledUnChecked.jpg", // Tri-state image
			tristate : true // Use tri state? need to be ul > li > checkbox // ul > li > ul > li > checkbox
		});

Select (dropdown list)

The SELECT will be changed into a UL list, it is possible to use the default SELECT, OPTION and OPTGROUP to transform it into something you want. When the SELECT is opened, the opened LI will have a class .open, so you can define new styles to an opened dropdown.

Without fancyform


With fancyform (default settings)

$("#select").transformSelect();

Transformselect with manual input

$("#select2").transformSelect({
	acceptManualInput : true,
	showFirstItemInDrop : false
});

Transformselect using multiple

$("#select3").transformSelect({
					showFirstItemInDrop : false
				});

All options

dropDownClass: "transformSelect", 	// Class of the main UL
showFirstItemInDrop: true, 		// Show or hide the first item within the dropdown (e.g. "Select a country")
acceptManualInput: false, 		// You want to be able to type your own value? ({name}_backup will be created with a new input {name})
useManualInputAsFilter : false,		// Use the manual input as a filter (add data-settings='{"alwaysvisible" : true}' to the option if you don't want the element to hide)

subTemplate: function () { return "" + $(this).text() + ""; }, 	// The template of the LI within the dropdown
initValue: function () { return $(this).text(); },		// The inital value of the  of the selected element
valueTemplate: function () { return $(this).text(); }, 		// The selected value, after initial value	

ellipsisLength: null // The max length of the selected text 

Using jQuery validate plugin

jQuery.validator.addMethod("fancyformSelect", function(value, element, param) {
	$(element).nextAll("ul:first")[element.selectedIndex ? "removeClass" : "addClass"]("error");
	return element.selectedIndex;
});
		

Textarea:

You can add custom slider to the textarea!

// Apply the transform
$("textarea").transformTextarea();
	
// Use a custom slider	
$( "#slider" ).slider({
	orientation: "vertical",
	range: "min",
	min: 0,
	max: 100,
	value: 100,
	slide: function( event, ui ) {
		// Top = 0
		var perc = 100 - ui.value;
		
		// Scroll textarea to given percentage
		$("textarea").transformTextarea("scrollToPercentage", perc);
	}
});

// Move the slider to the scrollHeight of the textarea
$("textarea").bind("scrollToPx", function(e, px, percentage){
	$( "#slider" ).slider("option", "value", 100 - percentage);	
});

License / Download

Fancyform dual licensed under the MIT and GPL licenses.

Developers version | Minified version

Help us keep the projects running.

or
Click here to lend your support to: Fancyform and make a donation at www.pledgie.com !