2011-12-22 10 views
0

jQueryのタブを使って、私が取り組んでいるプロジェクトのためのユニークなユーザーインターフェイスを作成しています。Cyclical jQueryタブ

レイアウト:トップに沿って走る Layout

年はタブになります。

私がしようとしているのは、ユーザーが2009年のいずれかをクリックすると、そのタブがスライドして中央のタブ(そのコンテンツとともに)になり、それ以前の年の新しいタブが表示されます。左に追加すると、余分なタブが右側から削除されます。したがって、最終的に同じ数のタブがあり、選択された年が中央に表示されます。

私はjQueryの経験がこれを達成するには不十分だと感じています。このような機能をどのように達成すればよいでしょうか?

コードこれまで:

$(function() { 
    $("#tabs").tabs({selected: 3});//just selects the center tab(probably needs to be changed) 
    $("#tabs").tabs({ 
      select: function(event, ui) { 
        var year = $(".year").val(); 
        //figure how many tabs are left and right (year - selected year) 
        //delete and add tabs 
        //change class of selected tab 
       } 
     }); 
}); 

私はそれが行く必要があるかもしれませんが、私のようなプロセスのアイデアのようなものであること、そこにカップルのノートを持っています。

<div class='navBar' id='tabs'> 
<ul> 
    <li class='navElement'><a href="post.php?year=<?php echo($year-3);?>"><?php echo($year-3);?></a></li> 
    <li class='navElement'><a href="post.php?year=<?php echo($year-2);?>"><?php echo($year-2);?></a></li> 
    <li class='navElement'><a href="post.php?year=<?php echo($year-1);?>"><?php echo($year-1);?></a></li> 
    <li class='navFocus'><a href="post.php?year=<?php echo($year);?>"><?php echo($year);?></a></li> 
    <li class='navElement'><a href="post.php?year=<?php echo($year+1);?>"><?php echo($year+1);?></a></li> 
    <li class='navElement'><a href="post.php?year=<?php echo($year+2);?>"><?php echo($year+2);?></a></li> 
    <li class='navElement'><a href="post.php?year=<?php echo($year+3);?>"><?php echo($year+3);?></a></li> 
</ul> 
<div id="tabs-1"></div> 
<div id="tabs-2"></div> 
<div id="tabs-3"></div> 
<div id="tabs-4"></div> 
<div id="tabs-5"></div> 
<div id="tabs-6"></div> 
<div id="tabs-7"></div> 
</div> 
+0

は、あなたがこれまでに試したコードを投稿してもらえますか? – Jacob

+0

正直言って、私はまだ何も試していません。私は始める方法がわかりません。私はちょうど日食でjQueryのオートコンプリートを取得しようとしています。私はどのように私のタブが設定されている投稿します。 – Jimmy

+0

個人的には、これを自分で実装する方が良いと思います。私の知る限り、jQuery UIのタブはこれを簡単には受け入れません。 – Bojangles

答えて

1

jQuery UIタブもスキップします。実際のタブの機能は、これまでの最大の問題ではありません。

これは開始時刻:http://jsfiddle.net/8aGC4/2/ですが、ご自身で調整する必要があります。うまくいけば、それはあなたがしかし、開始することができます。

コードが十分明確でない場合は、お気軽にお問い合わせください。

HTML

<nav class="tabs"> 
    <ul> 
     <li><a href="#year-2000">2000</a></li><li><a href="#year-2001">2001</a></li><li><a href="#year-2002">2002</a></li><li><a href="#year-2003">2003</a></li><li><a href="#year-2004">2004</a></li><li><a href="#year-2005">2005</a></li><li><a href="#year-2006">2006</a></li><li><a href="#year-2007">2007</a></li><li><a href="#year-2008">2008</a></li><li><a href="#year-2009">2009</a></li><li><a href="#year-2010">2010</a></li><li><a href="#year-2011">2011</a></li><li><a href="#year-2012">2012</a></li><li><a href="#year-2013">2013</a></li><li><a href="#year-2014">2014</a></li><li><a href="#year-2015">2015</a></li><li><a href="#year-2016">2016</a></li><li><a href="#year-2017">2017</a></li><li><a href="#year-2018">2018</a></li><li><a href="#year-2019">2019</a></li><li><a href="#year-2020">2020</a></li> 
    </ul> 
