Diskusia – 12. diel - Bootstrap - List groups

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Daniel Šup

Člen

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

Odpovedať

Ondřej Štorc

Tvůrce

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.

Odpovedať

Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..

Daniel Šup

Člen

Daniel Šup:8.7.2018 22:19

Ahoj, díky za tvou odpověď.

Odpovedať

LBelka

Člen

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.

Odpovedať

Pavel Kupčík

Člen

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.

Odpovedať

Karel Zaoral

Člen

Karel Zaoral:2.2.2024 14:06

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

Odpovedať

Lumír RAJSKÝ

Člen

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

Odpovedať

Jan Hadviga

Člen

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ý?

Odpovedať

Lukáš Kuběna

Člen

Lukáš Kuběna:10. júna 10:23

Trochu uspěchaný konec článku

Odpovedať

Roman Sabadka

Člen

Roman Sabadka:16. júna 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>

Odpovedať

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 10.

Najčastejšie vyhľadávané

Diskusia – 12. diel - Bootstrap - List groups