Question

我使用的图像为id：sliderBtn

并且为了滑动我写道：

$("#sliderBtn").slider({
      value:0,
      orientation: "horizontal",
      range: "min",
      max: 100,
      step:1,
      animate: true,
      slide:  function(event, ui) {
             not sure what to write here.
           }
});

滑块不适合我。可以帮我一个人吗？我很无能，最终可能会问一个愚蠢的问题，因为我在这个领域是全新的。谢谢:)）

Answer 1

此链接可能会帮助您

http://iviewsource.com/codingtutorials/building-a-ui-slider-with-javascript-and-jquery-ui/

你只需要根据你自己的要求设置ui.value你需要从滑块获取整数值并给滑块提供整数值以便在搜索栏中获得更好的搜索选项

我已经在jwplayer中完成了这个。所以我正在分享我的代码，希望它有所帮助

  jwplayer().onPlay(function () {
                         var play_position=jwplayer().getPosition();
                        var hr = parseInt(( play_position / 3600 ) % 24);
                        var min = parseInt(( play_position / 60 ) % 60);
                        var sec = parseInt((play_position % 60));
                         $('#seek_position').text(hr+':'+min+':'+sec);
                         var videoLength_s = jwplayer().getDuration();
                           var slider_range=((play_position*100)/videoLength_s);
                           slider_range=Math.round(slider_range);

                        $("#seekBar").slider('option', 'value',slider_range);


 });



      //seekbar slider jquery UI slider is being used 
function slider(total)
{

var totalSecond = Math.round(total);
  $("#seekBar").slider({
    //orientation: "vertical",
    min: 0,
    max:100,
    range: "min",
    animate: true,
    slide: function(event, ui) {
           var range=ui.value;
          var currentTime=(totalSecond*range)/100;

            $('#seek_id').text(range);
          setPosition(currentTime); 
       convert(currentTime);
    }
});



function setPosition(currentTime) {


          jwplayer().seek(currentTime);

}

但我相信如果你在标签中搜索html5 api，你可以很容易地做到这一点

http://www.w3.org/2010/05/video/mediaevents.html http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

:)希望它有所帮助

如何在jquery中使用滑块ui制作搜索栏？

1 个答案: