9. diel - Štýlovanie v jQuery

V minulej lekcii, Selektory v jQuery, časť tretia , sme dokončili selektory v jQuery. V dnešnom tutoriále najpopulárnejší javascriptové knižnice sa budeme zaoberať stylovaním.

Vytvorenie stránky

Asi vás neprekvapí, že si na začiatku vytvoríme opäť HTML súbor a JS súbor.

JS **

Do JS si vložíme základnú kostru:

$(function() {
    // Kód, který se spustí až po načtení stránky
});

Html

Do HTML si vložíme nasledujúci kód:

<ul>
    <li>Apophis</li>
    <li>Anubis</li>
    <li>Ba'al</li>
    <li>Sokar</li>
    <li>Ti</li>
    <li>Ra</li>
</ul>

A rovno si pridáme tiež štýly:

body {
    background: #e5e5e5;
    color: #3d3d3d;
    margin: 0px;
}

* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style-type: none;
    border: 0px;
}

ul {
    float: left;
    padding: 10px 20px;
    text-align: center;
}

ul li {
    background : #CACACA;
    color      : #444;
    width      : 100px;
    border     : 2px solid #A6A6A6;
    margin     : 10px 0;
    padding    : 5px 10px;
    font-family: 'Open Sans';
    font-size  : 18px;
    text-align: left;
}

Takto nejako vyzerá zatiaľ naše stránka:

Stylovať môžeme v jQuery čokoľvek, slúži nám na to niekoľko metód.

Css ()

Metóda css () nastavuje alebo číta CSS vlastnosti elementov. Ak chceme zistiť aká je napríklad farba textu, zadáme ako argument len názov tejto vlastnosti - teda "color". Ak túto vlastnosť chceme zmeniť, pridáme druhý argument, čo bude nová hodnota vlastnosti.

Názvy vlastností sú rovnaké ako v CSS. Môžeme použiť aj CamelCase zápis. Bude fungovať teda ako hodnota "background-color" tak i "backgroundColor".

Ukážka # 1

Skúsme si ostylovat dolnej a hornej rámček položiek oboma spôsobmi:

$("ul li").css("borderTop", "2px solid red");
$("ul li").css("border-bottom", "2px solid blue");

výsledok:

Namiesto predošlého kódu môžeme napísať všetko za seba, pretože jQuery metóda vracia opäť jQuery objekt. Všetko zapíšeme teda takto:

$("ul li").css("borderTop", "2px solid red").css("border-bottom", "2px solid blue");

Ukážka # 2

Ak by sme chceli nastaviť viac štýlov naraz, poslúžia nám na to JSON objekt. Ten odovzdáme zas ako argument metódy. Ukážme si príklad vyššie s použitím JSON objektu. Táto možnosť je oveľa praktickejšie a nemusíme písať toľkokrát css() metódu.

$("ul li").css({
    "borderTop" : "2px solid red",
    "border-bottom" : "2px solid blue"
});

výsledok:

JSON objekt samozrejme môžeme vytvoriť aj skôr a odovzdať ho v premennej:

let mujStyl = {
    "borderTop" : "2px solid red",
    "border-bottom" : "2px solid blue"
}
$("ul li").css(mujStyl);

Ukážka # 3

Dobre, ale ako budeme postupovať, keď budeme chcieť zistiť hodnoty viac vlastností? K tomuto účelu využijeme poľa. Pole obsahujúce názvy vlastností, ktoré chceme zistiť, jednoducho odovzdáme ako argument metódy css(). Ak by nás zaujímali napr. Vlastnosti width, color a border, získali by sme hodnoty ich všetkých napísaním:

let styly = $(this).css(["width", "color", "border"]);

Prieskumník

Vytvorme si ukážkový prieskumný elementov. Po kliknutí na nejaký element na stránke nám vypíše hodnoty týchto vlastností pre tento element. Na koniec body pridáme div#.

<div id="zpravy"></div>

Vytvoríme si tiež pole s textovými hláškami, ktoré na konci vypíšeme.

let zpravy = ["Tato položka má tyto styly:"];
let styly = $(this).css(["width", "color", "border"]);

Premenná styly obsahuje objekt, ten má podobu vlastnost: "hodnota". Teraz pomocou metódy $.each() získame z objektu postupne danej vlastnosti a ich hodnoty. Ako parametre odovzdáme premennú styly a anonymný funkciu. Tá bude mať dva parametre - vlastnosť a hodnotu.

Do našich správ pridáme vždy vlastnosť a hodnotu oddelenou ":".

