jQuery滑块作为时间轴 [英] jQuery slider as a timeline

问题描述

我刚刚完成了将jQuery手风琴与jQuery Slider结合在一起的工作. 即

I have just finished incorporating a jQuery accordian with a jQuery Slider. I.e.

显示3张照片.用户可以使用PREV或NEXT按钮查看下一张/上一张3张图像.他们还可以使用滑块浏览所有图像.

3 pictures are displayed. The user can either use PREV or NEXT buttons to view the next/prev 3 images. They can also navigate through all the images with the slider.

下一步是使此滑块看起来像时间轴.左侧需要从1970年开始，到2010年结束.对于每个项目(在这种情况下，一个项目是一组3张图像)，我需要它在时间轴上显示日期.

The next step is to make this slider look like a timeline. The left hand side needs to start at 1970 and finish at 2010. For each item (an item is a set of 3 images in this case) I need it to show a date on the timeline.

即:

我知道我可以创建一个图像，使日期之间的宽度保持正确的宽度，但理想情况下，此图像必须是动态的，以便可以放入更多项目，并且时间轴可以自动更新.

I know I could create an image with the dates the right width apart but idealy this needs to be dynamic so more items can be put in and the timeline self updates.

推荐答案

在较高的层次上，应该可以进行以下操作:

At a high level, the following should work:

1. 获取滑块UI元素的总宽度(以像素为单位).
2. 将该数字除以[total number of labels] - 1可获得要分配给每个标签的像素总数.
3. 在滑块div之后立即添加一系列div，并使用您在步骤2中获得的宽度和float:left样式.
4. 使用clear: both样式的空div跟随所有内容.

1. Get the total width of the slider UI element, in pixels.
2. Divide this number by [total number of labels] - 1 to get the total number of pixels to allocate to each label.
3. Add a series of div's immediately after the slider div with the width you got in step 2 and the float:left style.
4. Follow everything with an empty div with the clear: both style.

这是一个基本示例:

CSS

.timeline {
    width: 500px;
    border: 1px solid black;
}
.timelineEntry {
    float: left;
}
.first {
    position: relative; left: 5px;
}
.last {
    position: relative; left: -10px;
}
.clear {
    clear: both;
}

标记

<div id="timelineContainer">
    <div class="timeline" id="slider">
        Slider UI Goes Here
    </div>
</div>
<div class="clear"></div>

JavaScript

var container = document.getElementById("timelineContainer");
var labels = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var totalWidth = $("#slider").width();
var labelWidth = Math.floor(totalWidth / (labels.length - 1));
for (var index = 0; index < labels.length; index++) {
    var nextLabel = document.createElement("div");
    nextLabel.className = "timelineEntry";
    if (index == 0) {
        nextLabel.className += " first";
    }
    else if (index == labels.length - 1) {
        nextLabel.className += " last";
    }
    nextLabel.style.width = labelWidth + "px";
    nextLabel.innerHTML = labels[index];
    container.appendChild(nextLabel);
}

这篇关于jQuery滑块作为时间轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！