POSLEDNÍ ŠANCE: Halloweenská akce brzy končí. Získej 66 % extra kreditů zdarma při nákupu od 1199 kreditů s promo kódem NEBOJSEIT66. Zjisti více:
NOVINKA: Začni v IT jako webmaster s komplexním akreditovaným online kurzem Tvůrce WWW stránek. Zjisti více:
Funkce, kterou se snažíš použít je dostupná pouze pro registrované uživatele. Buďto se přihlas nebo si zdarma vytvoř nový účet.

Diskuze – Lekce 12 - Bootstrap - List groups

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Daniel Šup
Člen
Avatar
Daniel Šup:8.7.2018 22:12

Zdravím,
pěkný článek. Jen by mě zajímalo, k čemu slouží atribut aria-controls a proč se v ukázkovém kódu s taby využívá.

Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na Daniel Šup
Ondřej Štorc:8.7.2018 22:18

Aria atributy slouží k zpřístupnění webu lidem s nějakým postižením a využívají ho například čtečky obrazovek.

Odpovědět
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Daniel Šup
Člen
Avatar
Odpovídá na Ondřej Štorc
Daniel Šup:8.7.2018 22:19

Ahoj, díky za tvou odpověď.

Avatar
LBelka
Člen
Avatar
LBelka:30.5.2022 15:27

Článek super až na poslední ukázku, kde je sice hezky napsáno "Pokud do stránky připojíme i Bootstrap JavaScript", ale jak to uděláme - co, kam, jak? Poslední řádky s JavaScriptem jsou zde tedy trochu mimo znalostní postup kurzem.

Avatar
Pavel Kupčík
Člen
Avatar
Pavel Kupčík:20.1.2023 12:37

Viděl jsem nadpis "Taby" a říkám si hurá. A pak přišlo zklamání v podobě nedotažené lekce, tak holt budu muset studovat jinde.

Avatar
Karel Zaoral
Člen
Avatar
Karel Zaoral:2.2.2024 14:06

Děkujeme za vaše podněty. Lekci jsme aktualizovali :-)

Avatar
Lumír RAJSKÝ
Člen
Avatar
Lumír RAJSKÝ:21.8.2024 21:55

Poslední část "Přepínání pomocí JavaScriptu", jako by do této lekce ani nepatřila, vůbec netuším co tím chtěl autor říci. :o(

Avatar
Jan Hadviga
Člen
Avatar
Jan Hadviga:18.10.2024 8:52

Článek dobrý až na poslední ukázku přepínání, protože mi chybí ucelený kód, který bude pro začátečníka funkční na první dobrou. Chápe někdo z autorů, že cílem lekce od začátku do konce je mít ucelený projekt na kterém se dá pracovat a každý další kus rozšiřuje jen ten předešlý?

Avatar
Lukáš Kuběna
Člen
Avatar
Lukáš Kuběna:10. června 10:23

Trochu uspěchaný konec článku

Avatar
Roman Sabadka
Člen
Avatar
Roman Sabadka:16. června 21:49

ak by niekto chcel : celý súbor s funkčným kódom na časovač prepínania medzi tabmi (aj s vysvetlením)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page ♪♫ 2</title>

        <!-- Bootstrap CSS (CDN) -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

    <br/>
    <div class="container mt-4">
        <div class="row">
        <div class="col-4">
            <div class="list-group" role="tablist">
            <a class="list-group-item list-group-item-action active" id="list-events-list" data-bs-toggle="list" href="#list-events" role="tab" aria-controls="Events">Events</a>
            <a class="list-group-item list-group-item-action" id="list-news-list" data-bs-toggle="list" href="#list-news" role="tab" aria-controls="News">News</a>
            <a class="list-group-item list-group-item-action" id="list-articles-list" data-bs-toggle="list" href="#list-articles" role="tab" aria-controls="Articles">Articles</a>
            <a class="list-group-item list-group-item-action disabled" id="list-auctions-list" data-bs-toggle="list" href="#list-auctions" role="tab" aria-controls="Auctions">Auctions</a>
            </div>
        </div>
        <div class="col-8">
            <div class="tab-content">
            <div class="tab-pane fade show active" id="list-events" role="tabpanel" aria-labelledby="list-events-list">Tab content for events</div>
            <div class="tab-pane fade" id="list-news" role="tabpanel" aria-labelledby="list-news-list">Tab content for news</div>
            <div class="tab-pane fade" id="list-articles" role="tabpanel" aria-labelledby="list-articles-list">Tab content for articles</div>
            </div>
        </div>
        </div>
    </div>

    <script>
        // Získaj všetky odkazy s možnosťou prepínania tabov (okrem disabled)
        const tabs = Array.from(document.querySelectorAll('a[data-bs-toggle="list"]:not(.disabled)'));
        let currentIndex = 0;

        setInterval(() => {
        // Získaj aktuálny a ďalší tab
        const currentTab = tabs[currentIndex];
        currentIndex = (currentIndex + 1) % tabs.length;
        const nextTab = tabs[currentIndex];

        // Prepni na ďalší tab
        const tabInstance = new bootstrap.Tab(nextTab);
        tabInstance.show();
        }, 2000); // Každé 2 sekunduy
    </script>

    <!-- Bootstrap JS (CDN) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>

</html>
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.