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. 将此数字除以 [标签总数] - 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屋！