Question

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

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

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

Answer 1

尝试在页面div <div data-role="page">

中包围您的标题div

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

添加媒体播放器时，Jquery Mobile代码消失

1 个答案: