Rails窗体中的Javascript滑块

时间:2014-01-30 18:28:50

标签: javascript html ruby-on-rails twitter-bootstrap

我有一个使用form_for的表单,我想使用bootstrap-slider.js实现一个javascript滑块来获取值并更新事件的价格。

Javascript绝对不是我的强项,我希望看到我将如何将其包含在表单中。

其中一个规定的例子是:

###################
       HTML 
###################

<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>


###################
    JavaScript  
###################

$("#ex8").slider({
    tooltip: 'always'
});

我目前的表格如下:

<%= form_for(@event) do |f| %>
     <%= render 'shared/event_error_messages' %>


    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :content %>
    <%= f.text_field :content %>

    <%= f.label :location %>
    <%= f.text_field :location %>

    <%= f.label :date%>mm/dd/yyyy
    <%= f.text_field :date %>

    <%= f.submit "Create event", class: "btn btn-large btn-primary" %>
      <% end %>

我主要不了解如何在表单中实现javascript / html,然后将其传递给数据库中的事件价格。

1 个答案:

答案 0 :(得分:6)

<%= f.text_field :price, id: 'ex8', type: 'text',
                 data: {'slider-id' => 'ex1Slider',
                        'slider-min' => '0',
                        'slider-max' => '20',
                        'slider-step' => '1',
                        'slider-value' => '14' } %>

将其添加到您的表单中。 同时将示例中的javascript添加到events.js文件夹中的assets/javascripts

我认为所有剩下的插件都适合你。