Tavo interneto projektas spurda visokiais specialiaisiais efektais kaip kad google žemėlapiai, dinaminiai meniu ar automatinis įvedamo teksto siūlymas? Tada neišvengiamai vardan didesnio pasiekiamumo teks naudot įvairias alternatyvas lankytojams, naršantiems be Javascript. Tai reiškia, kad pilnavertiškai dinamišku atveju vienus objektus reiks slėpt, kitus – rodyt. Ir apskritai, Javascript’u varomose svetainėse dažnai tenka manipuliuot elementų slapstymusi. Šįkart mestelsiu keletą idėjų šitų slėpynių tema.
Gudrybė Nr.1. Pirmiausia reikia nuspręsti, kurie elementai ir efektai veiks tik tam tikrose naršyklėse. Pavyzdžiui, mandrą google žemėlapį rodysim ten, kur jis palaikomas. Kitiems tuo tarpu alternatyviai rodysim paprastą žemėlapio paveikslėlį. Kad susišnekėtume, pavadinkim tą spec. efektais praturtintą puslapį dinaminiu, o alternatyviąją versiją – statišku puslapiu. Statiško puslapio pranešimams apie pageidautinas naršykles ir jų nustatymus bei kitiems statiškiems elementams, kurie nebereikalingi dinaminėje versijoje, pridėkime CSS klasę to_hide. O tiems, kurie turi būti nematomi statiškoje versijoje, bet kurie draskysis puslapyje vos tik pajutę Javascript, pridėkime CSS klasę to_show. Šios klasės nurodo, ką reiks daryt skirptui dinaminiame puslapyje. Tuo tarpu CSS turi būti nurodyta:
.to_show {
display: none;
}
Turbūt jau spėji, kad ruošiuosi pakeist elementų su CSS klasėmis .to_hide ir .to_show matomumą, puslapiui pasikrovus? Spėjimas beveik teisingas. Šitą pakeitimą reikia daryti ne puslapiui pasikrovus, o dar jam kraunantis. Antraip pasikrovimo pradžioje dinaminis puslapis sekundėlei mirktelės su statiniu turiniu, o tik paskui pasikeis. Puslapiui kraunantis, dar nėra aišku, kurie elementai turės tas klases, o kurie ne. Bet tai mums nesvarbu. Keisim aprašus CSS klasėms tiesiogiai. Pasinaudokim funkcija dyn_css_rule, kuri prideda CSS taisykles dinamiškai prie pirmojo pakrauto kaskadinių stilių failo. N.B. Kaskadiniai stiliai dokumento apraše turi būti nurodyti prieš visus Javascript.
function dyn_css_rule(sSelector, sCssText) {
var oCss = document.styleSheets[0];
if (oCss.insertRule) {
oCss.insertRule(
sSelector + " {" + sCssText + "}",
oCss.cssRules.length
);
} else if (oCss.addRule) {
oCss.addRule(sSelector, sCssText);
}
return sSelector + "{" + sCssText + "}";
};
dyn_css_rule("to_show", "display:block");
dyn_css_rule("to_hide", "display:none");
Taigi šiuo atveju, jei Javascript yra įjungtas, objektai su atitinkamom klasėm bus suformuoti kaip matomi ar nematomi dar puslapiui besikraunant.
Gudrybė Nr.2. Šitas triukas tai paprastas. Elementams, kurie turi būti slapstomi dinamiško puslapio naudojimo eigoje, pridėjinėsim CSS klasę hidden. Pavyzdžiui, navigacijos meniu antras lygmuo turi būti rodomas tik užvedus pele virš pirmojo lygmens nuorodos. Štai ekspromtu rašau pavyzdį mėgstamos karkasinės sistemos jQuery sintakse:
HTML:
<ul class="dyn_menu">
<li>
<a href="">Lietuva</a>
<ul class="to_hide">
<li><a href="">Vilnius</a></li>
<li><a href="">Kaunas</a></li>
<li><a href="">Klaipėda</a></li>
</ul>
</li>
<li>
<a href="">Deutschland</a>
<ul class="to_hide">
<li><a href="">Berlin</a></li>
<li><a href="">Hamburg</a></li>
<li><a href="">München</a></li>
</ul>
</li>
</ul>
CSS (žinoma, iš atskiro failo):
.hidden {
display: none;
}
Javascript (iš atskiro failo):
$(document).ready(function() {
$("ul.dyn_menu li").mouseover(function() {
$(this).children("ul").removeClass("hidden to_hide");
}).mouseout(function() {
$(this).children("ul").addClass("hidden");
});
});
Šitam pavyzdy, lankytojai statiškuose puslapiuose matys pilną navigaciją – valstybes su miestais, – o tuo tarpu dinamiškuose miestai standartiškai bus paslėpti. Užvedus pele virš „Lietuvos“, galvas iškiš mūsų sostinė, laikinoji sostinė ir uostamiestis. Pervedus pelę virš „Deutschland“, Lietuvos miestai iškeliaus išgert arbatos, vietą užleisdami didžiausiems Vokietijos miestams.
Gudrybė Nr.3. Jeigu dinaminiame puslapyje reikia vieno jungiklio aktyvavimu kaitalioti daugybės išsimėčiusių elementų matomumą, tuomet naudoti CSS klasę hidden nėra efektyvu. Vietoj to visiems išsimėčiusiems slapukams suteiksim CSS klasę hidable, kuri pati savaime neturės jokių stiliaus taisyklių. O tik kombinuojant kartu su kita klase collapse ji taps nematoma. Štai pavyzdėlis, kuriame priklausomai nuo žymimojo langelio būsenos, bus rodomi arba slepiami neprivalomi formos laukai.
HTML:
<form action="" method="post" id="game_options">
<div class="to_show">
<label for="hide_optional">Slėpti neprivalomus laukus</label>
<input type="checkbox" id="hide_optional" />
</div>
<div>
<label for="nickname">Žaidėjo vardas</label>
<input type="text" id="nickname" name="nickname" />
</div>
<div class="hidable">
<label for="avatar">Avataro URI</label>
<input type="text" id="avatar" name="avatar" />
</div>
<div>
<label for="level">Sunkumo lygis</label>
<select id="level" name="level">
<option value="easy">Lengvas</option>
<option value="medium">Vidutinis</option>
<option value="hard">Sunkus</option>
</select>
</div>
<div class="hidable">
<label for="skill">Super galia</label>
<select id="skill" name="skill">
<option value="flying">Skraidymas</option>
<option value="invisibility">Nematomumas</option>
<option value="digging">Rausimasis</option>
</select>
</div>
<div><input type="submit" /></div>
</form>
CSS (iš atskiro failo):
.collapsed .hidable {
display: none;
}
Javascript (iš atskiro failo):
$(document).ready(function() {
$("#hide_optional").click(function() {
if ($(this).attr("checked")) {
$("#game_options").addClass("collapsed");
} else {
$("#game_options").removeClass("collapsed");
}
});
});
Pasikrovus statiškam puslapiui, pamatytume formą su visais įvesties laukais, išskyrus žymimąjį langelį, skirtą paslėpti neprivalomus laukus. Dinamiškame puslapyje šypsotųsi visi laukai tol, kol neužbrėžtume varnelės žymimajam langely. Varnelė paslėptų avataro ir super galios įvesties laukus.
Na ką gi. Susidomėjai, kaip matau? 
Tai nebesislapstom, puolam prie darbo ir keliam interneto kokybę.
Tags: programavimas, žiniatinklis2.0
Loading ...
