jQueryのタブを使って、私が取り組んでいるプロジェクトのためのユニークなユーザーインターフェイスを作成しています。Cyclical jQueryタブ
レイアウト:トップに沿って走る
年はタブになります。
私がしようとしているのは、ユーザーが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>
は、あなたがこれまでに試したコードを投稿してもらえますか? – Jacob
正直言って、私はまだ何も試していません。私は始める方法がわかりません。私はちょうど日食でjQueryのオートコンプリートを取得しようとしています。私はどのように私のタブが設定されている投稿します。 – Jimmy
個人的には、これを自分で実装する方が良いと思います。私の知る限り、jQuery UIのタブはこれを簡単には受け入れません。 – Bojangles