A custom input type is an HTML construction for which you provide get and set methods. It can be you own calendar control or a slider.
The declaration of a new input type is done with a call to jQuery.iField.registerInputType(inputTypeName, settings).
get() function that reads the value present in the custom input. If omitted, the value is retrieved with the jQuery val() method.set(value) function that writes the given value to the custom input. If omitted, the value is set with the jQuery val(value) method.detect(field) function called once when a field input type is not set. The function must return true if the HTML is recognized as this input type. For example the 'checkbox' detect function verifies that the input tagName is "INPUT" and the input type is "checkbox".onInit() function called once when the field is initialized. It is the right place to add event handlers and other custom initializations.changeEvents array of event names that have to be bound, and the are needed to detect input value changes.The following example registers a TriState input type. It is a checkbox that can have three values: true, false and undefined. It is simulated with images.
Test it here:
jQuery.iField.registerInputType('tristate',{
get:function(){
var value=undefined;
var src=this.ctl[0].src;
var i=src.lastIndexOf('/');
if(i!=-1)
src=src.substring(i+1);
if(src==='tristate_true.gif'){
value=true;
}else if(src==='tristate_false.gif'){
value=false;
}
return value;
},
set:function(value){
if(typeof(value)!=='boolean')
value=undefined;
this.ctl[0].src=
'images/tristate_'+
(value===undefined?'undefined':value.toString())+
'.gif';
return value;
},
onInit:function(){
var nextState=function(ev){
var value=ev.target.field.get();
//Determine the next state, cycling in this order:
//undefined -> false -> true
if(value===undefined)
value=false;
else if(value==false)
value=true;
else
value=undefined;
ev.target.field.set(value);
ev.target.field.fieldChanged();
return false;
}
this.ctl.keydown(function(ev){
if(ev.keycode===32)return nextState(ev);
});
//We want two close clicks (interpreted by the system
//as a double click) to generate two calls to nextState
//On IE, a double click fires a single click followed
//by a double, so we call nextState on both.
//On FireFox, a double click fires two clicks followed
//by a double, sa calling nextState on click is enough.
this.ctl.click(nextState);
if(jQuery.browser.msie)
this.ctl.dblclick(nextState);
},
changeEvents:[]
});
Usage:
$(document).ready(function(){
$.iField.create('tri',{
inputType:'tristate',
initialValue:true
}).onInit();
});