Tabbed nội dung bằng jQuery + HTML + CSS cho Website - DIỄN ĐÀN_VNTAMTAY
[ Tin nhắn mới · Thành viên · Quy tắc diễn đàn · Tìm kiếm · RSS]
THỐNG KÊ DIỄN ĐÀN
BÀI VIẾT MỚICHỦ ĐỀ SÔI ĐỘNGTHÀNH VIÊN TÍCH CỰCTHÀNH VIÊN MỚI
  • Khế ước xã hội... (1)
  • Tứ đại danh bổ... (1)
  • English For Bu... (1)
  • từ điển oto dạ... (2)
  • Thống kê 4rum ... (2)
  • Tăng font chữ ... (13)
  • Tổng Hợp về YA... (13)
  • Tử vi năm Nhâm... (11)
  • Phong thủy cho... (10)
  • Thái cực quyền... (8)
  • TieuBao
  • kcdl
  • 12a3
  • kunkun
  • Quada09
  • nguyendan11061106
  • trunguyencong14
  • htsphantam
  • thanhdong191291
  • nguyenleha96
  • Page 1 of 11
    DIỄN ĐÀN_VNTAMTAY » THƯ VIỆN WEBSITE » CODE CHO WEBSITE - FORUM » Tabbed nội dung bằng jQuery + HTML + CSS cho Website (Tabbed nội dung bằng jQuery + HTML + CSS cho Website)
    Tabbed nội dung bằng jQuery + HTML + CSS cho Website
    TieuBaoNgày: Chủ nhật, 06-Apr-14, 11:54:23 | Bài viết # 1


    Nhóm: Administrator
    Số bài viết: 3090
    Khen thưởng: 3
    Được cảm ơn: 10001
    Trạng thái: Offline
    Bài viết sau sẽ hướng dẫn bạn sử dụng một chút jQuery, HTML và CSS để tạo ra nội dung dạng Tab (hay Tabbed). Một kiểu show dữ liệu tiết kiệm không gian web và được nhiều website sử dụng. Có một cải tiến đáng lưu ý là ghi nhớ tab được chọn, khi người dùng reload trang sẽ không mất đi trạng thái đang được chọn ở tab đang mở. Sau đây là các bước thực hiện để tạo ra ứng dụng Tabbed nội dung bằng jQuery + HTML + CSS cho Website của bạn.

    Đầu tiên ta có đoạn HTML và CSS sử dụng cho tab như sau:

    Quote
    <div class="tabbed">
    <ul class="tabnav">
    <li><a href="#tab1">Tab 01</a></li>
    <li><a href="#tab2">Tab 02</a></li>
    <li><a href="#tab3">Tab 03</a></li>
    </ul>
    <div class="tabcont">
    <div id="tab1" class="tabcontent">Nội dung tab 1 </div>
    <div id="tab2" class="tabcontent">Nội dung tab 2</div>
    <div id="tab3" class="tabcontent">Nội dung tab 3</div>
    </div>
    </div>


    CSS:

    Quote
    <style type="text/css">
    .tabbed {
    padding:30px 0 0;
    position:relative;
    width:70%;
    margin:0 auto;
    }
    .tabbed .tabcont {
    background:#eee;
    padding:20px;
    }
    .tabbed .tabcont .tabcontent {
    display:none;
    position:relative;
    line-height:20px;
    }
    .tabbed .tabcont .tabcontent img {
    max-width:100%;
    }
    .tabbed .tabcont .tabcontent.active {
    display:block;
    }
    .tabnav {
    position: absolute;
    left:0;
    top:-1px;
    width:100%;
    border-bottom:1px solid #eee;
    }
    .tabnav li {
    float:left;
    }
    .tabnav li a {
    height:30px;
    line-height:30px;
    padding:0 14px;
    font-size:18px;
    font-weight:bold;
    border-radius:5px 5px 0 0;
    display:block;
    color:#333;
    }
    .tabnav li.active a {
    background:#eee;
    color:#376405;
    }
    </style>


    Và ta có đoạn Script tạo chức năng tab như sau:

    <script type="text/javascript">
    $(function(){
    $('.tabbed').find('.tabcontent:first').addClass('active');
    $('.tabbed').find('.tabnav li:first').addClass('active');
    $('.tabbed').find('.tabnav li').each(function(){
    $(this).click(function(){
    ntab = $(this).find('> a').attr('href');
    $(this).parents('.tabbed').find('.active').removeClass('active');
    $(this).addClass('active');
    $(this).parents('.tabbed').find(ntab).addClass('active');
    return false;
    });
    });
    })
    </script>

    Trong đoạn Script trên, việc xác định Menu và và nội dung được chọn và tạo ra trạng thái active dựa trên việc người dùng click vào menu tab và sau đó dựa trên thuộc tính href của thẻ a mà người dùng vừa click vào.

    Tới đây, bạn đã tạo được chức năng tab nội dung. Tuy nhiên, một bất tiện ở đây là khi người dùng click vào 1 tab, nội dung và menu của tab đó đang ở trạng thái active. Nếu người dùng reload trang web lại thì trang thái active đó lại mất đi và trở về với tab active mặc định lúc đầu. Giờ đây yêu cầu là cần phải cho trình duyệt ghi nhớ tab mà người dùng đã click vào, khi reload trang thì trạng thái active vẫn giữ ở tab mà người dùng vừa click. Để thực hiện điều này chúng ta dùng ứng dụng localStorage trong HTML5, và ta có đoạn Script như sau:

    Quote
    <script type="text/javascript">
    $(function(){

    if(localStorage.getItem('active'))
    {
    $('.tabbed').find(localStorage.getItem('active')).addClass('active');
    $('.tabbed').find('a[href='+localStorage.getItem('active')+']').parent().addClass('active');

    }
    else
    {
    $('.tabbed').find('.tabcontent:first').addClass('active');
    $('.tabbed').find('.tabnav li:first').addClass('active');
    }
    $('.tabbed').find('.tabnav li').each(function(){
    $(this).click(function(){
    ntab = $(this).find('> a').attr('href');
    localStorage.setItem('active', ntab);
    $(this).parents('.tabbed').find('.active').removeClass('active');
    $(this).addClass('active');
    $(this).parents('.tabbed').find(ntab).addClass('active');
    return false;
    });
    });
    })
    </script>

    Ở đoạn mã trên, ta sử dụng localStorage để lưu trữ thông tin active khi người dùng click vào menu tab. Sau đó, gọi ra thông tin này để xác định tab nào đã được người dùng click chọn. Nếu người dùng, chưa click chọn tab nào thì trang thái active sẽ nằm ở vị trí tab active mặc định.
    Lưu ý một điều là chức năng localStorage là ứng dụng của HTML5, vì vậy một số trình duyệt đời cũ sẽ không hỗ trợ chức năng này (IE7).

    Đến đây, bạn đã có thể tạo cho website của mình một ứng dụng tab nội dung tối ưu mà không cần mất nhiều thời gian và công sức. Bạn có thể tham khảo Demo trên trong bài viết hoặc download file mẫu về máy. Chúc bạn thành công.


    TRẺ DÙNG SỨC KHỎE KIẾM TIỀN-GIÁ DÙNG TIỀN MUA SỨC KHỎE

    NHỮNG GÌ CON NGƯỜI KHÔNG NGHĨ TỚI LẠI XẢY RA TRONG ĐỜI
     
    DIỄN ĐÀN_VNTAMTAY » THƯ VIỆN WEBSITE » CODE CHO WEBSITE - FORUM » Tabbed nội dung bằng jQuery + HTML + CSS cho Website (Tabbed nội dung bằng jQuery + HTML + CSS cho Website)
    Page 1 of 11
    Search:

    click ủng hộ vntamtay
    Chát với Tôi
    300
    Liên kết quảng cáo
    Buôn bán phụ tùng!
    Đang truy cập
    Khu đăng nhập
    Video Clip
    Tỷ giá tiền tệ