我想通过显示/隐藏内容来创建一些上一个/下一个日历解决方案。
我有以下用于导航的代码(应该增加几个月的时间来保持灵活性):
<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,并将更改导航标题。我也应该没有第一个月的后退箭头,也没有下个月的下一个箭头。
在此先感谢您的帮助!
我对您的问题的建议是一个纯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"/> ' + txt + ' <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"/> ' + cachedToDivs.eq(2).text().trim() + ' <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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句