Artykuły:

  • data publikacji: 05.08.2008

    Zakładki do sidebara

    kategoria: Skrypty client-side, XHTML/CSS autor: palmiak

    Zakładki do sidebara

    Jako szczęśliwi posiadacze blogów, po pewnym czasie natrafiamy na problem rozrostu sidebara do ogromnych rozmiarów. Jednym ze sposobów jest skorzystać z dobrodziejstw javascript i porobić
    zakładki.

    pobierz pobierz

    xhtml i css

    Nasze zakładki zamkniemy w <div> o jakimś id (w naszym przypadku będzie to zakladki). W środku zaś umieścimy <h2><a href="#">tytuł</a></h2>, które będą nam służyć do przełączania między treściami oraz <div> w które będą te treści zawarte. W skrócie będzie to wyglądać tak

    <div id="sidebar">
    <div id="zakladki">
            <h2><a href="#about">O mnie</a></h2>
            <h2><a href="#archiwum">Archiwum</a></h2>
            <h2><a href="#links">Przyjaciele</a></h2>
           
            <div id="about">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius viverra mi. Maecenas mattis metus sit amet nibh. Aliquam aliquet, diam at semper tristique
            </div>
           
            <div id="archiwum">
                <ul>
                    <li><a href="#">Lipiec 2008</a></li>
                    <li><a href="#">Czerwiec 2008</a></li>
                    <li><a href="#">Maj 2008</a></li>
                    <li><a href="#">Kwiecień 2008</a></li>
                </ul>
            </div>
           
            <div id="links">
                <ul>
                    <li><a href="#">vivee.info</a></li>
                    <li><a href="#">tutoriale.vivee.info</a></li>
                    <li><a href="#">3d.vivee.info</a></li>
                </ul>
            </div>
        </div>
    </div>

    #sidebar umieściłem bardziej, żeby ułatwić sobie stylowania oraz do późniejszej demonstracji.

    Id divów oraz kotwice są tylko na wypadek, gdyby użytkownik wyłączył js.

    Czas to jeszcze ostylować:

    * {
            margin:0;
            padding:0;
    }

    body {
            background:#2B2B2B;
    }

    #sidebar {
            width:250px;
            padding:20px 0;
            margin:0 auto;
            font:.75em Verdana, Arial, Helvetica, sans-serif;
            line-height:1.5em;
            color:white;
    }

    #sidebar div div {
            list-style:none;
            background:#4E4E4E;
            padding:8px;
    }

    h2 {
            display:inline;
            font-size:1em;
            margin:0 4px 0 0;
    }

    h2 a {
            background:#4E4E4E;
            padding:5px;
            text-decoration:none;
            color:white;
    }

    h2 a:hover, a.active {
            background:#C20000;
    }

    #sidebar ul {
            list-style:none;
    }

    #sidebar ul a {
            color:#FFFFFF;
            text-decoration:none;
    }

    #sidebar ul a:hover {
            color:#E7E7E7;
    }

    Oczywiście styl możecie dowolnie modyfikować - nie ma on żadnego wpływu na działanie skryptu.

    jQuery

    Działanie skryptu, który to wszystko obsługuje jest bardzo proste. Najpierw nadajemy pierwszemu <h2> klasę active oraz ukrywamy wszystkie poza pierwszym <div>.

    Kiedy ktoś kliknie w jakieś <a>, które znajduje się w <h2> następuje seria czynności:

    • liczymy, który to jest w naszym divie <h2> i przypisujemy to zmiennej licznik
    • usuwamy klasę active z <h2>
    • <h2> w którym znajduje się wybrany przez nas link dodaje klasę active
    • ukrywa wszystkie widoczne <div> w naszym divie
    • pokazuje odpowiedniego diva - do tego potrzebna nam była zmienna licznik, bo div będzie ten sam w kolejności co <h2>

    Wyglądać to będzie tak:

    function tabs(id) {
             $("#"+id+" h2:first a").addClass("active");                           
                    $("#"+id+" div").not(":first").hide();
                   
                    $("#"+id+" h2 a").click(function() {
                            var licznik = $("#"+id+" h2 *").index(this);                                             
                                                                                     
                            $("#"+id+" h2 a").removeClass("active");
                            $(this).addClass("active");
                            $("#"+id+" div:visible").hide();
                           
                            $("#"+id+" div").eq(licznik).show();
                            return false;
                    });
     }

    Jest to wersja, która pozwala na zastosowanie kilku serii zakładek na jednej stronie, trzeba je tylko ubrać w diva o innym id.

    Pozostaje nam kwestia wywołania skryptu:

     $(document).ready(function(){
            tabs("zakladki");                      
      });

    W sumie wygląda to tak.

    Więcej zakładek

    Jak już wspominałem, żeby umieścić kilka serii zakładek wystarczy każdą z nich "ubrać" w diva o innym id.

    Jeszcze nasze zakładki znajdują się w divie #tab1 i #tab2 to wywołujemy to poprzez:

     $(document).ready(function(){
            tabs("tab1");
            tabs("tab2");          
      });

    Tutaj możecie zobaczyć jak to działa.

    Wersja finalna

    Ostatecznie powinno wyglądać to:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sidebar tabs</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="tab.js"></script>
    </head>

    <body>

    <div id="sidebar">

            <div id="zakladki">
            <h2><a href="#about">O mnie</a></h2>
            <h2><a href="#archiwum">Archiwum</a></h2>
            <h2><a href="#links">Przyjaciele</a></h2>
           
            <div id="about">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius viverra mi. Maecenas mattis metus sit amet nibh. Aliquam aliquet, diam at semper tristique
            </div>
           
            <div id="archiwum">
                <ul>
                    <li><a href="#">Lipiec 2008</a></li>
                    <li><a href="#">Czerwiec 2008</a></li>
                    <li><a href="#">Maj 2008</a></li>
                    <li><a href="#">Kwiecień 2008</a></li>
                </ul>
            </div>
           
            <div id="links">
                <ul>
                    <li><a href="#">vivee.info</a></li>
                    <li><a href="#">tutoriale.vivee.info</a></li>
                    <li><a href="#">3d.vivee.info</a></li>
                </ul>
            </div>
        </div>
       
       
    </div>

    </body>
    </html>

    jquery.js pobieramy oczywiście z serwisu jQuery.com.

    tabs.js powinno wyglądać tak:

    $(document).ready(function(){
            tabs("zakladki");      
      });

    function tabs(id) {
             $("#"+id+" h2:first a").addClass("active");                           
                    $("#"+id+" div").not(":first").hide();
                   
                    $("#"+id+" h2 a").click(function() {
                            var licznik = $("#"+id+" h2 *").index(this);                                             
                                                                                     
                            $("#"+id+" h2 a").removeClass("active");
                            $(this).addClass("active");
                            $("#"+id+" div:visible").hide();
                           
                            $("#"+id+" div").eq(licznik).show();
                            return false;
                    });
     }
     

    Podsumowanie

    Dzięki temu tutorialowi zakładki nie powinny stanowić dla Was problemu. Pozostaje teraz podpiąć to pod jakiegoś CMS'a.

    Warto przeszperać też starsze tutoriale na vivee i spróbować podpiąć jakieś dodatkowe efekty przenikania (może fade?) czy spróbować dodać jeszcze obsługę cookies.

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    18 Responses to “Zakładki do sidebara”

    1. Arkadiusz pisze:

      wielkie dzięki Palmiak bo zawsze mnie to zastanawiało jak to zrobić :)

    2. KamilGeneral pisze:

      Szkoda, że do tego potrzebny jest javascript.
      Nie da się czasem samym css’em?

    3. agressiva pisze:

      KamilGeneral – teoretycznie się da, ale jeżeli nie jesteśmy webmasterami, którzy leją na niektóre przeglądarki i chcemy żeby działalo to wszędzie to JS jest bardzo wskazane.

    4. palmiak pisze:

      A co złego w odrobinie js? Skrypt jest tak skonstruowany, że nawet osoby z wyłączonym js nie ucierpią (wszystko zostanie rozwinięte).

    5. m1chu pisze:

      Tut przydatny, bo konkretny ;] Nie mniej jednak jeśli już się używa frameworków w stylu jQuery to można by to chociażby zaanimować jakoś. W przeciwnym razie po co je wykorzystywać skoro można oprzeć się stricte na JSie? :>

    6. palmiak pisze:

      m1chu, póki co mamy pierwszą część tutoriala rzeki. Wiadomo, że mozna to zanimować, obsługę ciastek dodać, zademonstrować podpięcie pod różne CMSy etc etc (czekam na pozostałem propozycje).

    7. Arkadiusz pisze:

      Palmiak a mógłbyś pokazać jak podczepić do WordPress’a

    8. agressiva pisze:

      Arek – będzie taki tutek – już Maciek przy nim pracuje :)

    9. Arkadiusz pisze:

      Agressive dziękuje za odpowiedź bo sam próbowałem ale popełniam jakiś byk :/

    10. agressiva pisze:

      Niech zgadnę – problem z template tagami?
      Czy bardziej z działaniem samych zakładek? :)

      PS. Jak pamiętam, miałam otrzymac od Ciebie maila… :)

    11. Arkadiusz pisze:

      Agressive pierwsze to że coś nie tak z stylami i działanm :/ a druga sprawa wolałbym porozmawiać :) na gg lub innym komunikatorze

    12. agressiva pisze:

      Arek – wieczorem jestem tak padnięta, że nie mam pary na gg :)

    13. Arkadiusz pisze:

      Agressive szkoda bo chętnie bym pogadał bo tak na Vivee to tylko zapycham system :) nie potrzebnymi komentarzami :)

    14. agressiva pisze:

      To napisz do mnie na maila :) Jutro mnie nie będzie – najwyżej wieczorem, ale odpowiem na pewno :)

      Zresztą niedługo na vivee będzie nowy ficzer :P

    15. m1chu pisze:

      Witam,

      Niektórzy mogą mieć problem z współdziałaniem kilku frameworków (np. jQuery + MooTools). Dzieję się tak np. w przypadku instalacji jakiejś wtyczki korzystającej z drugiej podanej przeze mnie biblioteki i użycia zakładek z tego kursu. Jedno z dwóch może wtedy nie działać prawidłowo (w przypadku zakładek nie zostaną one ukryte, ani nie będzie można pomiędzy nimi przechodzić). Problem nie dotyczy tylko i wyłącznie WordPress, ale także innych skryptów w których używa się kilku bibliotek JavaScript.

      Jeśli ktoś będzie miał takowy problem, zapraszam tutaj: http://m1chu.eu/wordpress/kolizje-wspoldzialania-bibliotek-javascript-na-podstawie-wtyczek-wordpress

      Pozdrawiam,
      m1chu

    16. Janek pisze:

      Dzięki, przydało się :)

    17. SpeX pisze:

      Nie wiem czemu, ale mi te zakładki nie chcą działać. Próbowałem nawet tego co napisał m1chu. I też nic :/ Ma ktoś jeszcze inny pomysł?

    18. Privsand pisze:

      Witam, także posiadam bloga w wordpressie i zabawa zakładkami razem z cssem nie należy do najmilszych sposobów edycji motywu, jednak do tej pory nie działa mi jedna funkcja, posiadam zakładki wstawione na stronę, jednak nie w sidebarze i po kliknięciu w jedną z nich, zamiast przybierać wygląd zaznaczonej zakładki, ona wraca z powrotem do punktu wyjścia. Czym to może być spowodowane?
      Pozdrawiam

    Leave a Reply

Komentarze

Kategorie

Top 10

  • CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
  • Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
  • Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
  • Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
  • Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
  • Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
  • Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
  • Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
  • Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
  • Skrypty client-side
  • Skrypty server-side
  • Tutoriale
  • Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
  • Wieczór z Open Source
  • Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
  • Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
  • XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej