Блог

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

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

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

найдите .ui-slider-handle в css jquery-ui и измените или добавьте для верхнего поля и фонового изображения

перед:

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