如何在jQuery中使用slider ui製作seekbar？

我用了一個形象的ID：sliderBtn如何在jQuery中使用slider ui製作seekbar？

和滑動它，我寫道：

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

滑塊滑動不適合我。可以any1幫助我？我無言以對，可能最終會問一個愚蠢的問題，因爲我在這個領域是全新的。謝謝:)

來源

2013-03-17 Shouvik

你可以把你想要存檔的描述最後？ – vittore 2013-03-17 21:01:21

我想製作一個自定義的視頻seekbar。 – Shouvik 2013-03-17 23:41:45

此鏈接可以幫助你

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

，你只需要設置ui.value根據你的情況你自己的需求u需要從滑塊獲得整數值，讓整數值滑塊在seekbar中尋求更好的選擇

我在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，用於u能輕鬆地做到這一點

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

:)希望它幫助

來源

2013-05-09 06:33:20 Hitesh

如何在jQuery中使用slider ui製作seekbar？

回答

相關問題