Rails折叠嵌套表单

时间:2013-03-30 17:00:35

标签: jquery ruby-on-rails twitter-bootstrap formtastic form-for

有没有人知道如何在Rails中创建一个可以使用bootstraps“Collapse”或Jqueries“Accordion”功能的表单?

基本上,我有一个包含许多嵌套属性的庞大表单,我想将它们折叠起来,以便用户只需要打开他或她想要编辑的部分。我不得不相信那里有一些像这样的东西,但是我所看到的都是那些试图将bootstrap或jquery与formtastic或form_for集成在一起的人未提出的问题。

基本上,我正在寻找可以与rails集成的东西,看起来与此类似:http://www.alpacajs.org/examples/forms/customer-profile/edit-form.html

更新:

抱歉,我刚刚意识到我原来的帖子可能有点模糊。我尝试使用Formtastic(或rails form_for)DSL,并将其与折叠功能集成。我真的没有在网上看到人们成功将这些放在一起的任何地方。

2 个答案:

答案 0 :(得分:1)

如果您想保持简单并且可以更好地控制应用中的内容,您可以通过几行javascript轻松实现所需的效果。

我在这里举了一个例子:http://jsfiddle.net/iKindred/pYgLY/2/

这是JS:

jQuery(document).ready(function($){
    $('.collapsable-section').each(function(i){
        var $label = $(this).find('.label').filter(':first');
        var $fields = $(this).find('.fields').filter(':first');
        $label.click(function(e){
            $fields.slideToggle(200);
        });
    });
});

根据您的需要随意定制,或者如果您需要帮助,请告诉我们。)

答案 1 :(得分:0)

我使用bootstrap sass gem。在Gemfile中

group :assets do
  # ...
  gem 'bootstrap-sass'
  # ...
end

您必须将application.js.coffee添加到以下行

#= require bootstrap-collapse

在包含您的表单的视图中(例如_form.html.erb),您只需要封装要折叠的表单标记,如下所示:

<div class="collapse">
  <%= label_tag(:q, "Search for:") %>
  <%= text_field_tag(:q) %>
</div>