StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I came across the same issue - i needed it to show: enable/disable/ignore</p> <p>Based on the icons available in jquery ui (<a href="http://jqueryui.com/themeroller/" rel="nofollow">http://jqueryui.com/themeroller/</a>) I created following code (I know its not a plugin, but that wasnt necessary in my case):</p> <p>The HTML I use is:</p> <pre><code><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"}]'/> </code></pre> <p>The control takes the json array in data-state-values for as many states as you want to rotate through:</p> <ul> <li>value: the value that will be entered in the input</li> <li>class: css class(es) that the new span will have</li> <li>title: an optional title that will be set in the created span</li> </ul> <p>It basically creates a <code><span class="data-state-class + classOfState" title="titleOfState"></code> element and on click updates it by cacling through the given value list.</p> <p>I coded it so it even allows change through other means (i.e. setting the value of the input directly) and updates the "control" when the $("input").change(); event is triggered.</p> <p>The jquery code that handles it:</p> <pre><code>/* 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(); }); </code></pre> <p>The control is also part of my Form Controls Library on <a href="https://github.com/corinis/jsForm/wiki/Controls" rel="nofollow">https://github.com/corinis/jsForm/wiki/Controls</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload