AAiddennium » BLOG «

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ę.

Ko pasigendu debugindamas JavaScript skirtingose naršyklėse – tai paprasta į FireBug panaši JavaScript’o konsolė, kur galėtum vykdyti komandas tiesiogiai bet kuriam atverstam puslapiui ir iškart gauti rezultatus.

Pavyzdžiui:
>>> document.body.innerHTML
"<div class=\"navi\">..."
parodys sugeneruotą atverto puslapio HTML kuris gali skirtis nuo puslapio išeities tekstų, nes koks JavaScript’as jau gali būti juos modifikavęs.
O
>>> document.cookie="testinis_kukis=testine_reiksme"
nustatys dokumentui testinį sausainėlį.

Kaip ypač paprastą alternatyvą JavaScript’o konsolei, parašiau Bukmarkletą/Feivletą, kuris vykdo įvestą JavaScript’o komandą ir parodo rezultatą: Paprasta JavaScript’o konsolė. Diegimas paprastas – tiesiog pridėk nuorodą prie savo Bookmarks/Favorites.

Jei turi šiek tiek laiko, nori pasipraktikuoti JavaScript’ą ir padaryti Pasaulį geresne vieta gyventi, turiu užduotį būtent tau! Sukurk atvirojo kodo visose moderniose naršyklėse veikiančią JavaScript’o konsolę, kuri galėtų būti įterpta į bet kurį puslapį feivleto/bukmarkleto pagalba. Arba sukurk feivletą/bukmarkletą, kuris pakrauna ir įterpia egzistuojančią Ext Debug Console į bet kurį žiniatinklio puslapį.
Pagalbai, kaip pakrauti JavaScript failą iš bukmarkleto/feivleto, pasinaudok pasiekiamais spausdiniais, kuriuos sukūriau anksčiau. Konsolė turėtų visus rezultatus parodyti skaitomo formato. Visi objektai turėtų pasakyti, kokius jie turi atributus, visos kolekcijos ir masyvai turėtų išdėstyti savo turinį [narys1,narys2,narys3] formate.

Tavo kodas bus peržiūrėtas ir įvertintas. Pasiūlysiu patobulinimų. Tada paimsiu interviu ir išdidžiai pabloginsiu.

ATNAUJINTA! Čia mano paties anksčiau tau iškeltos užduoties sprendimas: Pakrauk Firebug Lite. Veikia moderniose naršyklėse, kuriose nėra įdiegtas Firebug.

Jau kurį laiką nerašiau į blogą, nes nusprendžiau, kad „mažiau kalbų, daugiau darbų“, ir panirau į internetinio Halmos žaidimo programavimą. Žinau žinau, jis per ilgai kuriamas. Man reikėtų daugiau ryžto ir valios prisėst prie jo laisvu metu, kas nėra paprasta, kai užsikabliuoji LOST’uose ir dar pradedi sportuoti (kad nesutrūnyčiau). Bet stengiuos. Ir štai priėjau liepto galą.

Animaciniai veikėjai moka iš mažo lagaminėlio išsitraukti didelį kūjį ar kitą daiktą. O aš moku tokį HTML ir CSS fokusą: mažame lentelės langelyje patalpinu didelį kvadratą. Mano problema ta, kad IE mano fokusą interpretuoja ne taip, kaip Firefox bei Opera. Man reikia, kad didelis kvadratas būtų pakilęs virš lentelės, kurioje jis yra, o IE jis uždengiamas iškart po jo einančių langelių kraštais.

HTML pavyzdys

Gal kas nors žino, kaip IE pasiekti tokį pat rezultatą kaip su Firefox ir Opera?

Dažniausiai svetainėse, valdomose turinio valdymo sistemomis, turinys dedamas ne iškart dokumento <body> bloke, o giliau atskirame <div> bloke (ar — vaje, kokia gėda — lentelėje <table>). Ir neretai to vidinio bloko stilius skiriasi nuo paties dokumento stiliaus. Jei turinio valdymo sistemoje integruotas praturtinto teksto redaktorius, gebantis naudoti svetainės stilių, susiduriame su problema — redaguojamas turinys neatitinka tos išvaizdos, kuri bus svetainėje. Šios problemos sprendimas šitame straipsnyje.

