Dynamische Seite / Ersetzen von Inhalten

Angenommen, Sie möchten eine Website erstellen, auf der das Klicken von Schaltflächen in der Navigation dynamisch Inhalte lädt. So ähnlich wie bei den Organic Tabs, nur dass die Inhalte dynamisch geladen werden. Sagen wir, etwas wie das hier

Demo anzeigen   Dateien herunterladen

Das HTML: Es funktioniert alles ohne JavaScript

Es gibt keine Entschuldigung dafür, dass die Navigation einer Website ohne aktiviertes JavaScript komplett kaputt ist. Daher ist der beste Ansatz, einfach diese Seiten und die Navigation als ganz normales semantisches HTML zu erstellen. Wissen Sie, so als wäre es 2001.

Die Links der Navigation verweisen auf die Dateien, die diesen Inhalt enthalten, und sind für sich allein voll funktionsfähige Seiten.

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

CSS

Dies ist eigentlich kein Tutorial über CSS, aber wenn Sie einen Blick darauf werfen möchten, nur zu. Ein großes Dankeschön an Mike Rundle, der mir neulich auf Twitter die CSS für diese Buttons gezeigt hat, als ich daran arbeitete, und ich habe sie gestohlen.

jQuery JavaScript

Das JavaScript ist hier der spaßige Teil! Das ist der Plan in einfachen Worten

1. Wenn ein Navigationsbutton geklickt wird…
2. Ändere den Hash-Tag der URL
3. Wenn sich der Hash-Tag in der URL ändert…
4. Blende den alten Inhalt aus
5. Lade und blende den neuen Inhalt ein
6. Aktualisiere die aktuelle Hervorhebung der Navigation

Warum also der Aufwand mit dem Ändern des „Hash-Tags“? Mehrere Gründe

• Durch die Verwendung des hashchange Event-Plugins von Ben Alman können wir die Zurück/Vorwärts-Buttons des Browsers aktivieren. Super moderne Browser unterstützen dashashchangeEvent selbst, dieses Plugin ermöglicht die Unterstützung für ältere Browser.
• Wir können den Hash beim Laden der Seite suchen und die entsprechende Seite laden (d. h. „Deep Linking“)

Voraussetzung

Wir verwenden die jQuery-Bibliothek, das onhashchange-Plugin und laden dann unser eigenes Skript zuletzt.

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>

Code-Dump

$(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href='"+newHash+"']").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');

});

Wirklich nicht viel. Es sind nur 41 Zeilen mit einigen Leerzeilen zur besseren Lesbarkeit. Dies beinhaltet sogar die Anpassung der Höhe des gesamten Containers, um sie an den neuen Inhalt anzupassen.

Demo anzeigen   Dateien herunterladen