[英]How can I make the arrow keys work in a Rails/Twitter-Bootstrap image slider (carousel) app?
I'm trying to make the carousel app from this site http://www.w3schools.com/bootstrap/bootstrap_carousel.asp work. 我正在尝试使该站点http://www.w3schools.com/bootstrap/bootstrap_carousel.asp的轮播应用程序正常工作。 Everything works fine except for the left and right arrow keys.
除了向左和向右箭头键以外,其他所有功能都正常。 The environment I'm using is just a plain ordinary Rails app environment.
我使用的环境只是普通的Rails应用程序环境。 I'm using the twitter-bootstrap-rails ( https://github.com/seyhunak/twitter-bootstrap-rails ).
我正在使用twitter-bootstrap-rails( https://github.com/seyhunak/twitter-bootstrap-rails )。
I did some debugging and found out that if I manually include the jQuery and Bootstrap libraries, the arrow keys will work. 我进行了一些调试,发现如果我手动包含jQuery和Bootstrap库,则箭头键将起作用。 I did this by:
我这样做是:
class SomeController < ApplicationController
def some_action
render layout: false
end
end
Then copying and pasting the entire example from the website I mentioned above to the view. 然后将整个示例从上面提到的网站复制并粘贴到视图中。 As I understand it, this controller/view setup does not load any of the layout, Javascript, stylesheets, etc.
据我了解,此控制器/视图设置不会加载任何布局,Javascript,样式表等。
A similar thing can be achieved if, in the app/views/layouts/application.html.erb file, I put this: 如果在app / views / layouts / application.html.erb文件中输入以下内容,则可以实现类似的目的:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Instead of the default contents: 代替默认内容:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
I also tried removing the turbolinks argument pair but the arrow keys still would not work. 我也尝试删除了turbolinks参数对,但是箭头键仍然无法使用。
What am I missing? 我想念什么? How do I debug this in a systematic manner?
我如何系统地调试它? I tried following the events being fired on a browser's development tool (Chrome profiler) but I can't seem to narrow down the actual left/right arrow key press event from all the output.
我尝试跟踪在浏览器开发工具(Chrome profiler)上触发的事件,但似乎无法从所有输出中缩小实际的左/右箭头按键事件。
Add the bootstrap.min.js
and jquery.min.js
files to your assets directory: app/assets/javascripts
. 将
bootstrap.min.js
和jquery.min.js
文件添加到资产目录: app/assets/javascripts
。 Also be sure to require them in your application manifest: app/assets/javascripts/application.js
. 另外,请务必在您的应用清单中要求它们:
app/assets/javascripts/application.js
。 If you have jQuery or bootstrap gems in your Gemfile, remove them. 如果您的Gemfile中包含jQuery或bootstrap gem,请将其删除。 These steps will achieve the same effect as adding these two lines to your layout:
这些步骤将达到与将这两行添加到布局中相同的效果:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
The example should still work but at least now you're setup will match the traditional Rails environment. 该示例仍然可以使用,但至少现在您的设置将与传统的Rails环境匹配。
Monitor your javascript console in chrome's web inspector to see if any javascript errors come up while using the plugin. 在chrome的网络检查器中监控您的JavaScript控制台,以查看使用该插件时是否出现任何JavaScript错误。
If you want to override the keypress events try this: 如果要覆盖按键事件,请尝试以下操作:
<script>
$("body").keydown(function(e) {
if(e.keyCode == 37) { // left
$("#myCarousel").carousel("prev");
}
else if(e.keyCode == 39) { // right
$("#myCarousel").carousel("next");
}
});
</script>
Reference: http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp 参考: http : //www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.