jQuery plugins - jQuery Knob
jún 22

jQuery Knob

Kör alakú szabályzó

Verzió: 1.1.2
Kiadás dátuma: 2012/05/22
Fejlesztő: Anthony Terrien
Liszensz: MIT, GPL
  • 1156
  • 6246
  • 0
  • -

Bevezető

A plugin-t a WebTechnikák oldalán találtam s mivel nem található hozzá részletes (magyar nyelvű) leírás, valamint maga az eszköz is említésre méltó, gondoltam ő lesz a mostani bejegyzés "főhőse".

Főhősünkkel egy egyszerű input mezőből tudunk egy kör alakú szabályzót készíteni. Az opciók segítségével részletesen testreszabhatjuk működését, pl. továbbra is használhatjuk a hagyományos beviteli formát (billentyűzetet használva), de használhatjuk hozzá az egeret is (tekergetve a szabályzót ide-oda), vagy akár az egérgörgő segítségével is növelhetjük/csökkenthetjük az input mező értékét.

Implementálás

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.knob.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda').knob();
            });
          

A plugin HTML5 támogatott, így az opciókat az input mező részeként is megadhatjuk:

            <input id="pelda" data-fgColor="#ffec03" data-thickness=".2" value="75" />
          

Teljes paraméterlista

  • min: minimális érték (alapértelmezett: 0)
  • max: maximális érték (alapértelmezett: 100)
  • stopper: a paraméter tiltásával a szabályzó a minimális és a maximális értékek által behatárolt tartományon kívül eső értékeket is felvehet (alapértelmezett: true)
  • readOnly: 'csak olvasható' mód engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • angleOffset: a szabályzó kezdőértékének pozíciója fokban (alapértelmezett: 0)
  • cursor: a szabályzó sávjának működési módja: true esetén egy kis körcikkely mutatja az értéket, false érték esetén pedig szemlélteti az egész lefedett tartományt (true | false) (alapértelmezett: true)
  • thickness: a szabályzó vastagsága százalékos formában, ahol 100% a kör éle és középpontja közti távolság (alapértelmezett: 0.35)
  • width: a szabályzó szélessége képpontban (alapértelmezett: 200)
  • displayInput: a beviteli mező megjelenésének engedélyezése/tiltása (true | false)
    (alapértelmezett: true)
  • displayPrevious: a szabályzót "tekerve" a tekerés előtti érték áttetsző megjelenítésének engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • fgColor: a szabályzó színének hexadecimális kódja (alapértelmezett: '#87CEEB')
  • bgColor: a szabályzó háttérszínének hexadecimális kódja (alapértelmezett: '#EEEEEE')
  • ticks: beosztások száma (alapértelmezett: 0)
  • tickColor: a beosztások színének hexadecimális kódja (alapértelmezett: '#DDDDDD')
  • tickLength: a beosztások hossza (alapértelmezett: 0)
  • tickWidth: a beosztások szélessége százalékosan (alapértelmezett: 0.02)
  • tickColorizeValues: a beosztások beszínezhetőségének engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • skin: téma ('default' | 'tron') (alapértelmezett: 'default')
  • release: függvény meghívása a szabályzó "elengedésekor".
    Lehetséges paraméterek:
    value: a szabályzó aktuális értéke
    input: jQuery, vagy input elem
  • change: függvény meghívása a szabályzó értékének változásakor
    Lehetséges paraméter:
    value: a szabályzó aktuális értéke
  • draw: függvény meghívása, ha módosul a 'canvas'.
    Lehetséges paraméterek:
    angle: számított fok
    value: jelenlegi érték
    opt: plugin opciók

Tippek

  • A plugin működéséhez a jQuery 1.7+ verziója szükséges!