문제

When I click on the .backward anchor being on the first tab, it shows the last one. Even if rotate is set to false.

$(document).ready(function(){

    $('.agenda-tabs').tabs(".agenda-terms", {
        effect: 'fade',
        rotate: false
    }).slideshow({
        clickable: false
    });
});

How can I stop it from "rotating" from the first to the last tab?

The HTML code is:

    <div class="wrapper"> 
        <div class="agenda-navigation">
            <select class="agenda-track-select">
                <option value="track-1">Track 1</option>
                <option value="track-2">Track 2</option>
                <option value="track-3">Track 3</option>
                <option value="track-4">Track 4</option>
                <option value="track-5">Track 5</option>
                <option value="track-6">Track 6</option>
                <option value="track-7">Track 7</option>
                <option value="track-8">Track 8</option>
            </select>
            <div class="buttons">
              <button class="backward">&laquo; Previous</button>
              <button class="forward">Next &raquo;</button>
            </div>
        </div>   
        <div class="agenda">
            <div class="agenda-term-list">
                <div class="agenda-term-time">11:00 - 12:00</div>
                <div class="agenda-term-time">12:00 - 13:00</div>
                <div class="agenda-term-time">11:00 - 12:00</div>
                <div class="agenda-term-time">12:00 - 13:00</div>
            </div>

            <div class="items">

                <div class="agenda-terms">
                    <div class="agenda-term-row">
                        <div class="agenda-term-point tracks-all">
                            Lorem ipsum register now!
                        </div>
                    </div>
                    <div class="agenda-term-row">
                        <div class="agenda-term-point track-1 current">
                            Lorem ipsum t1
                        </div>
                        <div class="agenda-term-point track-2">
                            Lorem ipsum dolor sit amet... t2
                        </div>
                        <div class="agenda-term-point track-3">
                            Lorem ipsum t3
                        </div>
                        <div class="agenda-term-point track-4">
                            Lorem ipsum dolor sit amet... t4
                        </div>
                    </div>
                    <div class="agenda-term-row">
                        <div class="agenda-term-point tracks-all">
                            Lorem ipsum register now!
                        </div>
                    </div>
                    <div class="agenda-term-row">
                        <div class="agenda-term-point track-1 current">
                            Lorem ipsum t1
                        </div>
                        <div class="agenda-term-point track-2">
                            Lorem ipsum dolor sit amet... t2 
                        </div>
                        <div class="agenda-term-point track-3">
                            Lorem ipsum t3
                        </div>
                        <div class="agenda-term-point track-4">
                            Lorem ipsum dolor sit amet... t4
                        </div>
                    </div>
                </div>
                <div class="agenda-terms">
                    <div class="agenda-term-row">
                        <div class="agenda-term-point tracks-all">
                            Lorem ipsum register now!
                        </div>
                    </div>
                    <div class="agenda-term-row">
                        <div class="agenda-term-point track-5 current">
                            Lorem ipsum t5
                        </div>
                        <div class="agenda-term-point track-6">
                            Lorem ipsum dolor sit amet... t6
                        </div>
                        <div class="agenda-term-point track-7">
                            Lorem ipsum t7
                        </div>
                        <div class="agenda-term-point track-8">
                            Lorem ipsum dolor sit amet... t8
                        </div>
                    </div>
                    <div class="agenda-term-row">
                        <div class="agenda-term-point tracks-all">
                            Lorem ipsum register now!
                        </div>
                    </div>
                    <div class="agenda-term-row">
                        <div class="agenda-term-point track-5 current">
                            Lorem ipsum t5
                        </div>
                        <div class="agenda-term-point track-6">
                            Lorem ipsum dolor sit amet... t6
                        </div>
                        <div class="agenda-term-point track-7">
                            Lorem ipsum t7
                        </div>
                        <div class="agenda-term-point track-8">
                            Lorem ipsum dolor sit amet... t8
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="agenda-tabs">
      <a href="#"></a>
      <a href="#"></a>
    </div>
도움이 되었습니까?

해결책

I found this to be a bug in jquery-tools. Please use this version i changed myself while they don't fix it in their source.

I changed this:

if (b.rotate) {
  var k = g.length - 1;
  if (0 > a) return e.click(k, h);
  if (a > k) return e.click(0, h)
}

To this:

var k = g.length - 1;
if (0 > a) if (b.rotate) return e.click(k, h); else a = 0;
if (a > k) if (b.rotate) return e.click(0, h); else a = k;

Also made a fiddle with your code to show it working: http://jsfiddle.net/bortao/k2f57/

Had to remove one <a> since you had two tabs, and not three.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top