hogyan, javascript, scriptaculous

A csúszkák az asztali alkalmazásokban sem megszokott bizgentyűk, pedig vizuális alkatúaknak sokkal szemléletesebben kezelnek számszerű változásokat mint bármi más. Egy csúszka általában egy értéktartományt ábrázol, amin belül a user választhat.

Használatához a minimális JavaScript belinkelés a következő.

<script type="text/javascript" src="eleresi/ut/prototype.js">
</script>
<script type="text/javascript" src="eleresi/ut/slider.js">
</script>

A szükséges XHTML

<div id="csik">
  <div id="kezelo"> </div>
</div>

A CSS nem csak csicsa, hanem mindenféleképpen szükséges, hogy a csúszkák látható is legyen.

#csik{
  width:20em;
  height:0.8em;
  background-color:#bcf;
  }

#kezelo{
  width:0.8em;
  height:1em;
  background-color:#00f;
  cursor:pointer;
  }

A JavaScript hívás szokásosan elegánsan rövid.

new Control.Slider('kezelo', 'csik');

És már működik is, lehet jobbra balra cibáln, illetve ha kedvünk tartja egyszerűen csak odébb is lehet kattintani.

Slider finomhangolás

Persze ahogy eddig is megszokhattuk agy nagy nyaláb opció van mellyel a kis csúszkánkat felvértezhetjük.

axis

milyen irányban mozogjon a kezelő. Alapértelmezett értéke 'horizontal' másik lehetséges értéke nem meglepő módon 'vertical'

sliderValue

hol legyen kiindulásként a kezelő. Default 0, azaz az elején, maximális értéke 1, azaz a végén.

onSlide(ertek, csuszka)

callback a kezelő mozgatásához

onChange(ertek, csuszka)

callback a kezelő elengedéséhez

new Control.Slider(
  'kezelo2',
  'csik2',
  {
    sliderValue : 0.5,
    onSlide : function(ertek, csuszka){
      $('kijelzo').update(parseInt((ertek-0.5)*200) + '%');
      },
    onChange : function(ertek, csuszka){
      $('kijelzo').update(parseInt((ertek-0.5)*200) + '%');
      }
  }
  );

A fenti példával már jobban látni fogja a user, hogy mi is történik.

range

Alapértelmezés szerint $R(0,1), a minimum és maximum értékeket lehet a segítségével módosítani

values

Alapértelmezés szerint false, a lehetségesen felvehető értékeket adja meg egy tömbben. Ezzel biztosíthatjuk, hogy csak bizonyos értékeket vegyen fel

new Control.Slider(
  'kezelo',
  'csik',
  {
    range : $R(0,25),
    values : [0, 5, 10, 15, 20, 25]
  }
  );

Több érték egy csúszkán

Ha szeretnénk több értéket beállítatni a userrel ugyanazon a csúszkán, akkor a kijelző elemeket és a sliderValue értékeket tömbként kell megadnunk.

new Control.Slider(
  ['kezelo1', 'kezelo2', 'kezelo3'],
  'csik',
  {
  sliderValue : [0, 0.3, 0.8]
  }
  );

Értéktartomány kijelölés

Ha szeretnénk egy értéktartományt jelölni a csúszkán, akkor egy kicsit összetettebben kell létrehoznunk.

<div id="csik">
  <div id="kezelo1"></div>
  <span id="tartomany"></span>
  <div id="kezelo2"></div>
</div>

new Control.Slider(
  ['kezelo1', 'kezelo2'],
  'csik',
  {
    range : $R(5, 25),
    values : [5, 10, 15, 20, 25],
    sliderValue : [10, 20],
    spans : ['tartomany'],
    restricted : true     //ne fedhessenek egymásra a tartományvég jelölők
  }
  );

Mint a fenti kis példákból is látszik a scriptaculous csúszkái ugyan nem alkalmasak a párhuzamos világok meglátogatására, de ezen kívül praktikusan mindenre hajlandóak amit csak akarhatunk tőlük.

A következő és egyben utolsó részben a scriptaculous hang moduljával fogunk barátságba keveredni.

Ez a bejegyzés rrd billentyűzetéből potyogott ki 2008 április 19. napján 15:30:44-kor. Eddig 1,298 olvasást ért meg. A visszajelzéseket nyomonkövetheted ezzel az RSS feed-el. Véleményt nyilváníthatsz, vagy trackbackolhatsz a saját oldaladon.