带箭头的Jquery单杠

Question

任何人都可以向我推荐一些jquery教程或演示，其中有类似下图的内容

箭头指向一个在a和d之间的结果值。有没有其他方法来做其他jquery。使用谷歌图表API我可以得到箭头？

Answer 1

您可以使用jquery-ui slider，然后只需在css中修改即可添加箭头

在jquery-ui的css中找到.ui-slider-handle并修改moddified或添加margin-top和背景图像

之前：

.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）