$.each(styly, function(vlastnost, hodnota) {
    zpravy.push( vlastnost + " : " + hodnota );
});

Teraz máme už kompletné pole správ a stačí nám ho len vypísať. Položky pole spojíme do jedného reťazca pomocou metódy join(). Ako oddeľovač použijeme elementy <br>, aby sa jednotlivé správy o štýloch vypísali na samostatné riadky.

$("*").on("click", function(e) {
    let zpravy = ["Tato položka má tyto styly:"];
    let styly = $(this).css(["width", "color", "border"]);
    $.each( styly, function( vlastnost, hodnota ) {
        zpravy.push( vlastnost + " : " + hodnota );
    });
    let zprava = zpravy.join("<br>");
    $("#zpravy").html(zprava);
    e.stopPropagation();
});

Živé demo:

Naša funkcia bude fungovať pre všetky elementy na stránke. Použili sme metódu udalosti e.stopPropagation(), ktorá zastaví propagáciu udalosti kliknutí na ďalšie elementy. V opačnom prípade by sa obslúžila 3 kliknutí:

1. na <li>,
2. na <ul>
3. na <body>

A videli by sme vždy len informácie pre <body>.

Width () a height ()

Pomocou jQuery môžeme meniť tiež šírku a výšku elementov. Tieto funkcie nám nemení CSS vlastnosti, ale nastavujú inline štýly priamo na elementu, tzn. že sa zapíšu do atribútu style="". Ak chceme šírku alebo výšku zistiť, neuvádzame žiadne argumenty. Ak chceme túto hodnotu zmeniť, ako argument pridáme novú hodnotu.

Ukážka # 4

Skúsme si zmenu šírky na predchádzajúcom príklade. Na koniec anonymný funkcie pripíšeme nasledujúci kód:

$(this).width($(this).width() + 10);

Živé demo:

Vidíme, že po kliknutí na element sa nám jeho šírka zväčšuje o 10px.

InnerWidth () a innerHeight ()

Tieto metódy do šírky a výšky započítavajú aj padding, inak fungujú rovnako ako tie predošlé.

Ukážka # 5

Ukážme si, či je naozaj rozdiel medzi metódami width() a innerWidth().

Jednotlivé rozmery si necháme vypísať opäť do divu #zpravy.

let zpravy = [];
zpravy.push("width: " + $("ul li").width());
zpravy.push("inner width: " + $("ul li").innerWidth());
let zprava= zpravy.join("<br>");
$("#zpravy").html(zprava);

výsledok:

A naozaj môžeme vidieť, že rozdiel tu je.

OuterWidth () a outerHeight ()

Tieto metódy nám vypočítajú rozmery elementu ako s padding, tak aj s marginom a border. Metódy fungujú rovnako ako tie predošlé.

Ukážka # 6

Skúsme si vypísať do konzoly hodnoty vrátenej všetkými tromi metódami. Padding máme nastavený 10px na každú stranu, margin nemáme žiadny a border máme 2px na každú stranu.

Príklad:

let zpravy = [];
zpravy.push("width: " + $("ul li").width());
zpravy.push("inner width: " + $("ul li").innerWidth());
zpravy.push("outer width: " + $("ul li").outerWidth());
let zprava= zpravy.join("<br>");
$("#zpravy").html(zprava);

výsledok:

Vidíme, že výsledok je korektné.

Offset () a position ()

Dvojica metód slúži pre zisťovanie pozície elementu v dokumente. Je medzi nimi malý rozdiel. Metóda offset() vracia pozíciu od úplného začiatku <body> elementu, kdežto position() vracia pozíciu od začiatku rodičovského elementu. Pozícia je navrátená ako objekt s vlastnosťami top a left.

Ukážka # 7

Nastylujte si "ul li" tak, aby bol margin-top napr. 50px, tak rozdiel dobre uvidíme.

$("ul li").css("marginTop", 50);

$("ul li").on("click",function() {
    let zpravy = [];
    zpravy.push("offset left: " + $(this).offset().left + ", top: " + $(this).offset().top);
    zpravy.push("position left: " + $(this).position().left + ", top: " + $(this).position().top);
    let zprava= zpravy.join("<br>");
    $("#zpravy").html(zprava);
});

Živé demo:

Môžeme si všimnúť, že prvá položka je vzdialená od začiatku body 60px. offset() bol vypočítaný ako 10px margin od <ul> a 50px margin od <li>. Pozícia je položky je 10px od <ul>, túto hodnotu nám vráti metóda position().

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.