En enkel introduksjon Geir H. Hansen & Martin Setek SUAF-SO USIT jQuery

2 Motivasjon – Hvorfor jQuery? Vi hadde behov for å la brukere fylle ut tabeller i en database via et web-grensesnitt Vi innså at det ville bli tungvint for brukerne å fylle ut hver tabell som om det var separate skjemaer – spesielt fordi tabellene danner en helhet Vi fant ut at vi kunne presentere alle tabellene i ett stort skjema, og bruke JavaScript (Ajax) til å gjøre dette skjemaet “spiselig” for brukerne Vi hadde praktisk talt ingen erfaring med programmering i JavaScript (og kan det fortsatt ikke) Vi bestemte oss for å se hva vi kunne finne på nettet av ferdiglagde løsninger

3 Hva er jQuery? JavaScript-bibliotek i samme kategori som Scriptaculous Gjør det enkelt å lage “interaktive” websider Inneholder en mengde ferdiglagde komponenter som man på en enkel måte kan nyttiggjøre seg av uten å kunne JavaScript jQuery består av en forenklende basis for JavaScript programmering – jQuery API På toppen av jQuery API har man laget en rekke ferdige brukergrensesnittkomponenter – jQuery UI (User Interface)

4 Hva bruker vi (i første omgang)‏ ui.tabs for å få arkfaner slik at vi kan vise et enormt skjema på 1 webside (som 1 html-form) Tablesorter for å få tabeller brukeren kan sortere ved å klikke på kolonneheaderne Vår egen rowselector plugin så brukeren kan velge rader i tabeller jQuery's AJAX funksjonalitet for å oppdatere options i undervalg når det finnes hundrevis/tusenvis av kombinasjoner av hovedvalg+undervalg (en 1-liner på klientsiden) Dette ga oss mye tilbake for minimal innsats og egen kode;

5 Komme igang Ett eksempel på grensesnittkomponenter man kan finne - Hva trenger man? jquery min.jsjquery min.js (anbefalt versjon for prod) Evt. Plugins HTML kode som linker inn jQuery og plugins, og i noen tilfeller en linje eller to med javascript for å starte opp plugins. Evt. CSS for komponenten (fra jQuery.com eller egenprodusert)

6 Kort teknisk intro jQuery er en klasse ($ er et alias for jQuery) Tilstand = samling av DOM objekter $('søk') finner DOM obj som matcher søket Søkestreng = blanding av XPath og CSS jQuery's viktigste funksjoner er søk I DOMen og manipulasjon av objektene man finner. Eksempel: $(“#orderedlist > li”).addClass(“blue”); Dette legger til klassen “blue” på alle.. som finnes under elementet med id=“orderedlist”. Hva som skal skje med disse elementene som har class=“blue” bestemmes (vanligvis) av stilark (CSS).

7 jQuery plugins Stort utvalg tilgjengelig; Enkelt å lage egne plugins Vi prøvde å bygge ut en eksisterende plugin, men den hadde noen problemer med IE Så vi lagde en enkel plugin selv for valg av en linje i en tabell, med hover highlight, selection highlight + selection callback 68 linjer inkludert kommentarer + luft (siste versjon)siste versjon Enkel gjenbrukbar enhet som fungerer godt sammen med annen jQuery kode

8 Mer info h_jQuery