Я пытаюсь создать страницу для мобильных устройств с помощью jQuery Mobile, на главной странице которой есть jPlayer, а другой контент загружается либо на вкладках, либо на другой странице, либо в диалоговом окне, так что звук в jPlayer продолжает воспроизводиться.
Я не уверен, как реализовать вкладки с помощью jQuery Mobile, но я попытался адаптировать двухстраничный пример из демонстраций, а также одну страницу с диалоговым окном, которое содержит дополнительный контент, и с использованием обоих методов воспроизведение в 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>
here is the script I currently have for showing and hiding pages:
<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">
