Examples

Text box , Text area , Password

Text :
Password :
Text area :

<label>Text :</label>
<input id="Text1" class="myClass" type="text" value="Name" name="textBox" />
<label>Password :</label>
<input id="Password1" type="password" name="password" />
<label>Text area :</label>
<input id="Checkbox3" name="Checkbox3" type="checkbox" />

Copy

Events

All events work normally like regular input

Disable

$(elements).fancyfields("disable");

Copy

Enable

$(elements).fancyfields("enable");

Copy

Toggle enable

$(elements).fancyfields("toggleEnable");

Copy

Clean

$(elements).fancyfields("clean");

Copy

*Clean - clean the input

Reset

$(elements).fancyfields("reset");

Copy

*Reset - reset input to init state

Clean on focus

By default -
Textbox and Textarea clean when focus with first value,
return to first value when focus out when empty.
For change this use cleanOnFocus option

On init

$(elements).fancyfields({
cleanOnFocus: false
});

Copy

After init

$(elements).fancyfields("option","cleanOnFocus", false);

Copy

Checkboxes

Checkbox 1 Checkbox 2 Checkbox 3

<input id="Checkbox1" name="Checkbox1" type="checkbox" checked="checked" />
<label>Checkbox 1</label>
<input id="Checkbox2" name="Checkbox2" type="checkbox" disabled="disabled" />
<label>Checkbox 2</label>
<input id="Checkbox3" name="Checkbox3" type="checkbox" />
<label>Checkbox 3</label>

Copy

On init

$(elements).fancyfields({
    onCheckboxChange: function (input, isChecked) {
        alert("ID : " + input.attr("id") + " Is checked : " + isChecked);
    }
});

Copy

Bind (after init)

$(elements).fancyfields("bind", "onCheckboxChange", function (input, isChecked){
alert("ID : " + input.attr("id") + " Is checked : " + isChecked);
});

Copy

Unbind (after init)

$(elements).fancyfields("unbind","onCheckboxChange");

Copy

Disable

$(elements).fancyfields("disable");

Copy

Enable

$(elements).fancyfields("enable");

Copy

Toggle enable

$(elements).fancyfields("toggleEnable");

Copy

Clean

$(elements).fancyfields("clean");

Copy

*Clean - unchecked the elemnets if checked

Reset

$(elements).fancyfields("reset");

Copy

*Reset - reset elements to init state

Manual triggers

For manual trigger use the regular way of Jquery

$(elements).trigger("click");

Copy

Or
$(elements).click();

You can also use the checked & unchecked functions

Checked

$(elements).fancyfields("checked");

Copy

Unchecked

$(elements).fancyfields("unchecked");

Copy

Label doesn't require "FOR" attribuate , but label has to be right after input

Radio buttons

Radio 1 Radio 2 Radio 3

<input id="Radio4" type="radio" name="group1" value="radio1" />
<label>Radio 1</label>
<input id="Radio5" type="radio" name="group1" checked="checked" value="radio2"/>
<label>Radio 2</label>
<input id="Radio6" type="radio" name="group1" value="radio3" disabled="disabled"/>

Copy

On init

$(elements).fancyfields({
    onRadioChange: function (input){
        alert("ID : " + input.attr("id") + " Val : " + input.val());
    }
});

Copy

Bind (after init)

$(elements).fancyfields("bind","onRadioChange", function (input){
alert("ID : " + input.attr("id") + " Val : " + input.val());
});

Copy

Unbind (after init)

$(elements).fancyfields("unbind","onRadioChange");

Copy

Disable

$(elements).fancyfields("disable");

Copy

Enable

$(elements).fancyfields("enable");

Copy

Toggle enable

$(elements).fancyfields("toggleEnable");

Copy

Clean

$(elements).fancyfields("clean");

Copy

*Clean - unchecked the elemnets if checked

Reset

$(elements).fancyfields("reset");

Copy

*Reset - reset elements to init state

Manual triggers

For manual trigger use the regular way of Jquery

$(elements).trigger("click");

Copy

Or
$(elements).click();

GroupVal() function

alert($.fancyfields.GroupVal("groupName"));

Copy

Label doesn't require "FOR" attribuate , but label has to be right after input
Use groupVal() to obtain the group selected value

Select

