http://www.lambda.ee/w/index.php?action=history&feed=atom&title=UI%3ACSS_elemente 2026-10-29T18:14:44Z Selle lehekülje redigeerimiste ajalugu MediaWiki 1.43.11 http://www.lambda.ee/w/index.php?title=UI:CSS_elemente&diff=12286&oldid=prev 2015-03-05T20:49:20Z

<p><span class="autocomment">Tabeli sortimise indikaatorid</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="et"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 5. märts 2015, kell 22:49</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l23">23. rida:</td> <td colspan="2" class="diff-lineno">23. rida:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* See kuidas kasutajale vihjata, millise välja järgi parajasti sorditakse ja mis suunas</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* See kuidas kasutajale vihjata, millise välja järgi parajasti sorditakse ja mis suunas</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Kuidas kasutaja üldse avastab, et tabelit võib sortida</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Kuidas kasutaja üldse avastab, et tabelit võib sortida</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Sorditava välja vahetamine</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* Sorditava <ins style="font-weight: bold; text-decoration: none;">tulba </ins>välja vahetamine</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Tee esialgu kole tabel (st ära kujunda tabelit; siin harjutuses on javascript olulisem). Kui aega üle, tee ilusaks.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Tee esialgu kole tabel (st ära kujunda tabelit; siin harjutuses on javascript olulisem). Kui aega üle, tee ilusaks.</div></td></tr> <!-- diff cache key lambdadb:diff:1.41:old-10068:rev-12286:php=table --> </table>

Irve http://www.lambda.ee/w/index.php?title=UI:CSS_elemente&diff=10068&oldid=prev 2013-02-27T10:21:59Z

<p><span class="autocomment">Sortimine tabeli päisega</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="et"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 27. veebruar 2013, kell 12:21</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l17">17. rida:</td> <td colspan="2" class="diff-lineno">17. rida:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Nende olekute tarvis ei pea pilti vahetama, võib olekuid esitada ka muul moel. Tee ilusad nupud.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Nende olekute tarvis ei pea pilti vahetama, võib olekuid esitada ka muul moel. Tee ilusad nupud.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>== <del style="font-weight: bold; text-decoration: none;">Sortimine tabeli päisega </del>==</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>== <ins style="font-weight: bold; text-decoration: none;">Tabeli sortimise indikaatorid </ins>==</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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:</div></td></tr> <!-- diff cache key lambdadb:diff:1.41:old-10067:rev-10068:php=table --> </table>

Irve http://www.lambda.ee/w/index.php?title=UI:CSS_elemente&diff=10067&oldid=prev 2013-02-27T09:57:46Z

<p><span class="autocomment">Esitamine</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="et"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 27. veebruar 2013, kell 11:57</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l30">30. rida:</td> <td colspan="2" class="diff-lineno">30. rida:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Salvestage töö arvutiklassi W: kettale või veebi.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Salvestage töö arvutiklassi W: kettale või veebi.</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Saatke e-post jaagup.irve@ttu.ee aadressil, mille teemarida on "UI:<del style="font-weight: bold; text-decoration: none;">Kassid</del>" (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.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* Saatke e-post jaagup.irve@ttu.ee aadressil, mille teemarida on "UI:<ins style="font-weight: bold; text-decoration: none;">CSS</ins>" (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.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&#039;&#039;&#039;NB&#039;&#039;&#039;: Arvutiklasside veebiketastel leiduv on nähtav aadressil: http://www.tud.ttu.ee/web/Teie.Kasutajanimi/ ja vajab index.html faili (&#039;&#039;&#039;ning&#039;&#039;&#039; ärge unustage suuri tähti). Hindamise sissekandmisel on kasu ka ka autorite &#039;&#039;nimedest&#039;&#039;!</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&#039;&#039;&#039;NB&#039;&#039;&#039;: Arvutiklasside veebiketastel leiduv on nähtav aadressil: http://www.tud.ttu.ee/web/Teie.Kasutajanimi/ ja vajab index.html faili (&#039;&#039;&#039;ning&#039;&#039;&#039; ärge unustage suuri tähti). Hindamise sissekandmisel on kasu ka ka autorite &#039;&#039;nimedest&#039;&#039;!</div></td></tr> <!-- diff cache key lambdadb:diff:1.41:old-10066:rev-10067:php=table --> </table>

