Blog - leht 18jQuery: onmouseover ja onmouseout
Lihtsate onmouseover ja onmouseout tabeliridade (ei mingeid tabeleid enam) värvide vahetamiseks tavalise primitiivse ja talupoegliku lahenduse:
<dl onmouseover="this.style.backgroundColor='#F8F8F8';"
onmouseout="this.style.backgroundColor='#FFF';">
<dt>Veerg 1</dt>
<dd class="competion">Veerg 2</dd>
<dd class="place">Veerg 3</dd>
<dd class="organizer">Veerg 4</dd>
</dl>
asemel kasutada hoopis jQuery pakutavat lahendust (mitme muutuva css attribuudi korral):
<dl class="row;">
<dt>Veerg 1</dt>
<dd class="competion">Veerg 2</dd>
<dd class="place">Veerg 3</dd>
<dd class="organizer">Veerg 4</dd>
</dl>
$(function(){$("dl.row").hover(function (){$(this).css({ "background": "#DFFFFF",
"color": "#00a7d8","border-bottom": "1px solid #9EE9FF" });
}, function (){var cssObj = {"background": "#FFF",
"color": "#2C2C2C", "border-bottom": "1px solid #CBCACA" }$(this).css(cssObj);
});
});
või pisut lihtsustatud varianti (ühe muutuva css attribuudi korral):
$(function(){$('dl.row').hover(function(){$(this).css("background","#DFFFFF"); },
function(){$(this).css("background","#FFF");});
});
Puhtam, kergem ja mugavam tunne :)
Peaks ka "Unobtrusive" olema!Lisatud: 22.10.2008 21:44LoadingAnimation maania
Alles see oli kui iga korralik veebisepp riputas oma veebi mõne "üliägeda" gif animtsiooni, asjad pole muutunud ka praegu, võibolla ainult selle erinevusega, et asi tõesti on äge. Agaralt kasutatavate javascript/ajax lahenduste juures tuleb kasutajale kuvata mõni jätkuvalt laadimisest aimu andev indikaator, allpool stiilinäited sellest:
Generaatorid:
Web Script Lab - Ajax Loading Gif Generator
Load Info - gif generator
Ajaxload
Lisatud: 21.10.2008 09:22MoreCSS
Seekord vaatluse all javascripti raamistik MoreCSS. Erinevalt mõnest teisest teegist (jQuery, Prototype, Moo Tools, Dojo Toolkit, Yahoo! UI Library, Ext JS) peaks see olema veelgi enam disaineritele meelepärasem, sest erinevate funktsioonide loomiseks kasutatakse css'iga sarnast koodi süntaksit ja ülesehitust ning ka kood kirjutatakse css faili, mida siis javascriptiga hiljem töötlema asutakse.
Raamistiku arendaja on yellowgreen designbüro ja see on välja antud MIT Litsents'i all.
Nüüd ka erinevatest attribuutidest ja võimalustest. Ametlikult on attribuutide nimekirjas ligi 25 elementi.
Nüüd ka mõni näide:
1. style - lihtne hover süsteem
a) CSS
#just_a_table td {
border: 1px dotted gray;
}
b) HTML
<table id="just_a_table">
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
</table>
c) MoreCSS
#just_a_table td:hover {
style:
backgroundColor: #90B329,
color: white
;
}#just_a_table td:leave {
style:
backgroundColor: white,
color: black
;
}
Lisatud: 19.10.2008 21:16Rulluisuhooaja lõpetamine suure pauguga
Tallinna Rullisõit lõpetab 2008 Rahvarulli
Stamina Rahvarulli IV ja viimane etapp, Tallinna Rullisõit ning Lillepi pargi sporditee avamine toimuvad laupäeval, 18.oktoobril Pirital.
Tallinna Rullisõit toimub vastavalminud Lillepi pargi sporditeel. Ringi pikkus on 2,5km ja sõidetakse 10 ringi. Võistluse start ja sekretariaat asuvad Pirita Selveri parkla Rummu tee poolses otsasa.
Tallinna Rullisõidu ja Lillepi pargi sporditee avamise ajakava:
12.00 avakõned ja lindi lõikamine
12.30 ratturite sõit
13.00 Tallinna Noorterulli start
13.15 Tallinna Rullisõidu start
14.15 autasustamine
Tallinna Rullisõidu juhend, registreerimine ja detailid.
Lisatud: 15.10.2008 21:36
Lihtsate onmouseover ja onmouseout tabeliridade (ei mingeid tabeleid enam) värvide vahetamiseks tavalise primitiivse ja talupoegliku lahenduse:
asemel kasutada hoopis jQuery pakutavat lahendust (mitme muutuva css attribuudi korral):
või pisut lihtsustatud varianti (ühe muutuva css attribuudi korral):
Puhtam, kergem ja mugavam tunne :)
Peaks ka "Unobtrusive" olema!
<dl onmouseover="this.style.backgroundColor='#F8F8F8';"
onmouseout="this.style.backgroundColor='#FFF';">
<dt>Veerg 1</dt>
<dd class="competion">Veerg 2</dd>
<dd class="place">Veerg 3</dd>
<dd class="organizer">Veerg 4</dd>
</dl>asemel kasutada hoopis jQuery pakutavat lahendust (mitme muutuva css attribuudi korral):
<dl class="row;">
<dt>Veerg 1</dt>
<dd class="competion">Veerg 2</dd>
<dd class="place">Veerg 3</dd>
<dd class="organizer">Veerg 4</dd>
</dl>$(function(){$("dl.row").hover(function (){$(this).css({ "background": "#DFFFFF",
"color": "#00a7d8","border-bottom": "1px solid #9EE9FF" });
}, function (){var cssObj = {"background": "#FFF",
"color": "#2C2C2C", "border-bottom": "1px solid #CBCACA" }$(this).css(cssObj);
});
});või pisut lihtsustatud varianti (ühe muutuva css attribuudi korral):
$(function(){$('dl.row').hover(function(){$(this).css("background","#DFFFFF"); },
function(){$(this).css("background","#FFF");});
});Puhtam, kergem ja mugavam tunne :)
Peaks ka "Unobtrusive" olema!
Lisatud: 22.10.2008 21:44
Alles see oli kui iga korralik veebisepp riputas oma veebi mõne "üliägeda" gif animtsiooni, asjad pole muutunud ka praegu, võibolla ainult selle erinevusega, et asi tõesti on äge. Agaralt kasutatavate javascript/ajax lahenduste juures tuleb kasutajale kuvata mõni jätkuvalt laadimisest aimu andev indikaator, allpool stiilinäited sellest:
Generaatorid:
Web Script Lab - Ajax Loading Gif Generator
Load Info - gif generator
Ajaxload
Lisatud: 21.10.2008 09:22
Seekord vaatluse all javascripti raamistik MoreCSS. Erinevalt mõnest teisest teegist (jQuery, Prototype, Moo Tools, Dojo Toolkit, Yahoo! UI Library, Ext JS) peaks see olema veelgi enam disaineritele meelepärasem, sest erinevate funktsioonide loomiseks kasutatakse css'iga sarnast koodi süntaksit ja ülesehitust ning ka kood kirjutatakse css faili, mida siis javascriptiga hiljem töötlema asutakse.Raamistiku arendaja on yellowgreen designbüro ja see on välja antud MIT Litsents'i all.
Nüüd ka erinevatest attribuutidest ja võimalustest. Ametlikult on attribuutide nimekirjas ligi 25 elementi.
Nüüd ka mõni näide:
1. style - lihtne hover süsteem
a) CSS
#just_a_table td {
border: 1px dotted gray;
}b) HTML
<table id="just_a_table">
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
</table>c) MoreCSS
#just_a_table td:hover {
style:
backgroundColor: #90B329,
color: white
;
}#just_a_table td:leave {
style:
backgroundColor: white,
color: black
;
}Lisatud: 19.10.2008 21:16
Tallinna Rullisõit lõpetab 2008 Rahvarulli
Stamina Rahvarulli IV ja viimane etapp, Tallinna Rullisõit ning Lillepi pargi sporditee avamine toimuvad laupäeval, 18.oktoobril Pirital.
Tallinna Rullisõit toimub vastavalminud Lillepi pargi sporditeel. Ringi pikkus on 2,5km ja sõidetakse 10 ringi. Võistluse start ja sekretariaat asuvad Pirita Selveri parkla Rummu tee poolses otsasa.
Tallinna Rullisõidu ja Lillepi pargi sporditee avamise ajakava:
12.00 avakõned ja lindi lõikamine
12.30 ratturite sõit
13.00 Tallinna Noorterulli start
13.15 Tallinna Rullisõidu start
14.15 autasustamine
Tallinna Rullisõidu juhend, registreerimine ja detailid.
Stamina Rahvarulli IV ja viimane etapp, Tallinna Rullisõit ning Lillepi pargi sporditee avamine toimuvad laupäeval, 18.oktoobril Pirital.
Tallinna Rullisõit toimub vastavalminud Lillepi pargi sporditeel. Ringi pikkus on 2,5km ja sõidetakse 10 ringi. Võistluse start ja sekretariaat asuvad Pirita Selveri parkla Rummu tee poolses otsasa.
Tallinna Rullisõidu ja Lillepi pargi sporditee avamise ajakava:
12.00 avakõned ja lindi lõikamine
12.30 ratturite sõit
13.00 Tallinna Noorterulli start
13.15 Tallinna Rullisõidu start
14.15 autasustamine
Tallinna Rullisõidu juhend, registreerimine ja detailid.
Lisatud: 15.10.2008 21:36
Silver
HTML/CSS spetsialist (Advanced),PHP/MySQL & JavaScripti õppija ja taltsutaja (algaja),Ajaxi ja Adobe AIR austaja (rakenduste kasutaja)Veebifirma UusWeb.ee eestvedaja
Kiirrulluisutamise (Inline speed skating) sõltlane, jooksudistantside läbija ja (maantee-) rattasõidu harrastaja
Sporditarvete e-poe Spordihai.ee taganttõukaja
Viimati kuulanud
Play
Sotsialiseeru