dragging
Børre Stenseth
Moduler>JavaScript>ting og tang

Noen Eksempler

Hva
Noen utfordringer

Nedenfor finner du noen eksempler på løsninger som kan være aktuelle i ulike sammenhenger.

Post-It

I dette eksempelet ønsker vi å lage sider med små gule lapper som "popper" opp eller ekspanderer ved mousedown og forsvinner ved mouseup.

Test en løsning herhttp://www.it.hiof.no/~borres/dw/dhtml/utsagn.html

Dette involverer flere problemstillinger:

  1. Vi må ta vare på det som skal "poppes". I eksempelet er materiale ganske enkelt lagt i en Array (Det er derfor også synlig i kildekoden)
  2. Vi vil gjerne generalisere koden slik at vi har felles funksjoner for å poppe opp og ned. Dette innebærer at vi gjerne vil finne ut hvilket element som er opphav til en begivenhet.
  3. Vi vil dessuten finne ut nøyaktig hvor en begivenhet(mousedown) skjer slik at vi kan poppe nøyaktig ved cursor. Dette er den delen av løsningen som er mest krevende med tanke på ulike nettlesere.

Løsningen er inspirert av Quirksmode [1] .

Puslespill

Dette eksempelet bruker absolutt posisjonering og litt DOM-skripting:

Picassohttp://www.it.hiof.no/~borres/dw/dhtml/puzzle/page.html

Bildebølge

Bilder ekspanderer når vi trekker cursor over dem. Eksempel med valgresultat i Østfold-kommuner. Bruk av JSON og JavaScript

Sjekk herhttp://www.it.hiof.no/~borres/dw/imagewave/index.html

Sjakk

Flytting av brikker og kontroll av lovlige trekk. (ikke helt uten feil)

Sjekk herhttp://www.it.hiof.no/~borres/dw/dhtml/chess/index.html
Referanser
  1. QuirksmodePeter-Paul KochQuirksmode.orgwww.quirksmode.org/14-03-2010
  1. overlib, et JS bibliotek for popupvindueroverLIBwww.bosrup.com/web/overlib/14-03-2010
Vedlikehold
Børre Stenseth, sist revidert juni 2010
(Velkommen) Moduler>JavaScript>ting og tang (AJAX)