Код JQuery Mobile исчезает при добавлении медиаплеера

Когда я добавляю музыкальный плеер html 5 к моему коду, который состоит из панели инструментов jquery mobile, страница становится пустой, и я не могу получить как панель инструментов, так и музыкальный проигрыватель. Мой код проверен на соответствие HTML 5, и я не знаю, как одновременно отображать как панель инструментов, так и музыкальный проигрыватель.Код JQuery Mobile исчезает при добавлении медиаплеера

Вот мой обновленный код только с панелями инструментов и кнопок на панели инструментов. Кроме того, только часть медиаплеера теперь показывает, что больше ничего не существует.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>This is my Music-Player</title> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="index.css"> 

<link href="musicplayer/css/xemusicplayer.css" media="all" rel="stylesheet" type="text/css"> 
    <script src="musicplayer/js/jquery-2.0.0.min.js" type="text/javascript"></script> 
    <script src="musicplayer/js/jquery-xemusicplayer-1.0.0.js" type="text/javascript"></script> 



</head> 
<body> 

<div id="player"></div> 

<script type="text/javascript"> 
var songlist = new Array(3); 
songlist[0] = new Object(); 
songlist[0].cover = "songs/Joe_Marson__The_Satisfied_Mind_-_09_-_Poor_St_John.jpg" 
songlist[0].mp3 = "songs/Joe_Marson__The_Satisfied_Mind_-_09_-_Poor_St_John.mp3"; 
songlist[0].ogg = "songs/Joe_Marson__The_Satisfied_Mind_-_09_-_Poor_St_John.ogg" 
songlist[0].title = "Poor St. John"; 
songlist[0].title_link = "http://freemusicarchive.org/music/Joe_Marson__The_Satisfied_Mind/netBloc_Vol_43_ANTIPETROMUSICABIOTIC/09_-_Joe_Marson__The_Satisfied_Mind_-_Poor_St_John"; 
songlist[0].artist = "Joe Marson & The Satisfied Mind"; 
songlist[1] = new Object(); 
songlist[1].cover = "songs/Chris_Zabriskie_-_01_-_The_Temperature_of_the_Air_on_the_Bow_of_the_Kaleetan.jpg" 
songlist[1].mp3 = "songs/Chris_Zabriskie_-_01_-_The_Temperature_of_the_Air_on_the_Bow_of_the_Kaleetan.mp3"; 
songlist[1].ogg = "songs/Chris_Zabriskie_-_01_-_The_Temperature_of_the_Air_on_the_Bow_of_the_Kaleetan.ogg" 
songlist[1].title = "The Temperature of the Air on the Bow of the Kaleetan"; 
songlist[1].title_link = "http://freemusicarchive.org/music/Chris_Zabriskie/Undercover_Vampire_Policeman/01_-_The_Temperature_of_the_Air_on_the_Bow_of_the_Kaleetan_1165"; 
songlist[1].artist = "Chris Zabriskie"; 
songlist[2] = new Object(); 
songlist[2].cover = "songs/Broke_For_Free_-_05_-_Something_Elated.jpg" 
songlist[2].mp3 = "songs/Broke_For_Free_-_05_-_Something_Elated.mp3"; 
songlist[2].ogg = "songs/Broke_For_Free_-_05_-_Something_Elated.ogg" 
songlist[2].title = "Something Elated"; 
songlist[2].title_link = "http://freemusicarchive.org/music/Broke_For_Free/Something_EP/Broke_For_Free_-_Something_EP_-_05_Something_Elated"; 
songlist[2].artist = "Broke For Free"; 

$("#player").xeMusicPlayer({songlist: songlist, theme: 2, mode: 2}); 
</script> 



<div data-role="page"> 
    <div data-role="header"> 
     <div class="ui-grid-d"> 
      <div class="ui-block-a">test</div> 
      <div class="ui-block-b"> 
       <div data-role="fieldcontain"> 
       <input type="search" name="search" id="search-basic" value="" placeholder="test" /> 
       </div> 
      </div> 
      <div class="ui-block-c"><a href="index.html" data-role="button" data-icon="alert" data-iconpos="left">test</a> 
      </div> 
      <div class="ui-block-d"><a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="left">test</a> 
      </div> 
      <div class="ui-block-e"><a href="index.html" data-role="button" data-icon="gear" data-iconpos="left">test</a> 
      </div> 
     </div> 
     <!-- /grid-b --> 
    </div> 

</div> 
</body> 
</html>

источник

2013-11-19 Jason

Try окружающих ваш заголовок DIV в DIV страницы: <div data-role="page">

<div data-role="page"> 
    <div data-role="header"> 
     <div class="ui-grid-d"> 
      <div class="ui-block-a">test</div> 
      <div class="ui-block-b"> 
       <div data-role="fieldcontain"> 
       <input type="search" name="search" id="search-basic" value="" placeholder="test" /> 
       </div> 
      </div> 
      <div class="ui-block-c"><a href="index.html" data-role="button" data-icon="alert" data-iconpos="left">test</a> 
      </div> 
      <div class="ui-block-d"><a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="left">test</a> 
      </div> 
      <div class="ui-block-e"><a href="index.html" data-role="button" data-icon="gear" data-iconpos="left">test</a> 
      </div> 
     </div> 
     <!-- /grid-b --> 
    </div> 
    <div data-role="content"> 
     <div id="player"></div> 
    </div> 
</div>

UPDATE: положить плеер ДИВ в jQM контента дел.

источник

2013-11-19 23:20:24 ezanker

Это помогло немного. Часть медиаплеера появляется только сейчас, и я вижу панели инструментов и кнопки панели инструментов, но не что-то еще. Я обновил код первого сообщения с тем, что он сейчас. – Jason

Что делать, если вы также разместите медиа-плеер внутри страницы div? – ezanker

Если я перемещаю #player прямо под div data-role = "page">, то исчезает одна часть медиаплеера, который я вижу (часть игрока находится сверху по черной полосе). См. Изображение для справки http://postimg.org/image/aeqc0w83b/ – Jason

Код JQuery Mobile исчезает при добавлении медиаплеера

ответ

Смежные вопросы