Hướng dẫn html dynamic content without javascript - nội dung động html không có javascript

Bài viết này là một bản cập nhật cho bài viết cũ này, có bản demo xấu xí và một loạt các kỹ thuật trong đó không còn được coi là thực tiễn tốt. Bản demo mới này sạch hơn nhiều, cập nhật và Fuller đặc trưng. Bởi vì bài báo cũ là một chút phạm vi khác, tôi sẽ để nó một mình, chỉ cần tham khảo điều này.

Cập nhật tháng 1 năm 2013: Có những thực hành tốt hơn bây giờ, chi tiết ở đây. There are better practices now, detailed here.

Hãy nói rằng bạn muốn tạo một trang web trong đó việc nhấp vào các nút trong NAV sẽ tự động tải một số nội dung. Kiểu như những tab hữu cơ, chỉ có nội dung được tải động. Nói điều gì đó như thế này:

Xem bản demo & nbsp; Tải tập tin

HTML: Tất cả đều hoạt động mà không có JavaScript

Không có lý do gì cho việc điều hướng của một trang web bị phá vỡ hoàn toàn mà không có JavaScript được bật. Vì vậy, cách tiếp cận tốt nhất ở đây chỉ là tạo ra các trang này và điều hướng là HTML Semantic đơn giản. Bạn biết đấy, giống như nó 2001.

Các liên kết điều hướng đến các tệp có chứa nội dung đó và được hình thành đầy đủ các trang chức năng.

<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

Đây thực sự là một hướng dẫn về CSS, nhưng nếu bạn muốn nhìn trộm nó, hãy tìm nó. Hét lên với Mike Rundle, người đã chia sẻ CSS cho các nút đó vào ngày khác trên Twitter khi tôi đang làm việc này và tôi đã đánh cắp nó.

JQuery JavaScript

JavaScript là phần thú vị ở đây! Đây là kế hoạch bằng tiếng Anh đơn giản:

1. Khi nhấp vào nút điều hướng
2. Thay đổi thẻ băm của url
3. Khi thẻ băm trong URL thay đổi
4. Làm mờ đi nội dung cũ
5. Tải và phai màu trong nội dung mới
6. Cập nhật điểm nổi bật điều hướng hiện tại

Vậy tại sao phải bận tâm với các công cụ thay đổi thẻ Hash Hash? Nhiều lý do:

• Bằng cách sử dụng plugin sự kiện Hashchange của Ben Alman, chúng tôi có thể bật nút quay lại/chuyển tiếp của trình duyệt. Các trình duyệt siêu hiện đại tự hỗ trợ sự kiện Hashchange, plugin này cho phép hỗ trợ cho các trình duyệt cũ hơn.
• Chúng ta có thể tìm kiếm băm khi trang tải và tải trang thích hợp (tức là liên kết sâu thẳm)

Điều kiện tiên quyết

Chúng tôi sẽ sử dụng thư viện jQuery, plugin Onhashchange và sau đó tải tập lệnh của chúng tôi cuối cùng.

<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>

Mã kết xuất

$(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');

});

Không có nhiều điều thực sự. Nó chỉ có 41 dòng với một số khoảng trống trong đó để đọc. Điều này thậm chí bao gồm điều chỉnh chiều cao của toàn bộ trình bao bọc để điều chỉnh cho nội dung mới.

Xem bản demo & nbsp; Tải tập tin