JSFiddle - React, Tailwind, and code Playground

by Binyamin

HTML

<script src="http://dl.dropbox.com/u/6594481/tabs-2010/tabs.js"></script>
<script src="http://dl.dropbox.com/u/6594481/tabs-2010/toolbox.history.js"></script>
<button>Loop</button> <span id="loopStatus">true</span><br />
<ul id="list">
    <li><a class="current" href="http://dl.dropbox.com/u/6594481/tabs/one.html" title="one">1</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/two.html" title="two">2</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/three.html" title="three">3</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/four.html" title="four">4</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/five.html" title="five">5</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/six.html" title="six">6</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/seven.html" title="seven">7</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/eight.html" title="eight">8</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/nine.html" title="nine">9</a></li>
</ul>
<div id="content" style="clear:both;">Loading...</div>

CSS

ul{
    width:150px;
}
li {
    display:block;
    float:left;
    list-style:none;
    width:40px;
    height:40px;
    background-color:#c0c0c0;
    border:transparent 1px solid;
    margin:3px;
    text-align:center;
}
li a{
    display:block;
    padding:10px;
    text-decoration:none;
    color:#fff;
}
li.current,a:hover{
    background-color:#ff8040;
}
a.current{
    color:#c0c0c0;
}

JavaScript

$(function(){
 var list=$('#list'),
     elementsPerRow=-1,
     loop=true,
     // find first image y-offset to find the number of images per row
     topOffset=list.find('a:eq(0)').offset().top,
     numTabs=list.find('li').length-1,
     current,newCurrent;
    
 function changeTab(diff){
  // a.current set by jQuery Tools tab plugin
  current=list.find('a.current').parent('li').addClass('current').index();
  newCurrent=(loop)?(current+diff+numTabs+1)%(numTabs+1):current+diff;
 if(loop){
   if(newCurrent>numTabs){newCurrent=0;}
   if(newCurrent<0){newCurrent=numTabs;}
 }else{
   if(newCurrent>numTabs){newCurrent=numTabs;}
   if(newCurrent<0){newCurrent=0;}
 }
  // don't trigger change if tab hasn't changed (for non-looping mode)
 if (current!=newCurrent){
   list.find('li').eq(current).removeClass('current');
   list.find('li').eq(newCurrent).addClass('current').find('a').trigger('click'); // trigger click on tab
 }
 }
 list
  // set up tabs
  .tabs("#content",{effect:'ajax',history:true})
  // find number of images on first row
  .find('a').each(function(i){
      // $(this).hasClass('current').parent('li').addClass('current');
      if(elementsPerRow<0&&$(this).offset().top>topOffset){
         elementsPerRow=i;
      }
  });
  // Set up arrow keys
  // Set to document for demo, probably better to use #list in the final version.
 $(document).bind('keyup focus',function(e){
    var key=e.keyCode;
    if(key>36&&key<41){
      if(key==37){changeTab(-1);}              // Left
      if(key==38){changeTab(-elementsPerRow);} // Up
      if(key==39){changeTab(+1);}              // Right
      if(key==40){changeTab(+elementsPerRow);} // Down
      e.preventDefault();
    }
 });
 // toggle looping through tabs
 $(':button').click(function(){
   loop=!loop;
   $('#loopStatus').text(loop);
 });
 $('a.current').parent('li').addClass('current');
});