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.

Sortimine tabeli päisega

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 välja vahetamine

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