UI:CSS elemente

Leht kuulub aine Kasutajaliidesed juurde.

Täna harjutame CSSi ning selle koostööd javascriptiga.

Ülesandeid on kaks. Taas: tehke kahekesi.

Image Sprites

Terminile head tõlget ei tule; sisuliselt on tegemist lehe laadimiskiiruse tõstmisega, näidates ühest suuremast pildist kasutajaliidese elementide tarbeks vaid fragmente.

Tutvu põhimõttega w3schools.com lehel. Siis kohanda mõni Google'i liidese pilt (nt https://ssl.gstatic.com/docs/spreadsheets/MainMenuHorSprite015.gif ) ümber väikeseks kahenupuliseks tööribaks.

Tee nuppudele kolm olekut:

• Tavaline
• Hiir nupu kohal (hover)
• Hiir allavajutatud

Nende olekute tarvis ei pea pilti vahetama, võib olekuid esitada ka muul moel. Tee ilusad nupud.

Tabeli sortimise indikaatorid

Tee vähemalt kolme tulbaga väike tabel vabalt valitud teemal. Lisa tabeli päisesse sortimisfunktsionaalsus; sissekandeid endid sortima ei pea, aga peaks olema lahendatud:

• See kuidas kasutajale vihjata, millise välja järgi parajasti sorditakse ja mis suunas
• Kuidas kasutaja üldse avastab, et tabelit võib sortida
• Sorditava tulba välja vahetamine

Tee esialgu kole tabel (st ära kujunda tabelit; siin harjutuses on javascript olulisem). Kui aega üle, tee ilusaks.

Esitamine

• Salvestage töö arvutiklassi W: kettale või veebi.
• Saatke e-post jaagup.irve@ttu.ee aadressil, mille teemarida on "UI:CSS" (mis on oluline, sest sortimine!), ning milles on teie töö aadress. Ärge pange kirjaga kaasa .zip faili ega mingeid muid faile, sest see kulutab kontrollimisel ebamõistlikult palju aega.

NB: Arvutiklasside veebiketastel leiduv on nähtav aadressil: http://www.tud.ttu.ee/web/Teie.Kasutajanimi/ ja vajab index.html faili (ning ärge unustage suuri tähti). Hindamise sissekandmisel on kasu ka ka autorite nimedest!