2007-03-31

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-grensesnittVi innså at det ville bli tungvint for brukerne å fylle ut hver tabell som om det var separate skjemaer – spesielt fordi tabellene danner en helhetVi fant ut at vi kunne presentere alle tabellene i ett stort skjema, og bruke JavaScript (Ajax) til å gjøre dette skjemaet “spiselig” for brukerneVi 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 ScriptaculousGjør det enkelt å lage “interaktive” websiderInneholder en mengde ferdiglagde komponenter som man på en enkel måte kan nyttiggjøre seg av uten å kunne JavaScriptjQuery består av en forenklende basis for JavaScript programmering – jQuery APIPå 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å kolonneheaderneVår egen rowselector plugin så brukeren kan velge rader i tabellerjQuery'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; https://soda.uio.no/forhaandsvisning

5

Komme igang

Ett eksempel på grensesnittkomponenter man kan finne - http://docs.jquery.com/UI/DatepickerHva trenger man?

jquery-1.2.3.min.js (anbefalt versjon for prod)Evt. PluginsHTML 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øketSøkestreng = blanding av XPath og CSSjQuery'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 <li>..</li> 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; http://plugins.jquery.comEnkelt å lage egne pluginsVi prøvde å bygge ut en eksisterende plugin, men den hadde noen problemer med IESå vi lagde en enkel plugin selv for valg av en linje i en tabell, med hover highlight, selection highlight + selection callback68 linjer inkludert kommentarer + luft (siste versjon)Enkel gjenbrukbar enhet som fungerer godt sammen med annen jQuery kode

8

Mer info

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery