[英]Monthly timeline grid with right to left horizontal scroll
I want to make a Horizontal Timeline Carousel in Bootstrap with Js I don't know where to start. 我想用Js在Bootstrap中制作水平时间线轮播,但我不知道从哪里开始。 The structure is something like below. 结构如下。 Please help 请帮忙
Either I can do it with table column or with List Item. 我可以使用表列或列表项来执行此操作。 By clicking the arrow key the list scroll right to left with one month forward. 通过单击箭头键,列表将向右滚动到左滚动一个月。 I did not find and similar code around the internet. 我在互联网上找不到类似的代码。
<table width="100%" class="table table-responsive table-bordered">
<tbody>
<tr>
<td width="20%" class=""><div class="stages ready" style="left: 0px;">
<ul class="">
<li data-stage-date="2018-07-01" class="ready" style="width: 480px; left: 0px;">
<div class="interval"> <span class="title">July</span> </div>
<div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
<div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
<svg class="cui3-icon cui3-icon--s">
<use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
</svg>
<span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
<div class="totalSum"></div>
</div>
</li>
<li data-stage-date="2018-08-01" class="ready" style="width: 480px; left: 480px;">
<div class="interval"> <span class="title">August</span> </div>
<div class="summary" data-open="100% of ₹10,000 " data-weighted-open="₹10,000" data-won="₹0" data-value="₹10,000" data-weighted-summary="₹10,000" data-percentage="100">
<div class="icon"> <span class="plus" data-summary="₹10,000" data-weighted-open="₹10,000" data-open="100% of ₹10,000 " data-won="₹0">+</span>
<svg class="cui3-icon cui3-icon--s">
<use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
</svg>
<span class="number" data-summary="₹10,000" data-weighted-summary="" data-weighted-open="₹10,000" data-open="100% of ₹10,000 " data-won="₹0"></span> </div>
<div class="totalSum"></div>
</div>
</li>
<li data-stage-date="2018-09-01" class="ready" style="width: 480px; left: 960px;">
<div class="interval"> <span class="title">September</span> </div>
<div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
<div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
<svg class="cui3-icon cui3-icon--s">
<use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
</svg>
<span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
<div class="totalSum"></div>
</div>
</li>
<li data-stage-date="2018-10-01" class="ready" style="width: 480px; left: 1440px;">
<div class="interval"> <span class="title">October</span> </div>
<div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
<div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
<svg class="cui3-icon cui3-icon--s">
<use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
</svg>
<span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
<div class="totalSum"></div>
</div>
</li>
<li data-stage-date="2018-11-01" class="ready" style="width: 480px; left: 1920px;">
<div class="interval"> <span class="title">November</span> </div>
<div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
<div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
<svg class="cui3-icon cui3-icon--s">
<use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
</svg>
<span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
<div class="totalSum"></div>
</div>
</li>
<li data-stage-date="2018-06-01" class="ready" style="width: 480px; left: -480px;">
<div class="interval"> <span class="title">June</span> </div>
<div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
<div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
<svg class="cui3-icon cui3-icon--s">
<use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
</svg>
<span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
<div class="totalSum"></div>
</div>
</li>
</ul>
</div></td>
</tr>
</tbody>
</table>
I think you can do this some elements, but this time, I used ul(list). 我认为您可以执行某些操作,但是这次,我使用了ul(list)。 You can use the scrollLeft (jQuery method), so your only work is that setting the new position properly. 您可以使用scrollLeft(jQuery方法),因此您唯一的工作就是正确设置新位置。
$("scroll content(ul)").scrollLeft("100(new position)");
For example . 例如 。 I hope this will help you. 我希望这能帮到您。
UPDATED 更新
Finally, I'll show you an example. 最后,我将向您展示一个示例。 Link 链接
You have SyntaxError: Unexpected token .
您有SyntaxError: Unexpected token .
, so please solve this error at first. ,因此请首先解决此错误。 As long as JavaScript run without error, I can debug. 只要JavaScript运行没有错误,我就可以调试。
ul.animate({
ul.scrollLeft(ul.scrollLeft() + targetMonth.position().left - 15);
}, 200);
↓
ul.animate({
scrollLeft: ul.scrollLeft() + targetMonth.position().left - 15
}, 200);
Finally 最后
First, Add some style and elements your #date-list
to confirm working properly. 首先,在#date-list
添加一些样式和元素,以确认其正常工作。
/* ADDED */
#date-list {
overflow-x: auto;
}
<ul id="date-list" class="d-flex">
<li id="month-1" class="list-group-item">...</li>
<li id="month-2" class="list-group-item">...</li>
<li id="month-3" class="list-group-item">...</li>
<li id="month-4" class="list-group-item">...</li>
<li id="month-5" class="list-group-item">...</li>
<li id="month-6" class="list-group-item">...</li>
<!-- ADDED -->
<li id="month-7" class="list-group-item">...</li>
<li id="month-8" class="list-group-item">...</li>
</ul>
Then, add a variable in init process and modify a logic. 然后,在初始化过程中添加变量并修改逻辑。
(If you should handle properly when the number of #date-list li
is not 12) (But I assume at least you have eight item, because you have 'today' button.) (如果#date-list li
数量不是12时您应该正确处理)(但是我想至少您有8个项目,因为您有“今天”按钮。)
// ADDED in init process.
var listCount = $("#date-list li").length;
// using it instead of hard cording.
} else if (currentMonth === listCount) {
Now, You can see scrollbar, let't add a class in your css file. 现在,您可以看到滚动条,不要在css文件中添加类。
(If you want to see the highlight where the list-item that you focus.) (如果要查看突出显示列表项所关注的位置。)
.list-group-item.active-month {
color: #31708f;
background-color: #d9edf7;
}
Finally, if you don't want to show the default scroll bar, I think the best easy way is to use webkit-scrollbar, but unfortunately, that isn't working on IE. 最后,如果您不想显示默认的滚动条,我认为最好的简单方法是使用webkit-scrollbar,但是不幸的是,这不适用于IE。
#date-list::-webkit-scrollbar {
/* Of course, you can also change the scrollbar what it looks. */
display: none;
}
If you need to work only IE11 or Egde, I recommend Perfect-scrollbar , or at leaset other plugins, rather than implement yourself. 如果您只需要工作IE11或Egde,建议您使用Perfect-scrollbar或其他插件,而不要自己实现。
If you need to work other version of IE, I can't help.(I don't have an environment.) 如果您需要使用其他版本的IE,我将无能为力(我没有环境。)
Here's example using perfect-scrollbar
. 这是使用perfect-scrollbar
的示例 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.