<select id="Select1" name="select1">
    <option value="0">select</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">b option 4</option>
    <option value="5">b option 5</option>
    <option value="6">b option 6</option>
    <option value="7">c option 7</option>
    <option value="8">c option 8</option>
    <option value="9">c option 9</option>
    <option value="10">d option 10</option>
    <option value="11" selected="selected">d option 11</option>
    <option value="12">d option 12</option>
    <option value="13">e option 13</option>
    <option value="14">e option 14</option>
    <option value="15">e option 15</option>
    <option value="16">f option 16</option>
    <option value="17">f option 17</option>
    <option value="18">f option 18</option>
    <option value="19">g option 19</option>
    <option value="20">g option 20</option>
    <option value="21">g option 21</option>
    <option value="22">h option 22</option>
    <option value="23">h option 23</option>
    <option value="24">h option 24</option>
</select>

Copy

Bind (after init)

$(elements).fancyfields("bind","onSelectChange", function (input,text,val){
alert("Current input - ID : "+input.attr("id") + " , selected text : " + text + " , value : " + val);
});

Copy

Unbind (after init)

$(elements).fancyfields("unbind","onSelectChange");

Copy

On init

$(elements).fancyfields({
    onSelectChange: function (input,text,val){
        alert("Current input - ID : "+input.attr("id") + " , selected text : " + text + " , value : " + val);
    }
});

Copy

Disable

$(elements).fancyfields("disable");

Copy

Enable

$(elements).fancyfields("enable");

Copy

Toggle enable

$(elements).fancyfields("toggleEnable");

Copy

Clean

$(elements).fancyfields("clean");

Copy

*Clean - set select to first val

Reset

$(elements).fancyfields("reset");

Copy

*Reset - reset elements to init state

Manual triggers

*Manual triggers will not work here.
the value of input will change but select text will not change.
you have to use setVal() function in this case.

setVal() function

$(elements).setVal(val);

Copy

setOptions() function

var listOptions = [["select","0"],["option1", "1"],["option2", "2"], ["optionval3"]];
$("#Select2").setOptions(listOptions);

Copy

Function get array of arrays with 2 ["text","value"] values or 1 ["text and value"] value

Full keybord support
Use setVal() to set the select value
Use setOptions() to change the select options

Select with custom scroll bar

For custom scroll bar first add fancy fields custom scrol bar add-on.
<script type="text/javascript" src="path/to/file/fancyfields.js"></script>
You have to set the custom scroll bar option when Init on element.
$("elements").fancyfields({ customScrollBar:true });

Options

Option	Type	Defult	Description
appendInputClassToWrapper	Boolean	false	Append the classes from the input to the wrapper element.
cleanDisableOnClean	Boolean	false	Clean input if disabled on clean.
enableOnClean	Boolean	false	Enable input if disabled on clean.
cleanOnFocus	Boolean	true	Clean the default value of textbox and text area when focus and bring back if focus out without value.
exclude	String	null	Exclude element/s if Init on container. Get String of selectors Comma separated. Exam: $("#MyContainer").fancyfields({exclude:"#myObj,.myExcludeClass,:checkbox"});
continueTypingSpees	Int (ms)	1000	The timeout for reset search keyword while typing.
customScrollBar	Boolean	false	Custom scroll bar for select box Option have to set on Init Required add fancyfields.csb.min.js script file.

Events

Event	Return	Description
onCheckboxChange	input - current input as jqury object isChecked - True/false	Calls when checkbox change. Example
onRadioChange	input - current input as jqury object,	Calls when radio change. Example
onSelectChange	input - current input as jqury object, text - current text, val - current value	Calls when select change. Example

Methods

There is exampls for each input type in his sections

Method	Description	Example
option / bind	Set option value.	$("elemnts").fancyfields("bind","optionName",value);
unbind	Remove option value or event.	$("elemnts").fancyfields("unbind","optionName");
disable	Disable input.	$(elements).fancyfields("disable");
enable	Enable input.	$(elements).fancyfields("enable");
toggleEnable	Toggle enable\disable.	$(elements).fancyfields("toggleEnable");
clean	Clean input. Can be set on elements or container.	$(elements).fancyfields("clean"); $("#container").fancyfields("clean");
reset	Reset input - return element to default position. Can be set on elements or container	$(elements).fancyfields("reset"); $("#container").fancyfields("reset");
checked / unchecked	Checked / Unchecked checkbox.	Example
setVal	Set value for select box.	Example
setOptions	Change the option list for select box.	Example