[英]Including stylesheet in <head> gives different result than javascript append to head
使用HTML5和jQuery,我想實現JPlayer(來自www.jplayer.org)。
不幸的是,我不能按照我想要的方式工作。 最后,我的問題似乎是樣式表“包含”的問題。 由於某些原因我不明白,使用“jQuery appendTo head”而不是“html鏈接”時,樣式表無法正常工作。 該文件是定義包含但在觸發javascript操作時GUI被搞砸了。
我附上了兩個可以在任何地方用於測試的例子。 我對唯一不同的線路做了評論。
這是第一個文件。 此示例按預期工作:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Test with link rel</title>
<!-- ONLY DIFFERENCE IS THIS LINE -->
<link rel="stylesheet" type="text/css" href="http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" />
<!-- END -->
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>Cro Magnon Man</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<script type="text/javascript">
$("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
</script>
</body>
</html>
第二個文件沒有正常工作:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Test with jquery appendTo</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>Cro Magnon Man</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<!-- ONLY DIFFERENCE IS THES LINES -->
<script type="text/javascript">
$("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
$('<link>', { rel: 'stylesheet', type: 'text/css', href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css' }).appendTo('head');
</script>
<!-- END -->
</body>
</html>
樣式表正在處理第二個文件,但只要您點擊播放器上的某些內容,GUI就會搞砸。 這是為什么? 我可以對提供的jPlayer樣式表進行一些更改,以使其適用於我的第二個示例嗎?
這應該可以解決您的問題,一旦加載CSS文件就調用插件:
$('<link>', {
rel: 'stylesheet',
type: 'text/css',
href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css'
}).one('load', function () {
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"
});
},
supplied: "m4a",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
});
}).appendTo('head');
雖然,在大多數情況下這可能就足夠了:
$('<link>', { rel: 'stylesheet', type: 'text/css', href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css' }).appendTo('head');
$("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.