1 / 8

jQuery

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

amos-baker
Download Presentation

jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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; https://soda.uio.no/forhaandsvisning

  5. Komme igang • Ett eksempel på grensesnittkomponenter man kan finne - http://docs.jquery.com/UI/Datepicker • Hva trenger man? • jquery-1.2.3.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 <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.com • 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) • Enkel gjenbrukbar enhet som fungerer godt sammen med annen jQuery kode

  8. Mer info • http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

More Related