如何将 jquery-mobile 添加到 rails 4 应用

Question

我的目标是在移动浏览器中用手指轻扫在上一张和下一张照片之间移动：

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 视图的顶部。

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

在中建议必须删除 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
 */

Answer 1

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

如何将 jquery-mobile 添加到 rails 4 应用

How do I add jquery-mobile to a rails 4 app

jquery

ruby-on-rails

jquery-mobile