Jquery турник со стрелкой

Question

Может кто-нибудь предложить мне какой-нибудь учебник по jquery или демо, где было сделано что-то похожее на рисунок ниже

Стрелка будет указывать на некоторое значение результата, которое будет между a и d. Есть ли другой способ сделать это еще JQuery. С помощью API Google Chart я могу получить стрелку как-то ??

Answer 1

вы можете использовать jquery-ui slider , затем просто измените в css для добавления стрелки

найдите .ui-slider-handle в jssery-ui's css и сделайте его модифицированным или добавьте для margin-top и background image

перед:

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