Zwijanie oraz rozwijanie fragmentów strony www

Często na stronie www chcemy umieścić elementy, które powinny być domyślnie zwinięte aby zajmowały mniej miejsca. Na przykład na tej stronie zdecydowałem, że filtrowanie wyników powinno domyślnie być schowane aby zajmowało mniej miejsca. Klikając na link “Pokaż\Ukryj” użytkownik może rozwinąć okno. Warto również zwrócić uwagę na animacje – okno nie pojawia się od razu ale stopniowo jest rozszerzane.

Zaprezentowany wynik można łatwo uzyskać za pomocą biblioteki jQuery. Po ściągnięciu biblioteki oraz podłączeniu stosownych plików JS należy napisać następujący skrypt:

<script type="text/javascript">
    $(document).ready(function () {        
        $("#msg_body").hide();            
    });
</script>

Metoda hide (ukrycie formularza) zostanie wywoła w momencie zainicjowania biblioteki jQuery. Selektor #msg_body oznacza wybranie elementu w którym atrybut id jest równy msg_body. Następnie można przejść do zdefiniowania reszty formularza:

<%using(Html.BeginForm("Search","Politicians",FormMethod.Get)){ %>

<div id="msg_head">

    <a onclick='javascript:$("#msg_body").slideToggle(600);return false' href='#' class="marked_link">
        <img  src="/images/search.png" alt="Filtrowanie" style="float:left" />Filtrowanie (Pokaż\Ukryj)
    </a>

</div>
    
<br />
<div id="msg_body">
    <fieldset>

        <legend>Filtrowanie</legend>
        <p>Imię:
            <br />
            <%=Html.TextBox("FirstName", Request.QueryString["FirstName"]) %>
        </p>

        <p>Drugie imię:
            <br />
            <%=Html.TextBox("SecondName", Request.QueryString["SecondName"]) %>
        </p>

        <p>Nazwisko:
            <br />
            <%=Html.TextBox("LastName", Request.QueryString["LastName"]) %>
        </p>
        <input type=submit value="Filtruj" />
    </fieldset>
</div>
<%} %>

Element div z id równym msg_body zawiera dane, które będą zwijanie oraz rozwijane. Z kolei w msg_head został umieszczony link odpowiedzialny za wykonanie operacji. W zdarzeniu OnClick umieszczono następujący kod JS:

'javascript:$("#msg_body").slideToggle(600);return false'

Kluczem do sukcesu jest metoda slideToggle, która odpowiada za animację zwijania lub rozwijania. Jako parametr wejściowy można przekazać całkowity czas animacji.

2 thoughts on “Zwijanie oraz rozwijanie fragmentów strony www”

  1. Wydaje mi się, że umieszczanie kodu w onlick to nie jest koniecznie dobry pomysł, a na pewno nie jest polecany. Odpowiedni to
    $(function(){ $(“a_toggle”).click(function(){
    /*jakaś akcja */
    });
    });

    A w eventach html nie umieszcza się prefixu “jacascript:” bo zawartość eventu już jest kodem. Ten prefix można użyć tylko w “href”.

    I wiem, czepiam się, czepiam, i purysta ze mnie, ale może się zdarzyć ze ktoś zamiast się inspirować tym przykładem, skopiuje po prostu snippet i użyje kodu nastawionego na zilustrowanie problemu w swojej aplikacji, co nie będzie dobre 😉

Leave a Reply

Your email address will not be published.