音乐播放器“简单”Div概率

时间:2013-12-28 14:50:13

标签: javascript jquery html css

我刚刚在这里为我的网站下载了音乐播放器: http://www.codebasehero.com/2011/06/html-music-player/

但div不会显示在我的区块中。

例如,我将脚本放在两个div之间,但脚本在所有MY div之后创建了自己的div。

<?php include('entete-player.php'); ?>
  <div id="CONTENT">
    <h1>Connexion</h1>
    <div id="TEXT">
      <script type="text/javascript">
          $(document).ready(function(){
              var description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Fusce id tortor nisi. Aenean sodales diam ac lacus elementum scelerisque. Suspendisse a dui   vitae lacus faucibus venenatis vel id nisl. Proin orci ante, ultricies nec interdum at,     iaculis venenatis nulla. ';
              $('body').ttwMusicPlayer(myPlaylist, {
                  autoPlay:false, 
                  description:description,
                  jPlayer:{
                      swfPath:'player/plugin/jquery-jplayer' //You need to override the   default swf path any time the directory structure changes
                  }
              });
          });
      </script>
    </div>
  </div>
<?php include ('pied.php'); ?>

这是我的标题,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Under Shift - Site Officiel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="player/plugin/css/style.css"/>
<link rel="stylesheet" type="text/css" href="player/demo/css/demo.css"/>
<script type="text/javascript" src="player/demo/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="player/plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="player/plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="player/demo/js/myplaylist.js"></script>
</head>

这是我在开发控制台中看到的:

<html></html>
<head></head>
<body>
<div id="HEADER">...</div>
<div id="CONTENT">...</div>
<div id="FOOTER">...</div>
<div id="pluginInstalledv2">...</div>
<div class="ttw-music-player" style="opacity: 1;">...</div>
</body>
</html>

这就是我想要的:

<html></html>
<head></head>
<body>
<div id="HEADER">...</div>
<div id="CONTENT">
<div id="pluginInstalledv2">...</div>
<div class="ttw-music-player" style="opacity: 1;">...</div>
</div>
<div id="FOOTER">...</div>    
</body>
</html>

1 个答案:

答案 0 :(得分:1)

为了让它以你想要的方式显示(至少在代码中),在上面的javascript(jQuery)中,有一行看起来像这样

 $('body').ttwMusicPlayer(myPlaylist, {

将其更改为

 $('#pluginInstalledv2').ttwMusicPlayer(myPlaylist, {

这将使播放器至少在代码中出现在您想要的位置。然后从那里开始根据需要进行定位或其他任何方式。

编辑*** 为了更好地解释,那条线,它说“身体”告诉脚本将玩家加载到身体的任何地方。

当您将“body”更改为“pluginInstalledv2”时,这是我假设玩家所在的名称,它会将玩家置于该div中。

之后你需要做的就是设计风格吧。

祝你好运,希望这适合你。