Irve http://www.lambda.ee/w/index.php?title=UI:CSS_elemente&diff=10066&oldid=prev 2013-02-27T09:57:19Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="et"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 27. veebruar 2013, kell 11:57</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l26">26. rida:</td> <td colspan="2" class="diff-lineno">26. rida:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Tee esialgu kole tabel (st ära kujunda tabelit; siin harjutuses on javascript olulisem). Kui aega üle, tee ilusaks.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Tee esialgu kole tabel (st ära kujunda tabelit; siin harjutuses on javascript olulisem). Kui aega üle, tee ilusaks.</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">==Esitamine==</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* Salvestage töö arvutiklassi W: kettale või veebi.</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* Saatke e-post jaagup.irve@ttu.ee aadressil, mille teemarida on "UI:Kassid" (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.</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">'''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''!</ins></div></td></tr> <!-- diff cache key lambdadb:diff:1.41:old-10065:rev-10066:php=table --> </table>

Irve http://www.lambda.ee/w/index.php?title=UI:CSS_elemente&diff=10065&oldid=prev 2013-02-27T09:30:55Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="et"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 27. veebruar 2013, kell 11:30</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l2">2. rida:</td> <td colspan="2" class="diff-lineno">2. rida:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Täna harjutame CSSi ning selle koostööd javascriptiga.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Täna harjutame CSSi ning selle koostööd javascriptiga.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Ülesandeid on kaks.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Ülesandeid on kaks<ins style="font-weight: bold; text-decoration: none;">. Taas: tehke kahekesi</ins>.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== &#039;&#039;Image Sprites&#039;&#039; ==  </div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== &#039;&#039;Image Sprites&#039;&#039; ==  </div></td></tr> <!-- diff cache key lambdadb:diff:1.41:old-10064:rev-10065:php=table --> </table>

Irve http://www.lambda.ee/w/index.php?title=UI:CSS_elemente&diff=10064&oldid=prev 2013-02-27T08:56:34Z

<p>Uus lehekülg: &#039;{{UI}} Täna harjutame CSSi ning selle koostööd javascriptiga. Ülesandeid on kaks. == &#039;&#039;Image Sprites&#039;&#039; == Terminile head tõlget ei tule; sisuliselt on tegemist lehe laad...&#039;</p> <p><b>Uus lehekülg</b></p><div>{{UI}}<br /> Täna harjutame CSSi ning selle koostööd javascriptiga.<br /> <br /> Ülesandeid on kaks.<br /> <br /> == &#039;&#039;Image Sprites&#039;&#039; == <br /> <br /> Terminile head tõlget ei tule; sisuliselt on tegemist lehe laadimiskiiruse tõstmisega, näidates ühest suuremast pildist kasutajaliidese elementide tarbeks vaid fragmente.<br /> <br /> Tutvu põhimõttega [http://www.w3schools.com/css/css_image_sprites.asp w3schools.com] lehel. Siis kohanda mõni Google&#039;i liidese pilt (nt https://ssl.gstatic.com/docs/spreadsheets/MainMenuHorSprite015.gif ) ümber väikeseks kahenupuliseks tööribaks.<br /> <br /> Tee nuppudele kolm olekut:<br /> * Tavaline<br /> * Hiir nupu kohal (hover)<br /> * Hiir allavajutatud<br /> <br /> Nende olekute tarvis ei pea pilti vahetama, võib olekuid esitada ka muul moel. Tee ilusad nupud.<br /> <br /> == Sortimine tabeli päisega ==<br /> <br /> 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:<br /> <br /> * See kuidas kasutajale vihjata, millise välja järgi parajasti sorditakse ja mis suunas<br /> * Kuidas kasutaja üldse avastab, et tabelit võib sortida<br /> * Sorditava välja vahetamine<br /> <br /> Tee esialgu kole tabel (st ära kujunda tabelit; siin harjutuses on javascript olulisem). Kui aega üle, tee ilusaks.</div>

Irve