作爲時間軸的jQuery滑塊

我剛剛完成了一個jQuery滑塊與jQuery的合作。也就是說作爲時間軸的jQuery滑塊

顯示3張圖片。用戶可以使用PREV或NEXT按鈕查看下一張/上一張3張圖像。他們還可以通過滑塊瀏覽所有圖像。

下一步是讓這個滑塊看起來像一個時間軸。左側需要在1970年開始，並於2010年完成。對於每個項目（在這種情況下，項目是一組3個圖像），我需要它在時間線上顯示日期。

即： alt text

我知道我可以開合適的寬度創建日期的圖像，但idealy這種需要是動態的，所以更多的物品可以放在和時間表的自我更新。

來源

2010-09-07 Adam Tomat

你到目前爲止試過了什麼？你認爲可能有什麼用？ ------如果用戶正在使用「PREV」和「NEXT」按鈕，那麼滑塊是一個額外的選項，還是您想用一個滑塊替換按鈕？ – 2010-09-10 00:12:16

可能是一個想法來回答/關閉你的問題，如果你的問題解決了，以免浪費人們試圖回答它的時間 – Blowsie 2011-03-21 13:41:56

在高層次上，下面應該工作：

獲得滑塊UI元素的總寬度，以像素爲單位。
將此數字除以[total number of labels] - 1以獲得分配給每個標籤的總像素數。
在步驟2和float:left樣式中添加一系列div後緊跟滑塊div的寬度。
按照clear: both樣式中的空格使用所有內容。

這裏是一個基本的例子：

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

來源

2011-03-27 03:41:56 aroth

作爲時間軸的jQuery滑塊

回答

相關問題