jQuery 滑块作为时间线答案

【问题标题】：jQuery slider as a timelinejQuery 滑块作为时间线
【发布时间】：2010-09-07 10:36:33
【问题描述】：

我刚刚完成了 jQuery 手风琴与 jQuery Slider 的结合。即

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

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

即：

我知道我可以创建一个日期间隔合适的图像，但理想情况下这需要是动态的，以便可以放入更多项目并且时间线自我更新。

【问题讨论】：

到目前为止你尝试过什么？你认为什么可能有效？ ------ 如果用户使用PREV 和NEXT 按钮，滑块会是一个额外的选项，还是你想用一个滑块替换按钮？
如果您的问题得到解决，可能是一个回答/关闭您的问题的想法，以节省人们尝试回答问题的时间

标签： jquery slider timeline

【解决方案1】：

在高层次上，以下应该起作用：

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

这是一个基本的例子：

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);
}

【讨论】：