尝试使用jQuery Mobile实现jPlayer – 播放器在启动对话框时停止

我正在尝试使用jQuery Mobile设计移动设备页面，主页上有jPlayer，其他内容在选项卡或其他页面或对话框中加载，以便jPlayer中的音频继续播放。

我不确定如何使用jQuery Mobile实现制表符，但我尝试从演示中调整2页示例，还尝试使用包含额外内容的对话框的单个页面，并使用这两种方法停止jPlayer中的播放。

我不确定为什么会这样。 在我使用jPlayer和lightboxes设计的标准网页中，灯箱不会影响jPlayer中的播放，所以我希望使用jQuery Mobile可以使用它。

要在iPhone上进行测试，您需要点击轨道才能播放音频。

我很感激能帮到你的工作，

谢谢，

缺口

您可以在此处查看当前页面。 body标签之间的代码是：

 
 
 
 
 
 
 
play
 
pause
 
stop
 
mute
 
unmute
 
previous
 
next
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 
 
 
 
  var myScroll = new iScroll('wrapper');   

  
 
 
Playlist
 
 
 comments
 open dialog
 
 
 
Page Footer
 
 
  
 
 
Back to playlist
 
 
  /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'monthlymixup'; // required: replace example with your forum shortname // The following are highly recommended additional parameters. Remove the slashes in front to use. var disqus_identifier = 'test'; var disqus_title = 'the marvelous monthly mix up'; // var disqus_url = 'http://example.com/permalink-to-page.html'; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();  Please enable JavaScript to view the comments powered by Disqus. 
 
  

这是我目前用于显示和隐藏页面的脚本：

$("div:jqmData(role='page')").live('pagebeforeshow',function(){ if($(this).hasClass('haveaplayer')) { $(.jp-audio).show(); }else{ $(.jp-audio).hide(); } })

和HTML：

Answer 1

没有代码，它只是一个提示，但看起来jPlayer不想被隐藏。

简单的答案是从data-role="page" div中添加一个div元素（只需在body中）并将jPlayer放在那里。 它需要一些额外的CSS才能正确显示（或者不要隐藏在JQM头部:) :)但是jPlayer应该可以正常工作。

[编辑]

您可以尝试在页面之间移动jPlayer：

 $("div:jqmData(role='page')").live('pageshow',function(){ //test if the page should have the player and then: $(jPlayerWrapperSelector).appendTo($(this)); }) 

尝试使用pageshow和pagebeforeshow

如果这不起作用（移动节点也可以破坏jPlayer），那么你可以绑定到页面事件并在必要时隐藏jPlayer。

 $("div:jqmData(role='page')").live('pagebeforeshow',function(){ //test if the page should have the player and then: { $(jPlayerWrapperSelector).show(); }else{ $(jPlayerWrapperSelector).hide(); } }) 

[EDIT2]

我建议像这样的if语句：

 if($(this).hasClass('haveaplayer')) 

然后，您必须将该类添加到应该具有播放器的div。 像这样：