Lekce 9 - Stylování v jQuery

V minulé lekci, Selektory v jQuery, část třetí, jsme si ukázali zbytek pseudoselektorů, co nám jQuery nabízí.

V dnešním tutoriálu nejpopulárnější javascriptové knihovny se budeme zabývat stylováním.

Vytvoření stránky

Asi vás nepřekvapí, že si na začátku vytvoříme opět HTML soubor a JS soubor.

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 následující kód:

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

A rovnou si přidáme také styly:

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 nějak vypadá zatím naše stránka:

Stylovat můžeme v jQuery cokoli, slouží nám na to několik metod.

css()

Metoda css() nastavuje nebo čte CSS vlastnosti elementů. Pokud chceme zjistit jaká je například barva textu, zadáme jako argument jen název této vlastnosti - tedy "color". Pokud tuto vlastnost chceme změnit, přidáme druhý argument, což bude nová hodnota vlastnosti.

Názvy vlastností jsou stejné jako v CSS. Můžeme použít i camelCase zápis. Bude fungovat tedy jak hodnota "background-color" tak i "backgroundColor".

Ukázka #1

Zkusme si ostylovat dolní a horní rámeček položek oběma způsoby:

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

Výsledek:

Místo předešlého kódu můžeme napsat vše za sebe, jelikož jQuery metoda vrací opět jQuery objekt. Vše zapíšeme tedy takto:

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

Ukázka #2

Pokud bychom chtěli nastavit více stylů najednou, poslouží nám k tomu JSON objekt. Ten předáme zas jako argument metody. Ukažme si příklad výše s použitím JSON objektu. Tato možnost je mnohem praktičtější a nemusíme psát tolikrát css() metodu.

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

Výsledek:

JSON objekt samozřejmě můžeme vytvořit i dříve a předat jej v proměnné:

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

Ukázka #3

Dobře, ale jak budeme postupovat, když budeme chtít zjistit hodnoty více vlastností? K tomuto účelu využijeme pole. Pole obsahující názvy vlastností, které chceme zjistit, jednoduše předáme jako argument metody css(). Pokud by nás zajímaly např. vlastnosti width, color a border, získali bychom hodnoty jich všech napsáním:

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

Průzkumník

Vytvořme si ukázkový průzkumní elementů. Po kliknutí na nějaký element na stránce nám vypíše hodnoty těchto vlastností pro tento element. Na konec body přidáme div#.

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

Vytvoříme si také pole s textovými hláškami, které na konci vypíšeme.

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

Proměnná styly obsahuje objekt, ten má podobu vlastnost: "hodnota". Nyní pomocí metody $.each() získáme z objektu postupně dané vlastnosti a jejich hodnoty. Jako parametry předáme proměnnou styly a anonymní funkci. Ta bude mít dva parametry - vlastnost a hodnotu.

Do našich zpráv přidáme vždy vlastnost a hodnotu oddělenou ":".

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

Nyní máme již kompletní pole zpráv a stačí nám ho jen vypsat. Položky pole spojíme do jednoho řetězce pomocí metody join(). Jako oddělovač použijeme elementy <br>, aby se jednotlivé zprávy o stylech vypsaly na samostatné řádky.

$("*").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še funkce bude fungovat pro všechny elementy na stránce. Použili jsme metodu události e.stopPropagation(), která zastaví propagaci události kliknutí na další elementy. V opačném případě by se obsloužila 3 kliknutí:

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

A viděli bychom vždy jen informace pro <body>.

width() a height()

Pomocí jQuery můžeme měnit také šířku a výšku elementů. Tyto funkce nám nemění CSS vlastnosti, ale nastavují inline styly přímo na elementu, tzn. že se zapíší do atributu style="". Pokud chceme šířku nebo výšku zjistit, neuvádíme žádné argumenty. Pokud chceme tuto hodnotu změnit, jako argument přidáme novou hodnotu.

Ukázka #4

Zkusme si změnu šířky na předchozím příkladu. Na konec anonymní funkce připíšeme následující kód:

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

Živé demo:

Vidíme, že po kliknutí na element se nám jeho šířka zvětšuje o 10px.

innerWidth() a innerHeight()

Tyto metody do šířky a výšky započítávají i padding, jinak fungují stejně jako ty předešlé.

Ukázka #5

Ukažme si, jestli je opravdu rozdíl mezi metodami width() a innerWidth().

Jednotlivé rozměry si necháme vypsat opět 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ýsledek:

A opravdu můžeme vidět, že rozdíl tu je.

outerWidth() a outerHeight()

Tyto metody nám vypočítají rozměry elementu jak s paddingem, tak i s marginem a borderem. Metody fungují stejně jako ty předešlé.

Ukázka #6

Zkusme si vypsat do konzole hodnoty vrácené všemi třemi metodami. Padding máme nastavený 10px na každou stranu, margin nemáme žádný a border máme 2px na každou stranu.

Pří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ýsledek:

Vidíme, že výsledek je korektní.

offset() a position()

Dvojice metod slouží pro zjišťování pozice elementu v dokumentu. Je mezi nimi malý rozdíl. Metoda offset() vrací pozici od úplného začátku <body> elementu, kdežto position() vrací pozici od začátku rodičovského elementu. Pozice je navrácena jako objekt s vlastnostmi top a left.

Ukázka #7

Nastylujme si "ul li" tak, aby byl margin-top např. 50px, tak rozdíl dobře 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šimnout, že první položka je vzdálena od začátku body 60px. offset() byl vypočítán jako 10px margin od <ul> a 50px margin od <li>. Pozice je položky je 10px od <ul>, tuto hodnotu nám vrátí metoda position().

V další lekci, Jak na vlastní jQuery plug-in, si ukážeme, jak na vlastní jQuery plug-in.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.