jQuery, Leaflet ja Drag & Drop

Tutustu ensin jQuery-materiaaliin.

Avaa Using jQuery Core, jQueryn API-dokumentaatio ja jQueryn learning center avuksesi. Voit näistä aina tarkistaa miten asiat jQuerylla pitää / voi tehdä.

Ota valmis pohja käyttöösi. Tähän on jo linkitetty tarvittavat kirjastot.

Kokeile tehdä seuraavat temput käyttäen jquery-kirjaston objekteilla ja metodeilla:

Huomaa, että jos käytät jQueryn metodeja niin voit jossain tilanteessa joutua pakottamaan tavallisen DOM-objektin jQuery-objektiksi $( objekti )-merkinnällä. Pääset helpoimmalla jos käytät koko ajan jqueryn omia metodeja.

Lue myös seuraavat: Data methods, utility methods, Iterating over jQuery and non-jQuery Objects

Huom. jQuery ei tue SVG:tä. Tee SVG:n käsitteleminen tavallisen DOM-rajapinnan kautta.

Tapahtumankäsittely: bubbling ja capturing

Lue: Understanding Event Delegation.

Lisätietoa: Handling events ja Introducing Custom Events

jQuery UI

jQuery UI tuo mukanaan uusia widgetteja, efektejä ja yksinkertaistaa joidenkin hiiritoimintojen lisäämistä mihin tahansa elementtiin. Katso ja kokeile jQuery UI demos. Yritä toteuttaa seuraavat jQuery UI:n avulla:

Drag & Drop

jQueryssa on omat toiminnot Drag & Dropin toteuttamiseksi. Ne eivät kuitenkaan ole yhteensopivia käyttöjärjestelmän oman drag & dropin kanssa. Teemme siis drag & dropin ilman jquerya. Älä käytä tässä jquerya esim. tapahtumankäsittelijöiden luomiseen. Lue HTML Drag and Drop API.

Drag & Drop toteutetaan seuraavalla tavalla:

Jos toteutat drag & dropia käyttäen jquerya niin e.originalEvent antaa sinulle alkuperäisen tapahtumaobjektin eikä jqueryn modifioimaa versiota.

Drag & dropin yhteydessä käytetään seuraavia tapahtumia:

Lisätietoa

Kartat

Paikkatieto ja kartat ovat useissa sovelluksissa tärkeitä. Tehdään yksinkertainen karttasovellus Leaflet-kirjaston avulla.

Kopioi käyttöösi valmis pohja johon on linkitetty tarpeelliset kirjastot.

Lue Leaflet Quick Start Guide

Kaaviot

Kaavioiden piirtämiseen on useita erilaisia javascript-kirjastoja. Googlen tarjoama Google Charts on yksi helppokäyttöisimpiä. Lue Quickstart ja piirrä sen perusteella seuraavanlainen kaavio:

Viikkotehtävä 4

Tarvittavat tiedot kaavion piirtämiseksi:

['Taso 1', 70],
['Taso 3', 26],
['Taso 5', 12]

Yritä piirtää samasta datasta myös pylväskaavio:

Viikkotehtävä 4

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/ohjaus/ohjaus5/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-11-01 14:35:56
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta