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