Rails窗体中的Javascript滑块

ada*_*not 5 html javascript 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'
});
Run Code Online (Sandbox Code Playgroud)

我目前的表格如下:

<%= 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 %>
Run Code Online (Sandbox Code Playgroud)

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

Pet*_*kov 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' } %>
Run Code Online (Sandbox Code Playgroud)

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

我想,所有剩下的插件都会为你做.

  • 谢谢@peter!这让我走上正轨. (2认同)