me encontré con el mismo problema: lo necesitaba para mostrar: activar/desactivar/ignorar
Basado en los iconos a vailable en jquery ui() creé siguiente código (Sé que no es un plug-in, pero que no era necesario en mi caso):
El HTML que uso es:
<input type="text" class="rotatestate" value="true"
data-state-style="cursor:pointer"
data-state-class="ui-icon"
data-state-values='[{"value":"true","class":"ui-icon-check","title":"title for true"},{"value":"false","class":"ui-icon-radio-off","title":"title for off"},{"value":"null","class":"ui-icon-cancel","title":"title for third state"}]'/>
El control se realiza el JSON matriz en-estado-valores de datos para mayor cantidad de estados que desea girar a través de:
- valor: el valor que se introducirá en la entrada
- clases: clase CSS (es) que el nuevo tramo se tener
- título: un título opcional que se encuentra en el lapso creado
Es, básicamente, crea un elemento <span class="data-state-class + classOfState" title="titleOfState"> y al hacer clic actualiza por cacling a través de la lista de valores dado.
Lo codifiqué para que incluso permita el cambio a través de otros medios (es decir, establezca el valor de la entrada directamente) y actualice el "control" cuando $ ("input"). Change(); evento se desencadena.
El código jQuery que lo maneja:
/* rotatestate stontrol */
$("input.rotatestate", location).each(function(){
var states = $(this).attr("data-state-values");
var defaultClass = $(this).attr("data-state-class");
// no need to continue if there are no states
if(!states) {
return;
}
try {
states = JSON.parse(states);
} catch (ex) {
// do not need to continue if we cannot parse the states
return;
}
var stateControl = $("<span></span>");
if($(this).attr("data-state-style")) {
stateControl.attr("style", $(this).attr("data-state-style"));
}
stateControl.data("states", states);
stateControl.data("control", this);
stateControl.data("activeState", null);
$(this).data("control", stateControl);
if(defaultClass) {
stateControl.addClass(defaultClass);
}
// click on the control starts rotating
stateControl.click(function(){
var cState = $(this).data().activeState;
var cStates = $(this).data().states;
var control = $(this).data().control;
var newState = null;
if(cState != null) {
// go to the 'next' state
for(var i = 0; i < cStates.length; i++) {
if(cStates[i].value === cState.value) {
// last element
if(i === cStates.length - 1) {
newState = cStates[0];
} else {
newState = cStates[i+1];
}
break;
}
}
} else {
// no state yet - just set the first
newState = cStates[0];
}
$(control).attr("value", newState.value);
// trigger change
$(control).change();
});
// make sure to update state if the value is changed
$(this).change(function(){
var control = $($(this).data().control);
var cState = control.data().activeState;
var cStates = control.data().states;
if(cState != null) {
// remove "old state"
control.removeClass(cState['class']);
}
// add new State
var val = $(this).val();
$.each(cStates, function(){
if(this.value === val) {
control.data().activeState = this;
if(this.title) {
control.attr("title", this.title);
}
control.addClass(this['class']);
return false;
}
});
});
// trigger initial state
$(this).change();
$(this).after(stateControl);
$(this).hide();
});
El control también es parte de mi Controles de Formulario Biblioteca de https://github.com/corinis/jsForm/wiki/Controls.
¿Cuál es el tercer estado, [FileNotFound] (http://thedailywtf.com/Articles/What_Is_Truth_0x3f_.aspx)? – R0MANARMY
Los tres estados son nulos, verdaderos y falsos. – user336786
Tal vez [este] (http://stackoverflow.com/questions/1726096/tri-state-check-box-in-html/1727191#1727191) pregunta dará algunas pistas –