Amit a scriptaculousról tudni érdemes 8

scriptaculousA 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.

0 %
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]
  }
  );
0

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.

3 thoughts on “Amit a scriptaculousról tudni érdemes 8

  1. Tetszenek a postjaid, mindig elolvasom! 🙂 Sok újat nem mutat (angol nyelven már túlvagyok), de jólesik magyarúl olvasgatni szkriptakulóról.

    Hajrá, így tovább!
    – kisPocok –

  2. Abszolut kezdő vagyok!
    Igy szerettem volna elérni, hogy csúszkám legyen, de persze nem sikerült:

    XHTML 1.0 Example

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

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

    new Control.slider(‘kezelo’, ‘csik’);

    A \wamp\www (localhost) könyvtáramban benne vannak a
    slider.js
    prototype.js
    effects.js
    scriptaculous.js

    Egyáltalán, hogyan kelle beszúrni egy javascript kérést?
    Azért érdemlek egy kis segítséget?

    Előre is köszönöm
    Üdv. Bártfai B.

    • A html dokumentumod head részébe kell őket meghívni, ott van a bejegyzés elején, hogy hogyan. De ha ezzel van gondod akkor szerintem kicsit korai lesz csúszkákkal próbálkozni, először át kellene nézni a html alapjait.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.