Циклические вкладки jQuery

Question

Я использую вкладки 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>

Answer 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();
});