【问题标题】:Rails collapse nested formRails 折叠嵌套表单
【发布时间】:2013-03-30 17:00:35
【问题描述】:

是否有人对如何在 Rails 中创建可以使用引导程序“折叠”或 Jqueries“手风琴”功能的表单有任何想法/资源?

基本上,我有一个包含许多嵌套属性的巨大表单,我想折叠它们,以便用户只需打开他或她想要编辑的部分。我必须相信肯定有这样的东西,但我所看到的只是人们试图将 bootstrap 或 jquery 与 formtastic 或 form_for 集成的未回答的问题。

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

更新:

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

【问题讨论】:

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


    【解决方案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);
            });
        });
    });
    

    请随时根据您的需要进行定制,或者如果您需要帮助,请告诉我:)

    【讨论】:

    • 先生,我注意到当我按下浏览器上的后退按钮时,折叠技巧无法工作 - 可能是由于某些缓存。你知道我该如何解决这个问题吗?
    • 为了实现这一点,您需要在发生更改时(使用本地存储或其他方式)保持表单的状态,并在再次加载表单时调用该状态。
    • 谢谢 - 我搜索并找到了其他人可能会觉得有用的这个:stackoverflow.com/questions/3432614/…
    【解决方案2】:

    我使用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>
    

    【讨论】:

    • 你好@toch,我无法让它在我的表单上工作:( - 你有任何你设法开始工作的例子吗?
    • @BKSpureon 它是在 2013 年,但我想当前的解决方案应该或多或少是相同的。您使用的版本是什么?
    • 我正在使用 rails 4 - 太久了,我忘记了我发布了原始评论。也许不用担心,除非其他人发表评论?
    猜你喜欢
    • 2012-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多