箭頭jQuery的單槓

Question

任何人都可以給我建議一些jQuery的教程或者類似下圖已經取得

箭頭會指向這將是一個和之間的一些結果值的演示d。有沒有其他的方法來做到這一點，jQuery的。使用谷歌圖表API我可以得到箭頭莫名其妙？

Answer 1

可以使用jquery-ui slider然後在CSS只是修改添加箭頭

發現jQuery的用戶界面的CSS中的.ui滑塊，拉手，使moddified或添加邊距和背景圖像

前：

.ui-slider .ui-slider-handle 
{ 
    position: absolute; 
    z-index: 2; 
    width: 1.2em; 
    height: 1.2em; 
    cursor: default; 
} 

變化：

.ui-slider .ui-slider-handle 
{ 
    margin-top:-20px; 
    background-image:url(ArrowDown.png); 
    position: absolute; 
    z-index: 2; 
    width: 1.2em; 
    height: 1.2em; 
    cursor: default; 
} 

---

---

在主頁

只需添加腳本的滑塊：

$(function() { 
    $("#slider").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
      $("#amount").val("$" + ui.value); 
     } 
    }); 
    $("#amount").val("$" + $("#slider").slider("value")); 
}); 

和HTML：

<p> 
    <label for="amount">Donation amount ($50 increments):</label> 
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
</p> 

<div id="slider"></div> 

我使用了jQuery 1.5.1和jQuery UI的1.8.12也是它的作品，（不要忘了調用jquery.js，jquery-ui.js和jquery-ui.css）