Question

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

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

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

要在iPhone上进行测试，您需要点按曲目才能播放音频。

我很感激能帮助你实现这个目标，

谢谢，

尼克

您可以看到当前页面here。 body标签之间的代码是：

<body> 

<div class="jp-audio">
<div class="jp-type-playlist">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_interface_1" class="jp-interface">
        <div class="jp-video-play"></div>
        <ul class="jp-controls">
            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
            <li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
            <li><a href="#" class="jp-next" tabindex="1">next</a></li>
        </ul>
        <div class="jp-progress">
            <div class="jp-seek-bar">
                <div class="jp-play-bar"></div>
            </div>
        </div>
        <div class="jp-volume-bar">
            <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-current-time"></div>
        <div class="jp-duration"></div>
    </div>
    <div id="wrapper">
    <div id="scroller">
    <div id="jp_playlist_1" class="jp-playlist">
        <ul>
            <!-- The method Playlist.displayPlaylist() uses this unordered list -->
            <li></li>
        </ul>
    </div>
    </div>
    </div>

    <script type="text/javascript">
    var myScroll = new iScroll('wrapper');
    </script>
</div>

<!-- Start of first page -->
<div data-role="page" id="playlist" data-position="fixed">

    <div data-role="header">
        <h1>Playlist</h1>
    </div><!-- /header -->

    <div data-role="content">
            <a href="#comments">comments</a></p>
            <a href="#comments" data-rel="dialog" data-transition="pop">open dialog</a></p>         

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="comments">



    <div data-role="content">   
                <p><a href="#playlist">Back to playlist</a></p>

    <div id="disqus_thread">
    </div>

      <script type="text/javascript">
          /* * * 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);
          })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>           

                </div><!-- /content -->


</div><!-- /page -->
</body>

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

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

和html：

<div data-role="page" id="playlist" class="haveaplayer">

Answer 1

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

简单的答案是在div div中添加一个data-role="page"元素（只是在正文中）并将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。像这样：

<div data-role="page" class="haveaplayer">

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

1 个答案: