jQuery: 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:44

LoadingAnimation 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:22

MoreCSS

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

jQuery, Microsoft ja Nokia

JavaScripti raamistik jQuery on pööranud uue lehekülje Microsoft'i ja vabavara vahelises suhtes.

Tarkvarahiid Microsoft võttis ametlikult oma programmeerimistarkvaras Visual Studio kasutusele jQuery, liites raamistiku programmi ja seal sees oleva ASP.NET Ajax raamistikuga, andes nii vajalikud vahendid ja funktsionaalsused ASP.NET ja kindlasti ASP.NET AJAX'i arendajatele oma töö kergendamiseks, lihtsustamiseks ja täiustamiseks. Samas peaks see muutma ka väiksemaks vahet erinevates browserites (cross-browser) javascripti käitumist, sest arendajad kasutavad siis järjest enam sarnaseid vahendeid ja funktsioone toodete/lahenduste loomiseks.

Microsofti .NET korporatiivse arendusdivisioni asepresident Scott Guthrie on omalt poolt lubanud, et Microsoftist saab hea liige jQuery kommuunis, leppides kommuuni pakutava loominguga, ise seda muutmata ja uut haru arenduses tekitamata, samas on lubatud kaasa aidata arenduses, testides koodi ja siis sealt saadud tulemusi jQuery projektiga jagades. Samas on ka siinkohal suurimad riskid hõõrdumiste tekkimiseks ja valitud joonelt kaldumiseks.

Selle sammuga ühtlasi kinnitab Microsoft oma ekslikkust varasemate negatiivsete vaadete kohta vabavara suunal.

Sellega jQuery võidukäik veel ei lõppe, sest samal ajal sai teatavaks veel teise suure tegija, mobiilitootja Nokia poolne jQuery kasutuselevõtt. Soome telefonivalmistaja kasutab seda oma WebKit'il põhineval Web Runtime (WRT) mobiilibrowserimootori lahenduste väljatöötamiseks, ühtlasi tähendab see seda, et kõigist uutest Web Runtime sisaldavates Nokia telefonides on ka jQuery.

Kokkuvõtteks peab kindlasti ära märkima, et mõlemast projektist on kindlasti võimalik võita mõlemal projektipoolel. Nokia ja Microsoft saavad osa jQuery innovatiivsusest ja funktsionaalsusest, jQuery ise saab samuti kasu suurte tegijate poolt sooritatavate loetematute testimiste, paranduste ja täienduste näol.
Lisatud: 04.10.2008 19:14