I’m using jQuery tabs to create a unique user interface for a project I’m working on, and I’m having some trouble getting them to do what I need them to do.
The layout:
The years running along the top would be the tabs.
What I’m trying to do is this: when the user clicks one of the years, 2009 for example, that tab will slide over to become the center tab (along with its content), new tabs for preceding years will be added to the left, and excess tabs will be removed from the right. So in the end there will be the same number of tabs, with the selected year in the center.
I feel like my experience with jQuery is not adequate to accomplish this. How would I accomplish this sort of functionality?
Code so far:
$(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
}
});
});
I’ve got a couple notes in there that are kind of an idea of the process as I though it might need to go.
<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>
I would also skip jQuery UI Tabs. The actual tab functionality is not (by far) the biggest problem here.
This is a start: http://jsfiddle.net/8aGC4/2/ but it’ll require some tweaking on your part. Hopefully it can get you started though.
If the code isn’t clear enough feel free to ask!
HTML
CSS
JS