Väike omalooming: Multiple ShowHideBlock

jQuery 1.3.0 ja 3. sünnipäev

Peale suurt tööd väljastati uus jQuery1.3.0, mille avalikustamine langes kokku ka jQuery 3. sünnipäevaga (14. jaanuar). Kuid mida tõi uus versioon endaga kaasa? Palju uut ja huvitavat!

Tähtsamateks uuteks märksõnadeks/mõisteteks:
- Sizzle
- Live Events
- jQuery Event ümnerkorraldus
- HTML Injection Rewrite
- Offset Rewrite
- No More Browser Sniffing

Sizzle
Sizzle on uus css selekteerimise mootor. Samas väljastati see täiesti eraldiseisva projektina koostöös paljude teiste teekide loojate ja arendajatega. Sellega soovitakse enda panus javascripti üldisesse arendusse ja arengusse. See võimaldab teha koostööd teiste suurte konkureerivate raamistike arendajatega, arendades nii ühtse selektori. Sellisele heatahte märgile on omalt poold positiivset vastukaja tulnud ka Prototype, Dojo, Yahoo UI, MochiKit, TinyMCE ja paljude teiste raamistike arendajatelt.

Live Events
jQuery toetab nüüd otsesündmusi (live events) - demo. See võimaldab tegevusse kaasata kõiki hetke ja ka tuleviku elemente. Kasutades sündmuste delegeerimist ja sujuvat css selektorit (Sizzle) on kiiruslikud omadused lõpptulemuse saavutamisel paremad kui võrrelda neid eelmiste jQuery versioonide ja teiste raamistikega.

jQuery Event muudatused
Sündmuste (event) süsteem tervikuna läbis tõsise uuenduskuuri. Suurimaks uuenduseks jQuery.Event objekti lisandumine. Selle objekti abil on kokku võetud kõik W3C poolt tunnustatud sündmus objektid, neid kõiki on kerge sujuvalt korraga tööle rakendada, kõigis lehitsejates.

Kokkuvõte
Ülalpool kirjeldatud ja mitte kirjeldatud uuenduste tulemusena on jQuery kiiruslikud omadused tublisti paranenud - vaikefunktsioonide jooksutamisel - edestatakse enamusi konkureerivaid raamistike ja parimad näitajad on saavutatud Firefox 3 veebibrowseriga.
Samas võib kujuneda uuendamine üsna valulikuks - 1.2 viimaselt 1.2.6 versioonilt 1.3 seeriale üle minnes tuleb tähelepanelikult näpuga järge ajada ja jälgida kas see või teine valmis kirjutatud lisa üldse 1.3 versioonidega töötab ja kas neile uuendusi üldse loota võib. Sama kehtib ka enda poolt valmis kirjutatud lahendustele.

jQuery Foundation

jQuery javascripti raamistik on kolme aastaga kasvanud suureks ettevõtmiseks ning edasise eduka töö korraldamise ja kordineerimise eesmärgil loodi nüüd jQuery Foundation.

1.3.1

Kiire uuendusena valmis ka vigade paradus 1.3.1 versooni näol.

On sul tekkinud mõne põneva ja liikuva saidi puhul küsimus millist javascripti/ajaxi raamistiku antud leht kasutab? Üks võimalus küsimusele vastuse leidmiseks on lihtsalt vaadata lehe lähteteksti ("View source") ja siis üles otsida koodist raamistiku kaasamise element ja attribuudid.
Kuid on ka lihtsam lahendus: WTFramework, bookmarklet'ina kasutatav tööriist (väike javascripti detektor).

Alustamiseks tuleb lihtsalt rebida detektori otselink enda veebilehtiseja järjehoidja ribale ja "põneval" saidil sellele viitele vajutada ja tulemus ongi käes. Esialgu sisaldab nimekiri mida see peaks see ära tundma järgmisi raamistike MooTools, Yahoo User Interface, jQuery, Scriptaculous, Dojo Toolkit ja Mochikit.

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!