Jquery prev/next 自定义日历导航 show/hide 内容

Question

我想根据 showing/hiding 内容创建一些 prev/next 日历解决方案。

我有这个导航代码（应该可以灵活地添加更多月份）：

<div class="months">
    <div class="082016">2016 august</div>
    <div class="092016">2016 september</div>
    <div class="102016">2016 october</div>
</div>

和项目：

<div class="items">
    <div id="082016">
        <div class="item">August item</div>
        <div class="item">August item</div>
        <div class="item">August item</div>
    </div>
    <div id="092016">
        <div class="item">September item</div>
        <div class="item">September item</div>
        <div class="item">September item</div>
    </div>
    <div id="102016">
        <div class="item">October item</div>
        <div class="item">October item</div>
        <div class="item">October item</div>
    </div>
</div>

我想要实现的是有这样的导航：

所以在箭头上单击它会显示月份 ID 并将更改导航标题。此外，我应该没有第一个月的后退箭头和拉特月的下一个箭头。

在此先感谢您的帮助！

Answer 1

我对你的问题的建议是一个纯粹的jQuery脚本：

$(function () {
  var cachedToDivs = $('.months div');

  cachedToDivs.css({'font-weight': 'bold'});
  $('.items > div:lt(' + (cachedToDivs.length - 1) + ')').hide();
  $('.months div:lt(' + (cachedToDivs.length - 1) + ')').hide();


  cachedToDivs.on('click', 'img', function (e) {
    if ($(':animated').length > 0) {
      return; // wait for last animation...
    }
    var index;
    if (e.target.name == 'prev') {
      index = (-1 + $(this).parent().index()) % cachedToDivs.length;
      index = (index < 0) ? cachedToDivs.length - 1: index;
    } else {
      index = (1 + $(this).parent().index()) % cachedToDivs.length;
    }
    cachedToDivs.eq(index).find('img').remove();
    var txt = cachedToDivs.eq(index).text().trim();
    cachedToDivs.eq(index).html('<img name="prev" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-previous-icon.png" width="20" height="15"/>&nbsp;&nbsp;&nbsp;' + txt + '&nbsp;&nbsp;&nbsp;<img  name="next" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-next-icon.png" width="20" height="15"/>');
    $(this).parent().hide();
    cachedToDivs.eq(index).show();
    $('.items > div:visible').slideUp('fast', function() {
      $('.items #' + cachedToDivs.eq(index).attr('class')).slideDown('fast');
    })
    if(index == (cachedToDivs.length - 1)) {  // on the last month remove next image
      cachedToDivs.eq(index).find('img[name="next"]').remove();
    }
    if(index == 0) {  // on the first month remove prev image
      cachedToDivs.eq(index).find('img[name="prev"]').remove();
    }
  });
  cachedToDivs.eq((cachedToDivs.length - 1)).html('<img name="prev" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-previous-icon.png" width="20" height="15"/>&nbsp;&nbsp;&nbsp;' + cachedToDivs.eq(2).text().trim() + '&nbsp;&nbsp;&nbsp;<img  name="next" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-next-icon.png" width="20" height="15"/>');
  $('.months div:visible img[name="next"]').trigger('click');
});

.months {
  display: inline-block;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="months">
    <div class="082016">2016 august</div>
    <div class="092016">2016 september</div>
    <div class="102016">2016 october</div>
</div>
<div class="items">
    <div id="082016">
        <div class="item">August item</div>
        <div class="item">August item</div>
        <div class="item">August item</div>
    </div>
    <div id="092016">
        <div class="item">September item</div>
        <div class="item">September item</div>
        <div class="item">September item</div>
    </div>
    <div id="102016">
        <div class="item">October item</div>
        <div class="item">October item</div>
        <div class="item">October item</div>
    </div>
</div>

Jquery prev/next 自定义日历导航 show/hide 内容

Jquery prev/next navigation with show/hide content for custom calendar

jquery

calendar

navigation

cycle