JQuery用戶界面 - 滑塊

Question

我想使用jQuery UI滑塊。我想要做的是：對於滑塊中的每個步驟，我想在滑塊欄中繪製一個點（。）。我想說的一點是我有一個圖像。

有什麼建議嗎？

感謝您的幫助。最好的祝福。

Answer 1

你可以通過一點小技巧來做到這一點。您可以設置這樣一個div：

#imgSlider {width:100px; background:url('path/to/img.gif') repeat-x top left;} 

然後在滑塊的滑動功能，可以調整該分區的寬度：

// ... slider settings .... 
slide: function (event, ui) { 
    $('#imgSlider').width = ui.value; 
} 

通過這種方式，你都透出只是一部分div，它會創建添加/刪除單個圖像的錯覺。如果你需要某種靜態背景，那麼只需將#imgSlider包裝到另一個div中並給它一個背景。

OR

可以這樣做（這是我的第一個想法）：

1. 創建 '繪畫' 功能，這將增加或刪除圖像的div（或任何元件）。
2. 爲該函數添加一個參數，該參數將決定是否應該添加或刪除圖像（簡單的布爾值將會執行）。
3. 使用滑塊與選項slide接受函數（正如你可以看到在jQuery UI示例頁面）。
4. 在該slide函數中，檢查當前值是低於還是高於新值。你會得到真/假的值（即：新滑塊值是否變小？）。
5. 通過比較值來調用你的'繪圖'函數的參數，所以現在如果它應該添加或刪除該圖像。

然後，你會做一些微調，如處理最小值和最大值。但邏輯應該工作。