nagradzam tutoriale

  • Zastosowanie Ajax Navigation

    dodano 20.12.2007 / komentarzy: 0 / autor: agressiva

    Ten tutorial pokaże Wam jak należy posługiwać się jednym ze skryptów służących do nawigacji na stronie tj. Ajax Navigation.
    Pokaże Wam dwie sytuacje w jakich ten skrypt może być wykorzystywany - przy treści na stronie oraz w galerii zdjęć.

    Kod przygotowanej, przykładowej strony wygląda następująco:

    <!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>Zastosowanie Ajax Navigation</title>
    <link rel="stylesheet" href="style.css" media="all" />

    <script type="text/javascript" src="ajax_navagation.js"></script>

      set_loading_message("Proszę czekać! Trwa wczytywanie strony…");

    </head>

    <body>

    <div id="page">
    <h2 class="galeria">Treść strony</h2>
    <div id="menu">
            <ul>
                    <li><a href="javascript:void(0)"

    onclick="open_url(’strona1.html’,'tresc’);">Pozycja 1</a></li>
                    <li><a href="javascript:void(0)"

    onclick="open_url(’strona2.html’,'tresc’);">Pozycja 2</a></li>
                    <li><a href="javascript:void(0)"

    onclick="open_url(’strona3.html’,'tresc’);">Pozycja 3</a></li>
            </ul>
    </div>

    <div id="tresc"></div>
    <script type="text/javascript">open_url(’home.html’,'tresc’);</script>
    <div class="end"></div>
    <hr />

    <h2 class="galeria">Galeria zdjęć</h2>
    <div id="miniatury">
    <a href="javascript:void(0)" onclick="open_url(’foto1.html’,'podglad’);"><img

    src="1m.jpg" alt="#" /></a>
    <a href="javascript:void(0)" onclick="open_url(’foto2.html’,'podglad’);"><img

    src="2m.jpg" alt="#" /></a>
    <a href="javascript:void(0)" onclick="open_url(’foto1.html’,'podglad’);"><img

    src="1m.jpg" alt="#" /></a>
    <a href="javascript:void(0)" onclick="open_url(’foto2.html’,'podglad’);"><img

    src="2m.jpg" alt="#" /></a>
    </div>
    <div id="podglad"></div>
    <div class="end"></div>
    </div>

    </body>
    </html>
     

    Treść na stronie

    Niżej znajduje się schematyczna stronka, która składa się z menu bocznego oraz pola w którym będzie wyświetlana treść ukryta pod linkami w menu.

    Na samym początku kiedy mamy już kod strony musimy ten fragment sktypu JavaScript zapisać w pliku o rozszerzeniu .js przy pomocy dowolnego edytora html.

    var please_wait = null;

    function open_url(url, target) {
            if ( ! document.getElementById) {
                    return false;
            }

            if (please_wait != null) {
                    document.getElementById(target).innerHTML = please_wait;
            }

            if (window.ActiveXObject) {
                    link = new ActiveXObject("Microsoft.XMLHTTP");
            } else if (window.XMLHttpRequest) {
                    link = new XMLHttpRequest();
            }

            if (link == undefined) {
                    return false;
            }
            link.onreadystatechange = function() { response(url, target); }
            link.open("GET", url, true);
            link.send(null);
    }

    function response(url, target) {
            if (link.readyState == 4) {
                    document.getElementById(target).innerHTML = (link.status == 200) ?

    link.responseText : "Ooops!! A broken link! Please contact the webmaster of this

    website ASAP and give him the fallowing errorcode: " + link.status;
            }
    }

    function set_loading_message(msg) {
            please_wait = msg;
    }

    Tak jak wskazuje instrukcja na stronie polecam nadać nazwę ajax_navagation.js
    Teraz w części <head></head> musimy umieścić:

    <script type="text/javascript" src="ajax_navagation.js"></script>

      set_loading_message("Proszę czekać! Trwa wczytywanie strony…");

    Aby cały ten mechanizm zadziałał musimy jeszcze do naszego kodu strony dodać najwazniejszą rzecz, a konkretnie fragment skryptu przydzialony do kazdej pozycji w menu. Fragment ten musimy umieścić w
    <a href="tutaj musisz zamieścić fragment skryptu">Pozycja w menu</a>
    wyglada on następująco:
    javascript:void(0)" onclick="open_url('strona1.html','tresc');
    Można go modyfikować. W podanym przykładzie wygląda to tak:
    ‘strona1.html‘ - jest to nazwa pliku html , który ma się wczytać po kliknięciu na daną pozycję w menu, zamiast tego podajecie w takim samym stylu namiar na Wasz plik , który ma się ukazać.
    ‘tresc‘- jest to nazwa diva w którym wyświetlany będzie wczesniej wskazany link po kliknięciu w pozycję menu. Nie musi to być od razu div, można również podać nazwe komórki tabeli… zależy to jedynie od tego jak wyglada pozostały kod Waszej strony.

    A taki przykładowy link w menu wygląda tak:
    <a href="javascript:void(0)" onclick="open_url('strona1.html','tresc');">Pozycja 1</a>

    Jak widzicie pod divem ‘tresc’ w którym wyświetla się zawartość wskazanych plików umiesciłam taki kod:
    <script type="text/javascript">open_url('home.html','tresc');</script>
    Ma on własciwie taką samą formę jak ten który wstawiany jest w <a href=”"></a>.
    W tym przypadku ‘home.html’ oznacza pik który ma się wczytać jeszcze przed wybraniem pozycji z menu.

    Galeria zdjęć

    Działa ona własciwie na tej samej zasadzie co treść strony.
    Należy jedynie przygotować sobie miniaturki zdjęć, które będą znajdować się obok pola na wyświetlanie pełnowymiarowego zdjęcia (tak jak w tym przypadku). Każda miniaturka musi być podlinkowana do pliku w którym znajduje się duże zdjęcie. Np:
    <a href="javascript:void(0)" onclick="open_url('foto1.html','podglad');"><img src="1m.jpg" alt="#" /></a>

    Skrypt nawigacyjny Ajax Navigation można stosować niemalże zawsze w prostych stronach i galeriach fotograficznych. Jednak do bardziej zaawansowanych stronach już się tak nie nadaje. Po każdym odświeżeniu strony wraca się do wcześniej wspomnianego ‘home.html’.

    Efekt końcowy zaprezentowany jest tutaj.

    Napisz komentarz