我无法将我的CSS样式应用于Rails应用程序中的弹出窗口。弹出窗口包含一个沼泽标准的Rails表单，一个播放按钮和一个使用timer.jquery.js的倒数计时器。
为了测试timer.jquery.js，我编写了一个类似的html文件。那里的样式很好用。弹出窗口可能缺少一些明显的规则，但是我以前从未使用过它们，到目前为止，我还没有遇到任何问题。这是正常工作的测试文件：
timer.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="timer.jquery.js"></script>
<style>
#timer {
color: black;
font-size: 50px;
}
</style>
</head>
<body>
<div id="timer"></div>
<script>
$('#timer').timer({
format: '%H:%M:%S'
});
$('#timer').timer('pause');
</script>
</body>
</html>
以下是我在Rails应用程序中使用的相关文件：
_track_time_form.html.erb
<div id="countdown-timer"></div>
<div id="playback-controls">►</div>
<div id="track-time-form">
<%= form_for @project, :url => { :action => "log_time" }, remote: true do |p| %>
<ul>
<li><%= p.label :project, "Project:"%><br>
<%= p.collection_select(:id, current_user.projects, :id, :name) %></li>
<%= p.hidden_field :time_logged, :value => 0 %> <!-- value set by script in log_time.js.erb -->
<li><%= p.submit "Log time", id: "log-time-button" %></li>
</ul>
<% end %>
</div>
track.js.erb
timeTrackingForm = window.open("", "", "height=700,width=500");
$(timeTrackingForm.document.body).html("<%= j render( :partial => 'track_time_form' ) %>");
$(timeTrackingForm.document).ready(function(){
var timer = $("#countdown-timer", $(timeTrackingForm.document))
$(timer).timer({
format: '%H:%M:%S'
});
$(timer).timer('pause');
});
造型
#countdown-timer {
font-size: 40px;
color: black;
}
#playback-controls {
font-size: 40px;
color: black;
}
$('#timer').css({'color':'black','font-size':'50x'});
尝试在页面末尾添加js样式。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句