Skirtingose naršyklėse veikiantys praturinto teksto redaktoriai, kaip kad TinyMCE, naudoja įterptinius rėmelius <iframe> savo pagrindui. Įterptiniui rėmeliui aktyvuojama redaguojamumo savybė, o rėmelio šaltiniu tampa naujas dokumentas su redaguojamo lauko turiniu dokumento <body> bloke. Pakraunamas svetainės pakopinių stilių failas ir redaguojamas turinys įgyja <body> žymei nurodytą stilių.

Tarkime, turime svetainę, kurioje tamsiame margame fone centruotas vienspalvis šviesus turinio blokas su tamsiom raidėm. Kai turinį redaguosim, įterptiniame rėmėlyje matysime ne tamsias raides šviesiame fone, o tamsias raides tamsiame margame fone. Taip atsitiks todėl, kad dokumento <body> stilius skiriasi nuo turinio bloko stiliaus, o praturtinto teksto redaktorius turinį deda ne į turinio bloką kaip svetainėje, o tiesiai į <body>.

Vienas iš sprendimų būtų pasiredaguoti praturtinto teksto redaktorių, kad tas apgauptų turinį atitinkamu turinio bloku, tačiau šis sprendimas gali pasirodyti komplikuotas. Reiktų įsigilinti į redaktoriaus ir turinio valdymo sistemos architektūrą, ir rašyti hakus, kurie ypač pasunkintų praturtinto teksto redaktoriaus atnaujinimą ateityje.

Mano siūlomas sprendimas būtų atitinkamai paredaguoti pakopinių stilių failą ir vienu prisilietimu pakeisti svetainės šabloną. Štai žingsniai, kuriuos reiktų atlikti:

1. Visą <body> žymei skirtą stilių priskirti tarkim CSS klasei „websiteBody“. Pavyzdžiui, tokį:

   
   body {
       color: black; /* tamsus tekstas */
       background: brown url("tamsus_margas.jpg"); /* tamsus margas fonas*/
   }
   

   perrašom taip:

   
   body {}
   .websiteBody {
       color: black; /* tamsus tekstas */
       background: brown url("tamsus_margas.jpg"); /* tamsus margas fonas*/
   }
   

2. Visas <body> priklausomybes perrašyti CSS klasei „websiteBody“. Pavyzdžiui, tokį:

   
   body blockquote { /* visoms citatoms, kurios yra body dalyje */
       margin: 0px;
       margin-left: 30px;
   }
   

   perrašom taip:

   
   .websiteBody blockquote { /* visoms citatoms, kurios yra body dalyje */
       margin: 0px;
       margin-left: 30px;
   }
   

3. Turinio bloko stilių nukopijuot į <body> aprašus, kurie būtų prieš „websiteBody“ klasės aprašus. Pavyzdžiui, taip:

   
   body {
       color: black; /* tamsus tekstas */
       background: yellow; /* šviesus vienspalvis fonas*/
   }
   .websiteBody {
       color: black; /* tamsus tekstas */
       background: brown url("tamsus_margas.jpg"); /* tamsus margas fonas*/
   }
   

4. Galiausiai <body> žymei svetainės šablone priskirti CSS klasę „websiteBody“:

   <body class="websiteBody">

Kadangi turinio valdymo sistemose naudojami praturinto teksto redaktoriai <body> žymę dokumente sukurs be CSS klasės, tai visam redaguojamam turiniui bus nurodytas toks stilius, kaip ir svetainėje turinio bloke. Tuo tarpu, svetainėje <body> stiliaus taisyklės bus perrašytos „websiteBody“ klasėje nurodytomis taisyklėmis, nes priskiriant taisykles, klasės turi didesnio prioriteto svarbą.

Šita gudrybė sėkmingai panaudota ne vienam mano projekte ir aš savo patirtį be gailesčio perduodu Tau!