Fatal编程技术网
  • jquery/
  • 添加媒体播放器时，Jquery移动代码消失

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

jquery html jquery-mobile

添加媒体播放器时，Jquery移动代码消失,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,当我将HTML5音乐播放器添加到包含jquery移动工具栏的代码中时，页面将变为空白，并且我无法同时显示工具栏和音乐播放器。我的代码是经过HTML5验证的，我不知道如何让工具栏和音乐播放器同时出现 这是我的更新代码，只显示了工具栏和工具栏按钮。此外，现在只有部分媒体播放器显示没有其他内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>This is

当我将HTML5音乐播放器添加到包含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>


这是我的音乐播放器
var-songlist=新数组（3）；
歌曲列表[0]=新对象（）；
歌曲列表[0]。cover=“songs/Joe\u Marson\u满足者\u心智\u 09\u穷人\u圣约翰.jpg”
歌曲列表[0].mp3=“songs/Joe\u Marson\u满足者\u心智\u 09 \u穷人\u圣约翰.mp3”；
歌曲列表[0]。ogg=“songs/Joe\u Marson\u满足者\u心智\u 09 \u穷人\u圣约翰。ogg”
歌曲列表[0]。title=“可怜的圣约翰”；
歌曲列表[0]。标题链接=”http://freemusicarchive.org/music/Joe_Marson__The_Satisfied_Mind/netBloc_Vol_43_ANTIPETROMUSICABIOTIC/09_-_Joe_Marson__The_Satisfied_Mind_-_Poor_St_John";
歌曲列表[0]。艺术家=“乔·马森&满足的心灵”；
歌曲列表[1]=新对象（）；
歌曲列表[1]。cover=“songs/Chris_Zabriskie_-u 01_-u空气的温度u Kaleetan.jpg的弓上u”
歌曲列表[1].mp3=“songs/Chris_Zabriskie_-_01_-_空气的温度__Kaleetan.mp3的弓上”；
歌曲列表[1].ogg=“歌曲/Chris_Zabriskie_-_01_-_空气的温度__Kaleetan.ogg的弓上的温度”
歌曲列表[1]。title=“卡利坦船头的空气温度”；
歌曲列表[1]。标题链接=”http://freemusicarchive.org/music/Chris_Zabriskie/Undercover_Vampire_Policeman/01_-_The_Temperature_of_the_Air_on_the_Bow_of_the_Kaleetan_1165";
歌曲列表[1]。艺术家=“克里斯·扎布里斯基”；
歌曲列表[2]=新对象（）；
歌曲列表[2]。cover=“歌曲/break\u免费\u-\u 05\u-\u相关内容。jpg”
歌曲列表[2].mp3=“免费歌曲/break\u\u-\u 05\u-\u相关内容。mp3”；
歌曲列表[2]。ogg=“免费歌曲/break\u\u-\u 05\u-\u相关内容。ogg”
歌曲列表[2]。title=“令人高兴的事情”；
歌曲列表[2]。标题链接=”http://freemusicarchive.org/music/Broke_For_Free/Something_EP/Broke_For_Free_-_Something_EP_-_05_Something_Elated";
歌曲列表[2]。艺人=“免费中断”；
$（“#player”）.xeMusicPlayer（{歌曲列表：歌曲列表，主题：2，模式：2}）；
测试
尝试在页面div中围绕页眉div:


测试
更新：将player div放在jQM content div中。

这有点帮助。媒体播放器的一部分现在才出现，我可以看到工具栏和工具栏按钮，但看不到其他任何东西。我用现在的代码更新了我的第一篇文章。如果你把媒体播放器也放在页面div中会怎么样？如果我把#播放器移到div data role=“page”>的正下方，那么我能看到的媒体播放器的一部分就消失了（播放器的一部分在黑条下的上中）。请参阅图片以获取参考。您应该在标题DIV下但在页面DIV内添加一个带有data role=“content”的DIV，然后将播放器放在其中。这将是页面的正确jQM设置。此外，还引用了两个版本的jQuery（1.8.3和2.0.0）；在jQuery Mobile之前，您应该只声明一个音乐播放器，并且应该检查音乐播放器是否与jQuery 1.8.3或1.9.x兼容，这两个版本可以很好地与jQM配合使用。 
<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>