use*_*024 4 jquery ruby-on-rails fancybox
我试图在我的应用程序中使用lighbox或fancybox而没有宝石......
我已经尝试输入资产/ javascript和assets/stylesheet .js和.css文件.但它们只在我刷新页面时才有效.
在我的application.html.erb中
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
输出:
<link data-turbolinks-track="true" href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.fancybox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/novidades.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/home.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fancybox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fancybox.pack.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/novidades.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
什么是错的？
Turbolniks
即使你提到你这样做"没有宝石",它也有一个问题的所有标志 turbolinks
如果您不知道,Turbolinks是与Rails捆绑在一起的宝石,可以帮助您更快地加载页面.它通过基本上拉取<body>页面的内容,保持<head>完整性来实现这一点.
尽管Turbolinks在大多数情况下都有效,但它有一个主要缺陷 - 因为当你加载页面时JS没有刷新(因为页面的head区域保持不变),JS通常不会"工作",除非你刷新页面(然后刷新<head>标签).
-
固定
有几种方法可以"修复"这个 - 基本上让你的JS使用Turbolinks刷新:
首先,您需要使用Turbolinks 事件:
#app/assets/javascripts/application.js
var fancybox = function(){
$(".fancybox").fancybox();
};
$(document).on("page:load ready", fancybox);
这应该适合你.另一种解决方案是使用Javascript委派,尽管在这种情况下我认为它不适用于Fancybox
| 归档时间： |
|
| 查看次数： |
1477 次 |
| 最近记录： |