PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สอบถามเกี่ยวกับ Tab Menu

สอบถามเกี่ยวกับ Tab Menu
โดย:  Narupot IP: 110.168.73.xxx วันที่: 01-09-2014 เวลา: 14:44:34

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 6
ขอบความรู้เพิ่มเติมครับพี่
แล้วอยากเพิ่ม ให้มัน fred ทั้งแบบคลิกและแบบ auto ล่ะครับ
สุดท้ายจิงๆครับ...

โดย:  Narupot IP: 171.101.25.xxx วันที่: 04-09-2014 เวลา: 02:13:30
 ความคิดเห็นที่ 5
โห ขอบคุณมากเลยครับพี่

โดย:  Narupot IP: 171.101.25.xxx วันที่: 04-09-2014 เวลา: 02:08:09
 ความคิดเห็นที่ 4
เปลี่ยน script นิดหน่อยก็ใช้ได้

$(function () {
    
    var interValID=null;
    var menuIndex=0;
    var indexLength=$("ul#navi_containTab > li").length;
      $("ul#navi_containTab > li").click(function(event){  
            menuIndex=$(this).index();  
            $("ul#detail_containTab > li:visible").hide();             
            $("ul#detail_containTab > li").eq(menuIndex).show();  
            clearInterval(interValID);
            swapTab();
    });    

    var swapTab = function (){
        interValID=setInterval(function(){
            if(menuIndex+1>=indexLength){
                menuIndex=0;
            }else{
                menuIndex++;
            }
            $("ul#detail_containTab > li:visible").hide();             
            $("ul#detail_containTab > li").eq(menuIndex).show();          
        },3000); // เปลี่ยนทุกๆ 3 วินาที    
    };    
    swapTab();
    
});


ตัวอย่าง


  • Detail Data1
  • Detail Data2
  • Detail Data3
  • Detail Data4
  • Detail Data5




โดย:  Ninenik IP: 1.46.17.xxx วันที่: 03-09-2014
 ความคิดเห็นที่ 3
อยากได้แบบประยุกต์ในกระทูอ่ะครับ
ถ้าผมเขียนใหม่คงนานเลย
อยากประยุกต์ใส่ใน Tab เลย
เพราะผมเขีนยเสร็จหมดแล้ว
เหลือแต่ให้มันสไลด์ auto;

โดย:  Narupot IP: 58.11.134.xxx วันที่: 02-09-2014 เวลา: 11:43:24
 ความคิดเห็นที่ 2
ขอบคุณมากครัชพี่ เดียวจะลองเอาไปประยุกต์ดูครัช

โดย:  Narupot IP: 171.99.141.xxx วันที่: 01-09-2014 เวลา: 18:38:38
 ความคิดเห็นที่ 1
 ลองใช้ plugin เกี่ยวกับสไลด้ดูนะครับ 

ตัวอย่าง      http://bxslider.com/


<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

      <title>เทส สไลด์</title>
      <!-- bxSlider Javascript file -->
      <script src="jquery.bxslider/jquery.bxslider.min.js"></script>
      <!-- bxSlider CSS file -->
      <link href="jquery.bxslider//jquery.bxslider.css" rel="stylesheet" />

      <script type="text/javascript">  

      $(document).ready(function(){  
        $('.bxslider').bxSlider({
          pagerCustom: '#bx-pager',
          auto: true,
        });


      });
      </script> 
      <style type="text/css">  
      section {
        height: 200px;
      }

      </style>     
    </head>
    <body>
      <div id="bx-pager">
      <a data-slide-index="0" title="ข่าวร้อนวันนี้" href="#tab-news">ข่าววันนี้</a>
      <a data-slide-index="1" title="ข่าวบันเทิง-ดารา" href="#tab-entertainment">บันเทิง-ดารา</a>
      <a data-slide-index="2" title="วาไรตี้" href="#tab-variety">วาไรตี้</a>
      <a data-slide-index="3" title="เกมส์-ไอที-รถ" href="#tab-game">เกมส์-ไอที-รถ</a>
      <a data-slide-index="4" title="กีฬา-ฟุตบอล" href="#tab-sport">กีฬา-ฟุตบอล</a>
      <a data-slide-index="5" title="ไลฟ์สไตล์" href="#tab-lifestyle">ไลฟ์สไตล์</a>
    </div>
      <ul class="bxslider">
        <li>
          <section>
            <h2>ข่าวร้อนวันนี้</h2>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
          </section>
        </li>
        <li>
          <section>
            <h2>ข่าวบันเทิง-ดารา</h2>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>

          </section>
        </li>
        <li>
          <section>
            <h2>วาไรตี้</h2>
            วาไรตี้ <br>
            วาไรตี้ <br>
            วาไรตี้ <br>
            วาไรตี้ <br>
            วาไรตี้ <br>
            วาไรตี้ <br>
          </section>
        </li>
        <li>
          <section>
           <h2>เกมส์-ไอที-รถ</h2>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
         </section>
       </li>
       <li>
        <section>
          <h2>กีฬา-ฟุตบอล</h2>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
        </section>
      </li>
      <li>
        <section>
          <h2>ไลฟ์สไตล์</h2>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
        </section>
      </li>
    </ul>

  </body>
  </html>




โดย:  Wowowow IP: 61.90.9.xxx วันที่: 01-09-2014 เวลา: 16:57:30