</nav> 

<div class="tab-content"> 
    <div id="year-2000">2000 - Lorem ipsum dolor</div> 
    <div id="year-2001">2001 - Lorem ipsum dolor</div> 
    <div id="year-2002">2002 - Lorem ipsum dolor</div> 
    <div id="year-2003">2003 - Lorem ipsum dolor</div> 
    <div id="year-2004">2004 - Lorem ipsum dolor</div> 
    <div id="year-2005">2005 - Lorem ipsum dolor</div> 
    <div id="year-2006">2006 - Lorem ipsum dolor</div> 
    <div id="year-2007">2007 - Lorem ipsum dolor</div> 
    <div id="year-2008">2008 - Lorem ipsum dolor</div> 
    <div id="year-2009">2009 - Lorem ipsum dolor</div> 
    <div id="year-2010">2010 - Lorem ipsum dolor</div> 
    <div id="year-2011">2011 - Lorem ipsum dolor</div> 
    <div id="year-2012">2012 - Lorem ipsum dolor</div> 
    <div id="year-2013">2013 - Lorem ipsum dolor</div> 
    <div id="year-2014">2014 - Lorem ipsum dolor</div> 
    <div id="year-2015">2015 - Lorem ipsum dolor</div> 
    <div id="year-2016">2016 - Lorem ipsum dolor</div> 
    <div id="year-2017">2017 - Lorem ipsum dolor</div> 
    <div id="year-2018">2018 - Lorem ipsum dolor</div> 
    <div id="year-2019">2019 - Lorem ipsum dolor</div> 
    <div id="year-2020">2020 - Lorem ipsum dolor</div> 
</div> 

CSS

body { 
    font: 12px/1.2 Arial, sans-serif; 
    color: #666; 
} 

nav.tabs { 
    width: 630px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

    nav.tabs ul { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     white-space: nowrap; 
    } 

     nav.tabs ul li { 
      display: inline-block; 
      margin: 0; 
      font-size: 0; 
     } 

      nav.tabs ul li a { 
       background: #f6f6f6; 

       display: block; 
       width: 58px; 
       padding: 5px; 

       color: #666; 
       text-align: center; 
       font-size: 12px; 

       border-left: 1px solid #fefefe; 
       border-right: 1px solid #f0f0f0; 
      } 

div.tab-content { 
    width: 210px; 
    margin: 0 auto; 
} 

    div.tab-content div { 
     background: #f6f6f6; 
     display: none; 
     padding: 5px; 
    } 

JS

$(function() { 
    var tabs = $('nav.tabs a'); 
    var tabContent = $('div.tab-content > div'); 

    tabs.click(function() { 
     // Hide and deselect previous tab 
     tabs.filter('.active').removeClass('active').animate({width: '58px'}, 100); 
     tabContent.slideUp(100); 

     // Select and show this tab 
     var tab = $(this); 

     tab.addClass('active').animate({width: '198px'}, 100); 
     $(tab.attr('href')).slideDown(100); 

     // Scroll tab container so that current tab is centered 
     var currentTab = tabs.index(tab); 

     // 3 = num tabs to the left of selected tab, 70 = width of tabs 
     $('nav.tabs').scrollTo((currentTab - 3) * 70, {axis: 'x', duration: 100}); 

     return false; 
    }); 

    $('a[href="#year-2014"]').click(); 
}); 
+0

Woah。男、あなたはそれを釘付けにした。邪悪な速さも。 – Jimmy

+0

私はそれがほとんど機能しているが、何らかの理由ですべてのタブ要素が一斉に表示されている。私が間違っていることは何ですか? – Jimmy

+0

Hmm。あなたはすべてのタブのコンテンツに同じIDを使用したような音がしますか?各タブのコンテンツには一意のIDが必要で、コードが正しく動作するためには各リンクが各IDを指している必要があります。ところで、あなたが既にそれを理解していない限り、実際には少しスライドを取得するために 'add/removeClass( 'active')'の代わりに 'animate( 'width'、 '50px/90px')'を使うことができます。 '.scrollLeft'の代わりにscrollTo()' -pluginを使用して、スクロールもアニメーション化します。 – powerbuoy