jQuery Knob è un piccolo plugin che rende più semplice e interessante l’inserimento di un valore numerico all’interno di un controllo. Il plugin trasforma il controllo testuale in un pomello che può essere ruotato per modificare il valore numerico inserito nel controllo. Il valore inserito nel campo può essere controllato con il mouse, con la tastiera o con le dita, nei dispositivi touch. 

jQuery Knob è basato su canvas e non richiede immagini esterne. Inoltre, supporta gli eventi di tocco, rendendolo adatto non solo ai computer di ogni tipo ma anche ai dispositivi mobili.

jQuery Knob: un'alternativa per compilare i campi numerici

jQuery Knob: un’alternativa per compilare i campi numerici

Usare jQuery Knob

Per usare jQuery Knob, disporre l’elemento input a cui applicare il plugin all’interno del documento web.

<p><input type="text" value="75" class="demo"></p>

Scaricare jQuery e il plugin dal sito ufficiale e poi includerlo all’interno del proprio documento, subito prima del tag di chiusura dell’elemento body.

<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/jquery.knob.min.js"></script>
</body>
</html>

Aggiungere un altro elemento script e, al suo interno, selezionare l’elemento a cui associare il plugin e attivarlo con il metodo .knob().

<script src="js/jquery-3.0.0.min.js"></script>
 <script src="js/jquery.knob.min.js"></script>
 <script>
   $(function() {
     $(".demo").knob();
   });
 </script>
 </body>
 </html>

jQuery Knob consente anche di controllare il range di valori ammessi nel controllo. Nell’esempio successivo, i valori che possono essere inseriti nel controllo variano da -50 a +50.

<script>
 $(function() {
   $(".demo").knob({
   'min':-50,
   'max':50
   });
 });
</script>

Nell’esempio precedente, il range di valori è indicato all’interno di un oggetto JSON che viene utilizzato per configurare il plugin.

Se si preferisce, il range di valori può anche essere indicato negli attributi data-min e data-max posti direttamente all’interno dell’elemento a cui applicare il plugin.

<p><input type="text" class="demo" data-min="-50" data-max="50" value="10"></p>

La lista completa delle opzioni del plugin è disponibile nel sito ufficiale che contiene anche diverse demo molto efficaci.

jQuery Knob è compatibile con Chorme, Safari, Firefox e Internet Explorer a partire dalla versione 8, ma solo con excanvas.