如何将 jquery-mobile 添加到 rails 4 应用程序答案

【问题标题】：How do I add jquery-mobile to a rails 4 app如何将 jquery-mobile 添加到 rails 4 应用程序
【发布时间】：2016-11-20 16:28:28
【问题描述】：

我的目标是在移动浏览器中通过手指滑动在上一张和下一张照片之间切换：

https://api.jquerymobile.com/swipeleft/

https://api.jquerymobile.com/swiperight/

因为我只打算在网站的几个区域使用它，所以我决定放置：

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

在我的show.html.erb 视图的顶部。

但是，它完全破坏/崩溃了我的网络应用程序的外观和功能。例如，显示了我隐藏的按钮。元素过大和过小等。

在this topic 中建议必须删除 Turbolinks。我不确定这是否是这些问题的根源。

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag    'application', media: 'all', 
                                              'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container-fluid">
    </div>
   </body>
</html>

application.js

//= require jquery2
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require autocomplete-rails
//= require dropzone
//= require select2-full 
//= require bootstrap
//= require turbolinks
//= require_tree .
//= require selectize

application.css

*= require jquery-ui/autocomplete
 *= require dropzone/dropzone
 *= require select2
 *= require select2-bootstrap
 *= require selectize
 *= require selectize.default
 *= require_tree .
 *= require_self
 */

【问题讨论】：

尝试只删除 CSS 文件。如果你只打算使用 jQuery swipe 函数，你不需要它
这解决了css问题。但是，我仍然对我猜是 turbolinks 问题有疑问。例如，如果我从 example.com/photos/1 转到 example.com/photos/2，它会继续在 example.com/photos/2 页面上显示照片 1
根据您引用的那篇文章。两者并不意味着一起工作。使用其中一种。
@TheValyreanGroup 您想提交答案以供批准吗？

标签： jquery ruby-on-rails jquery-mobile

【解决方案1】：

根据您引用的帖子，Turbolinks 和 jQuery 不适合一起使用。最重要的是，如果您只是使用 jQuery Mobile swipe 函数，则不需要任何样式，因此请删除 jQueryMobile 的 CSS 文件并尝试一下。

【讨论】：