Question

我希望自定义jQuery Countdown插件的CSS和Javascript。我正在使用此Gem作为资产管道。现在我已经加入了我的application.js

//= require jquery
//= require jquery.countdown
//= require bootstrap
//= require jquery_ujs
//= require tinymce-jquery
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require_tree .

application.css

 *= require_tree .
 *= require 'masonry/transitions'
 *= require jquery.countdown
 *= require_self
 */

我的问题是在我的rails应用程序中包含js和css文件，以及在我自定义其中一些文件后如何在我的视图中调用它们？

Answer 1

这是解决问题的一种方法。

创建一个新的coffeescript文件app/assets/javascripts/timers.js.coffee，其中包含：

Timers =
  init: ->
    @initCountdownUntil()
    @initCountdownSince()

  initCountdownUntil: ->
    $('div[data-countdown-until]').each (index, element) ->
      $element = $(element)
      date = new Date($element.data('countdown-until'))
      $element.countdown(until: date)

  initCountdownSince: ->
    $('div[data-countdown-since]').each (index, element) ->
      $element = $(element)
      date = new Date($element.data('countdown-since'))
      $element.countdown(since: date)

window.Timers = Timers

无论您在哪里初始化其他javascript添加：

Timers.init()

要向任何视图添加计时器，只需添加包含data-countdown-until或data-countdown-since属性的div：

<div data-countdown-until="<%= 10.days.from_now %>"></div>

当调用Timers.init()时，它会查找任何具有data-countdown-until或data-countdown的div，因为属性会解析时间（时间可以是标准的ActiveRecord输出格式，所以{{1}将工作正常），并将倒数计时器附加到div。

Answer 2

所以你想通过创建一个包含覆盖的新文件并确保在jquery.countdown.css文件之后加载它来自定义一些CSS（例如：jquery.countdown-customization.css），所以你的应用程序.css看起来与此相似：

*= require_tree .
*= require 'masonry/transitions'
*= require jquery.countdown
*= require jquery.countdown-customization
*= require_self
*/

在JS中，您将使用您选择的所有类（例如：＆＃39;倒计时＆＃39;）初始化您的所有元素，并提供您想要的所有选项。现在问题是：如何从视图中获取选项值？，一个选项是通过html数据属性传递它：

<div class="countdown" data-until="<%= my_object.due_date %>" data-format="dHM"></div>

现在回到JavaScript，初始化元素的代码：

$(document).ready(function(){
  $('.countdown').each(function(){
    $(this).countdown({until: new Date($(this).data('until')), format: $(this).data('format')});
  });
});

那应该是它！

自定义jQuery倒计时Ruby on Rails

2 个答案: