Jquery手机代码在添加媒体播放器时消失

当我将一个html 5音乐播放器添加到由jquery移动工具栏组成的代码中时，页面变为空白，我无法同时显示工具栏和音乐播放器。我的代码是经过HTML5验证的，我不知道如何让工具栏和音乐播放器同时出现。

这是我更新的代码，只显示了工具栏和工具栏按钮。所以现在只有媒体播放器的一部分显示没有其他内容。

<!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>

尝试在页面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>

更新：将播放器div放在jQM内容div中。

相关内容

最新更新

热门标签：