1

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

我不确定如何使用 jQuery Mobile 实现选项卡，但我尝试过调整演示中的 2 页示例，以及带有包含额外内容的对话框的单页，并使用这两种方法在 jPlayer 中停止播放。

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

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

我会很感激任何帮助让这个工作，

谢谢，

缺口

您可以在此处查看当前页面。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">

4

1 回答 1

1

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

简单的答案是从 div 中添加一个div元素data-role="page"（只是在 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();
   }
})

[编辑2]

我建议使用这样的 if 语句：

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

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

<div data-role="page" class="haveaplayer">
于 2011-04-28T13:35:59.617 回答