我刚刚完成了 jQuery 手风琴与 jQuery 滑块的合并。
IE。
显示 3 张图片。用户可以使用PREV
or NEXT
按钮可查看下一张/上一张 3 张图像。他们还可以使用滑块浏览所有图像。
下一步是使这个滑块看起来像时间线。左侧需要从 1970 年开始,到 2010 年结束。对于每个项目(在本例中一个项目是一组 3 个图像),我需要它在时间轴上显示日期。
i.e:
我知道我可以创建一个日期间隔正确的图像,但理想情况下这需要是动态的,以便可以放入更多项目并且时间线会自我更新。
从高层次来看,以下内容应该有效:
- 获取滑块 UI 元素的总宽度(以像素为单位)。
- 将此数字除以
[total number of labels] - 1
获取分配给每个标签的像素总数。
- 在滑块 div 后立即添加一系列 div,其宽度为步骤 2 中获得的宽度和
float:left
style.
- 用空 div 跟随所有内容
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;
}
Markup
<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);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)