Hướng dẫn tạo jQuery Tabs đơn giản

Trong việc thiết kế web thì người thiết kế bao giờ cũng có nhiều sự lựa chọn trong việc trình bày giao diện. Tuy nhiên làm như thế nào cho hợp lý, làm thế nào cho thỏa mãn nhu cầu khách hàng đó là mục đích của chúng ta. Hôm nay mình giới thiệu với các bác cách tạo jQuery Tabs và tác dụng của nó.

Đối với những ai đã học qua HTML & CSS cũng như từng xem nhiều website thì khá rõ về Tabs là gì rồi. Tabs là một cách trình bày được nhiều thông tin trong cũng một không gian trên trang web. Nó có thể giúp các bạn tiết kiệm được “đất” và tạo sự chuyên nghiệp, tránh thông tin tràn lang gây khó chịu cho người dùng.

Hướng dẫn dùng jQuery Tabs

Trong bài hôm nay mình muốn đề cấp đến các bạn cách tạo Tabs sử dụng jQuery. Mình cũng ít sử dụng phần này nên cũng khá ít bài viết. Đầu tiên các bác xem demo của tabs để hình dung diện mạo nó như thế nào cái đã: http://bcdonline.net/demo/tabs/

Cách tạo jQuery Tabs

Tiếp theo bạn khai báo phần HTML cho nó, phần này sẽ tạo nên khung tab cho bạn dựa vào đây bạn biết được cấu trúc tạo nên Tabs và dễ dàng cho việc định dạng và thêm dữ liệu.

<!--

  <ul class='tabs'>

    <li><a href='#tab1'>Tab 1</a></li>

    <li><a href='#tab2'>Tab 2</a></li>

    <li><a href='#tab3'>Tab 3</a></li>

  </ul>

  <div id='tab1'>

    <p>Hi, this is the first tab.</p>

  </div>

  <div id='tab2'>

    <p>This is the 2nd tab.</p>

  </div>

  <div id='tab3'>

    <p>And this is the 3rd tab.</p>

  </div>

-->

Ở đây bạn có thể dễ dàng nhận thấy được tabs mình sẽ có 3 tabs, mỗi tab sẽ có nhãn lần lượt là Tab 1, Tab 2, Tab 3 và phần trình bài nội dung tương ứng bên dưới.
Tiếp đến bạn download file jquery: http://blog.jquery.com/2012/11/13/jquery-1-8-3-released/ đổi tên thành jquery.js cho nó gọn và import vào trong file HTML của mình đồng thời bạn copy đoạn code sau vào.

<!--

<script src="js/jquery.js"></script>

<script>

    // Wait until the DOM has loaded before querying the document

    $(document).ready(function(){

        $('ul.tabs').each(function(){

            // For each set of tabs, we want to keep track of

            // which tab is active and it's associated content

            var $active, $content, $links = $(this).find('a');

            // If the location.hash matches one of the links, use that as the active tab.

            // If no match is found, use the first link as the initial active tab.

            $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);

            $active.addClass('active');

            $content = $($active.attr('href'));

            // Hide the remaining content

            $links.not($active).each(function () {

                $($(this).attr('href')).hide();

            });

            // Bind the click event handler

            $(this).on('click', 'a', function(e){

                // Make the old tab inactive.

                $active.removeClass('active');

                $content.hide();

                // Update the variables with the new link and content

                $active = $(this);

                $content = $($(this).attr('href'));

                // Make the tab active.

                $active.addClass('active');

                $content.show();

                // Prevent the anchor's default click action

                e.preventDefault();

            });

        });

    });

</script>

-->

Việc cuối dùng mình định dạng lại CSS cho tabs của chúng ta thêm đẹp một tí trước khi đưa vào sử dụng. Mẫu CSS mình đưa ra như sau, các bạn tham khảo và chỉnh sử theo ý mình.

<!--

    * {padding:0; margin:0;}

    html {

        background: #d4d4d4;

        padding:15px 15px 0;

        font-family:sans-serif;

        font-size:14px;

    }

    p, h3 { 

        margin-bottom:15px;

    }

    div {

        padding:10px;

        width:600px;

        background:#fff;

    }

    .tabs li {

        list-style:none;

        display:inline;

    }

    .tabs a {

        padding:5px 10px;

        display:inline-block;

        background:#666;

        color:#fff;

        text-decoration:none;

    }

    .tabs a.active {

        background:#fff;

        color:#000;

    }

-->

Kết luận: Vậy coi như mình đã hoàn thành, phần tabs này có lẽ sẽ giúp ích được cho các bạn, việc đổ dữ liệu vào thì cũng bình thường như menu vậy, có chỉ khác cách trình bày giao diện, chúc các bác thành công.
Tham khảo: http://www.jacklmoore.com/

Archive