1

メインページにjPlayerがあり、タブ、別のページ、またはダイアログに他のコンテンツが読み込まれ、jPlayerのオーディオが再生され続けるように、jQueryMobileを使用してモバイルデバイス用のページを設計しようとしています。

jQuery Mobileを使用してタブを実装する方法はわかりませんが、デモの2ページの例と、追加のコンテンツを含むダイアログを含む1ページを適応させてみました。両方の方法を使用すると、jPlayerでの再生が停止します。

なぜこれが起こっているのかわかりません。私がjPlayerとライトボックスを使用して設計した標準のWebページでは、ライトボックスはjPlayerでの再生に影響を与えないため、jQueryMobileを使用しても同じになることを期待していました。

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要素をdata-role="page"div の外 (単に本体の内部) に追加し、そこに 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 に答える