nagradzam tutoriale

  • Pokazywanie i ukrywanie kodu

    dodano 17.09.2007 / komentarzy: 0 / autor: palmiak

    Załóżmy, że chcemy na naszej stronie umieścić troszkę kodu. Jednak chcielibyśmy go ukryć troszkę. Jezeli kogoś będzie interesował to sobie kliknie w linka i mu się wszystko pokaże. Jak to zrobić? Oczywiście za pomocą jquery.

    Jako, że przygotowywałem akurat taki skrypcik pod wordpress’a to nazwy klas pokrywają się z tymi z jakich korzysta wtyczka Dean’s Code Highlighter.

    Jquery w akcji

    Utwórzcie nowy dokument, np pokaz.js o następującej zawartości:

    $(document).ready(function() {
            $(".ch_code_container").after("<a href=\"#\" class=\"show\">Pokaż</a>").hide();
            $("a.show").click(function() {
                    $(this).prev(".ch_code_container").slideToggle("slow");
                    return false;
            }).toggle(function() { $(this).text(’schowaj’); }, function() { $(this).text("Pokaż"); });
     });
     

    Działa to następująco: najpierw skrypt wyszukuje wszystkie elementy o klasie ch_code_container oraz za nimi umiesza link pokaż/ukryj kod, by ostatecznie ukryć elementy o klasie ch_code_container.

    Następnie jeśli user kliknie na któryś z linków to skrypt wyszukuje poprzedni ch_code_container i go pokazuje lub ukrywa (w zależności od obecnego stanu).

    Zobaczcie jak to działa w praktyce.

    Nie zapomnijcie przed użyciem pobrać i wkleić odpowiedni kod dotyczący jquery, bo bez tego skrypt nie zadziała.

    Napisz komentarz