ทำ TAB ง่ายๆ ดัวย jQuery UI ครับ

คำถามเกี่ยวกับ :ทำ TAB ง่ายๆ ดัวย jQuery UI ครับ


พอดีวันนี้มีงาน ที่ต้อง Design เป็น Tab ก็เลยลองโหลด Jquery มาลองเล่นดูครับ
ง่ายๆ ครับ หลังจาก โหลดมาแล้วก็ เขียน HTML ตามนี้เลย

ส่วนของการ include Library & CSS ตามนี้เลยครับ

    <link rel="stylesheet" href="js/themes/base/jquery.ui.all.css">
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/ui/jquery.ui.core.js"></script>
    <script src="js/ui/jquery.ui.widget.js"></script>
    <script src="js/ui/jquery.ui.tabs.js"></script>
   
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>

เสร็จแล้วก็สร้าง TAB ได้ด้วย HTML Code ง่ายๆ สะอาดตา

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">TAB1</a></li>
        <li><a href="#tabs-2">TAB2</a></li>
        <li><a href="#tabs-3">TAB3</a></li>
        <li><a href="#tabs-4">TAB4</a></li>
    </ul>
    <div id="tabs-1">Hello Tab1</div>
    <div id="tabs-2">Hello Tab2</div>
    <div id="tabs-3">Hello Tab3</div>
    <div id="tabs-4">Hello Tab4</div>
</div>


เพียงเท่านี้ก็จะได้ Tab ออกมา 4 Tab ครับ
เอาแบบ ธรรมดาๆ มันก็ง่ายๆ แบบนี้เลยครับ
แต่ถ้าใครต้องการปรับแต่ CSS ให้มันได้สีสันตามต้องการ
ก็สามารถ Override CSS ได้ เดี๋ยวจะเอามาลงในตัวอย่างถัดไปนะคร้าบ