Question

我正在寻找有关如何使用jquery插件来使用rails应用程序的建议。具体来说，我正在尝试运行以下插件，但我也很欣赏有关如何完成工作的一般建议。看起来你可能需要在application.js中将它放在vendor / assets / javascript目录中？我错过了什么吗？

我无法在我的rails应用https://www.jqueryscript.net/time-clock/Minimal-jQuery-Count-Up-Plugin-CoutUpCircle.html

中使用此jquery插件

我以前从未安装过插件，但是我下载了jquery.countupcircle.min.js文件并将其放在'vendor / assets / javascripts'中

在'app / assets / javascripts'中我更新了下面的application.js（我应该在vendor / assets / javascripts中有另外一个这样的文件吗？）

//= require jquery
//= require jquery3
//= require jquery_ujs
//= require jquery.countupcircle.min
//= require popper
//= require turbolinks
//= require tether
//= require bootstrap
//= require_tree .

在我的页面上我有

<div class="container-fluid">
  <div class="row">

    <div class="wrapper">
      <div id="count-box">19</div> 
    </div>

    <script type="text/javascript">
    $(document).ready(function(){
    $('#count-box').CountUpCircle({
    duration: 500, // In ms, default: 5000
    opacity_anim: false,
    step_divider: 1
    });
    });
    </script>

  </div>
</div>

页面上的数字计数，我看到“19”，但没有圆圈，也没有应用样式。

在我的styles.css文件中

  #count-box {
    display: block;
    border: 2px #ccc solid;
    color: #ccc;
    font-size: 4em;
    border-radius: 50%;
    line-height: 200px;
    height: 200px;
    width: 200px;
    text-align: center;
  }

Answer 1

尝试运行rake资产：预编译并重新启动服务器。如果仍然没有工作bootstrap覆盖你的插件类。试试//= require jquery.countupcircle.min 在你需要bootstrap之后

在rails应用程序中包含一个jquery插件：未应用样式

1 个答案: