Akordeon

Przyznam się, że nie wiedziałem jak nazwać tą notkę także wybaczcie mi to ;-) Chciałem napisać (specjalnie na prośbę Grzegorza Piechuły ;-] ) sposób w jaki przedstawione są u mnie notatki z minibloga.

Cel jaki chcemy osiągnąć to warstwa (w niej będzie treść notek), która zwija się i rozwija. Poza tym zrobimy tak, że gdy jedna notka będzie rozwinięta, a chcemy zobaczyć drugą to ta pierwsza posłusznie się zwinie, a dopiero później pokaże się druga.

Całość oparłem o framework jQuery, także należy się w niego wyposażyć. Na początku zaczniemy od zakodowania naszych notek:

<div id="notes">
        <h3>Nagłówek 1</h3>
        <div>
                <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                Morbi vel elit vel nulla accumsan euismod. 
                Cras nulla elit, aliquam placerat, consectetuer pulvinar, mattis in, lacus. 
                Maecenas nulla sapien, sollicitudin id, gravida non, porttitor quis, sapien.
                </p>
                <p class="up">[zamknij]</p>
        </div>
        
        <h3>Nagłówek 2</h3>
        <div>
                <p>
                Maecenas sed magna adipiscing justo facilisis volutpat. Maecenas at tellus. Aliquam erat volutpat.
                Morbi lobortis viverra urna. Sed non augue quis justo adipiscing blandit. 
                Aenean eros turpis, aliquet ac, adipiscing ut, porta mollis, ante.
                Aenean massa massa, faucibus ut, lacinia sed, dictum vitae, nulla.
                </p>
                <p class="up">[zamknij]</p>
        </div>
</div>

Poza tym możemy jeszcze ładnie opisać CSSem nasze notatki tak, żeby ładniej wyglądały ;-) Tak na stronie będą się one prezentowały na przeglądarkach, które nie korzystają, lub mają wyłączoną obsługę JavaScript.

Chciałem od razu uprzedzić, że blok z klasą "up" będzie służył do zamykania otwartych okienek, także na samym początku warto w stylach dopisać do tej klasy (".up") display na none tak aby blok niepotrzebnie pokazywał się w przeglądarce bez JSa.

Dla tych, którym nie chce się pisać wszystkiego zapraszam tutaj.

Teraz przejdziemy do kolejnego kroku. Dołączymy jQuery, oraz zapiszemy pierwsze linijki kodu, który "ułoży" nasze notatki w jednym miejscu oraz je schowie.

W sekcji head dopisujemy:

<script src="/sciezka/do/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function()
{
        // (...) <- tutaj będziemy wstawiali nasz kod ;-]
}
);
</script>

Do arkusza stylów dopisujemy klasę dla bloków div, w których są notki. Ta klasa będzie nadawała każdej notce pozycję absolutną (gdyby co chodzi o position:absolute; ;-] ), oraz będzie chowała w/w notki. Na potrzeby tego tekstu tą klasę nazwę po prostu "j".

Nasz skrypt, zaraz po załadowaniu drzewa DOM, musi nadawać wszystkim notkom klasę "j" (tak aby ją schować), oraz pokazać bloki z klasą "up", tak aby były widoczne po rozwinięciu notki. Przypominam, że bloki z klasą "up" będą służyły do zamykania rozwiniętych notatek.

$("#notes > div").addClass("j");
$("#notes p.up").show();

Teraz nadajemy zdarzenie click nagłówkom h3, które będzie pokazywało odpowiednie notki. Przy okazji nadamy blokom z klasą "up" zdarzenie click, po którym nasza notka schowie się.

$("#notes").children("h3").click(
function()
{
        $(this).next("div").slideToggle("normal");
        $("#notes > h3").not(this).next("div:visible").slideUp("fast");
}
);
$("#notes p.up").click(
function()
{
        $(this).parent().slideUp("normal");
}
);

Demo

Niestety jeszcze nie osiągnęliśmy do końca oczekiwanego efektu. Wprawdzie notka się rozwija, zwija itd... Problem jest w tym, że gdy chcemy zobaczyć drugą notkę, podczas gdy pierwsza jest widoczna, to jedna notka zwija się przy czym jednocześnie druga się rozwija. My chcemy zrobić tak aby najpierw pierwsza notka się zwinęła, a dopiero później druga się rozwinęła.

Można by było kombinować z wykorzystaniem jakiś funkcji typu sleep(), jednak gdy do metody slideUp (i nie tylko tej) przekażemy drugi parametr (pierwszy to prędkość zwijania/rozwijania) jako funkcję, zostanie ona wykonana po zakończeniu zwijania.

Brzmi strasznie? Na szczęście tak nie jest ;-) Zmienimy zdarzenie click nadane elementowi h3.

Problemem jest to jak sprawdzić czy już jakiś div jest rozwinięty. Na szczęście możemy wykorzystać metodę is(), która zwraca wartość TRUE, lub FALSE, a korzystamy z niej podobnie jak z metody filter().

Jakoś nie potrafię opisać wszystkiego słowami także przedstawię kod, a w komentarzach opiszę całość.

$("#notes").children("h3").click(
function()
{
        var tmp = $(this); // musimy przypisać obiekt do zmiennej pomocniczej, ponieważ w innym wypadku nie uda nam się rozwinąć notki
        if( $(this).next("div").is(":visible") )
        {
                // Jeśli notka o wybranym tytule już była pokazana, w tym momencie zostanie schowana
                $(this).next("div").slideUp("normal");
        }
        else if( $("#notes h3").next("div").is(":visible") )
        {
                // zwinięcie rozwiniętej notki, a dopiero pozniej rozwiniecie kolejnej
                $("#notes h3").next("div:visible").slideUp("normal",
                        function() { tmp.next("div").slideDown("normal"); }
                        // w tym miejscu wykorzystujemy właśnie zmienną pomocniczą _tmp_
                        // bez niej niesety nie byłoby możliwe rozwinięcie nowej notki
                );
        }
        else
        {
                $(this).next("div").slideDown("normal");
                // Jesli nie ma zadnej notki, ta zostanie rozwinięta
        }
}
);

Demo

To by było tyle. Wiem, że nie potrafię dobrze takich rzeczy opisywać, ale uwierzcie - starałem się.

Komentarze

Disclaimer

Dodaj komentarz

Tylko zalogowani użytkownicy mogą komentować.