jQuery on kevyt JavaScript-kirjasto, jonka avulla erilaisten toiminnallisuuksien lisääminen web-sivuille vie vain muutamia rivejä koodia. Tätä kuvaa hyvin jQueryn slogan: “Write less, do more”. jQuerysta löytyy valmiita funktioita, joita käyttämällä esimerkiksi artikkelin kuvauksessa mainitun “feidaus”-efektin luominen onnistuu yllättävänkin helposti, myös erilaisten AJAX-toimintojen käyttäminen kirjaston avulla onnistuu.
jQueryn lisäksi löytyy myös muita kokeilemisen arvoisia JavaScript-kirjastoja ja rajapintoja, kuten MooTools, Prototype ja script.aculo.us.
1. jQueryn asennus
Jotta vasta-alkajatkin saisivat tästä oppaasta jotain irti, niin laitan tähän myös ohjeet jQueryn asennukseen. Asennus on tosin melko helppoa.
jQueryn voit ladata osoitteesta jquery.com. Ladattuasi kyseisen JavaScript-tiedoston, kannattaa tämän nimi muuttaa hieman muistettavampaan muotoon, esimerkiksi jquery(.js).
Luo nyt kansio, johon laitat edellä mainitun tiedoston jquery.js. Tämän tiedoston lisäksi kansioon kannattaa luoda tiedostot index.html ja effects.js.
Effects.js tiedostoon rakennetaan itse feidaus-efekti, mutta koodi voidaan sijoittaa myös HTML-tiedostoon script-tagien sisälle.
Jotta jquery.js sekä effects.js saataisiin toimimaan index.html tiedostossa, täytyy header-tagien sisään laittaa seuraavat kaksi riviä:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="effects.js"></script>
Lisätään vielä muutama elementti index.html-tiedostoon, jotta koodin toimivuutta voisi havainnollistaa helpommin. HTML-tiedoston koodi voisi kokonaisuudessaan näyttää esimerkiksi tältä.
2. Feidauksen koodaus
Aloitetaan jQuery:n käyttö laittamalla effects.js tiedostoon alla oleva koodinpätkä. Ensimmäinen rivi tarkoittaa että koodi suoritetaan vasta kun sivu on ladattu kokonaan.
$(document).ready(function(){
});
Lisätään seuraavaksi aaltosulkeiden sisälle hover-ominaisuus. Kohtaan “.className” tulee se elementti, johon feidaus-efektiä käytetään. Esimerkissä olevan image-luokan tilalle voi siis yhtä hyvin laittaa esimerkiksi “#image”, “img.image” tai vaikkapa “img”. Voit laittaa yhden elementin lisäksi myös muita elementtejä pilkuin eroteltuina esim. (‘.div1, div2, div3′).
$(document).ready(function(){
$('.image').hover(function() {
});
});
Nyt voit laittaa edellä luotujen aaltosulkeiden sisälle toimintoja, jotka haluat toimivan hiiren ollessa määritellyn elementin päällä.
Feidauksessa käytetään funktiota fadeTo. Funktio on muotoa fadeTo(nopeus, peittoky). Nopeus voidaan ilmoittaa sanoilla “slow”, “normal” ja “fast” tai millisekunteina. Peittokyky ilmoitetaan nollasta yhteen, eli jos elementistä näkyisi vaikka 30%, niin funktion peittokyky-arvoksi laitetaan 0.3.
Koodi alkaa olla jo melko valmis, mutta siinä on kuitenkin vielä yksi pieni ongelma, joka aiheuttaa elementtien turhaa vilkkumista. Tätä havainnollistava esimerkki löytyy täältä. Kiinnitä huomiota siihen, miten koodi toimii, kun hiirtä liikutetaan elementtien välillä edestakaisin ja toistuvasti.
$(document).ready(function(){
$('.image').hover(function() {
$(this).fadeTo('normal', 0.3);
}, function() {
$(this).fadeTo('normal', 1.0);
});
});
Ongelman korjaus tapahtuu käyttämällä funktiota stop(), joka lopettaa edellisen funktion toiminnan ja antaa toiselle funktiolle mahdollisuuden toimia tämän jälkeen. Lisätään siis stop() fadeTo-funktion eteen seuraavasti:
$(document).ready(function(){
$('.image').hover(function() {
$(this).stop().fadeTo('normal', 0.3);
}, function() {
$(this).stop().fadeTo('normal', 1.0);
});
});
Lopullinen versio tästä efektistä löytyy täältä. Kokeile nyt viedä hiirtä elementtien päälle toistuvasti (päälle, pois, päälle..) ja huomaat, että ongelma on korjaantunut. Jos tarvitset tarkempia ohjeita tai sinulla on joitain ongelmia koodin käytössä niin heitä kommenttia :)
Piditkö artikkelista?
Kerro siitä myös muille.
Aiheeseen liittyvää
Samankaltaisia artikkeleita.
