2012-03-04 110 views
1

积极倾听并将jqueryui-sliderjplayer voulme合并为一个值变量?还显示在另一个div的音量值? 是否有办法获取jqueryui slider val的值并将其应用于jplayer vololume的值? HTML标记:jqueryui滑块+ jplayer音量值

<ul class="toolbar ui-widget-header ui-corner-all"> 
       <li><button class="jp-play" href="#">Play</button></li> 
       <li><button class="jp-pause" href="#">Pause</button></li> 
       <li><button class="jp-stop" href="#">Stop</button></li> 
       <li><button class="jp-mute" href="#">Mute</button></li> 
       <li><button class="jp-unmute" href="#">Unmute</button></li> 
       <li><div class="jp-volume-bar"></div></li> 
      </ul> 
      <ul> 


      </ul> 

的jQuery:

my_jPlayer.jPlayer({ 
     ready: function() { 
      $("#jp_container .track-default").click(); 
     }, 
     timeupdate: function(event) { 
      my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%"); 
     }, 
     play: function(event) { 
      my_playState.text(opt_text_playing); 
     }, 
     pause: function(event) { 
      my_playState.text(opt_text_selected); 
     }, 
     ended: function(event) { 
      my_playState.text(opt_text_selected); 
     }, 
     swfPath: "js", 
     cssSelectorAncestor: "#jp_container", 
     supplied: "mp3", 
     wmode: "window", 
     volumeBarValue: volVal 
    }); 
$(".jp-volume-bar").slider({ 
      value: 100, 
      orientation: "horizontal", 
      range: "min", 
      animate: true 
    }); 
    var volVal = $(".jp-volume-bar").slider("value"); 

回答

0

这应该使用事件触发可以实现的。如果您对这个概念不熟悉,请查看jQuery事件绑定和事件触发。

一旦你知道如何做事件,看看jQuery滑块的滑动事件。 http://docs.jquery.com/UI/Slider#event-slide

你只需要更新jPlayer的音量和更换所需的音量

+0

这将给我一个整数,我需要一个浮点数最小0到最大1 ...有没有办法获得一个浮点值? – 2012-03-04 10:06:44

+1

http://stackoverflow.com/questions/4057489/javascript-convert-int-to-float – ShaggyInjun 2012-03-05 03:48:34

4

这真的是很容易与最新jplayer的DIV中的值(版本:2.1.0):

$('#sliderVolume').slider({ 
    value : 50, 
    max: 100, 
    range: 'min', 
    animate: true, 
    orientation: "vertical", 

    slide: function(event, ui) { 
     var volume = ui.value/100; 
     $("#jquery_jplayer").jPlayer("volume", volume); 
    } 
});