ruby-on-rails - best_in_place gem：样式确定按钮

Question

best_in_place运行良好，但我想为可选的“确定”按钮使用fontawesome图标，而不是字符串。如何将'<i class="icon-ok"></i>'.html_safe语法合并到:ok_button哈希中？

 = best_in_place @book, :default_price_amount, :html_attrs => {:class => 'medium_no_dropdown'}, :ok_button => "OK"

Answer 1

这是一个老问题，现在使用 :ok_button_class 选项在 best_in_place gem 中支持所需的功能。用法是这样的：

<%= best_in_place @post, :title, :ok_button => "Submit", :ok_button_class => "btn post-title" %>

Answer 2

有一个解决方案，但不完全是向 ok_button 添加样式。如果您不介意使用 unicode glyphs ，可以尝试：

= best_in_place @book, :default_price_amount, :html_attrs => {:class => 'medium_no_dropdown'}, :ok_button => "✓".html_safe

包含所有 unicode字符的表可以作为您对另一个变体的参考。

ok_button 真正样式的问题在于，哈希仅接受数据属性来定义 button 。可能在 BIP 的下一个版本中，这将得到改进。

在创建按钮的源代码中（best_in_place.js）：

    if(this.okButton) {
    output.append(
      jQuery(document.createElement('input'))
      .attr('type', 'submit')
      .attr('value', this.okButton)
    )
  }

'value' 是我们传递给 hash 的值。如果有办法引用由 awesome font ( for icon-ok) 定义的 glyph-codes ，那就太好了。

Answer 3

由于我花了几个小时来做​​同样的事情，我发现我们可以覆盖这个函数的原型来创建<button>而不是<input type="button">. 但是，该activateForm函数只等待点击事件input[type="button"]，因为我无法覆盖它，所以我尝试了另一种（有点脏）的方法——它可以工作。

在另一个 js 标记/文件处覆盖此脚本

  BestInPlaceEditor.prototype.placeButtons = function (output, field){
    'use strict'
    // the ok button isn't changed
    if (field.okButton) {
      output.append(
        jQuery('<button>').html(field.okButton).attr({
          type: 'submit',
          class: field.okButtonClass
        })
      )
    }

    if (field.cancelButton) {
      // create new cancel "<button>"
      var $resetBtn = jQuery('<button>').html(field.cancelButton).attr({
        type: 'reset',
        class: field.cancelButtonClass
      }),
      // and traditional cancel '<input type="button">', but this should be hidden
      $_resetBtn = jQuery('<input>').val(field.cancelButton).css({ display: 'none' })
      .attr({
        type: 'button',
        class: '__real-btn-close-best_in_place'
      });
      // and bind event to 'trigger' click traditional button when the new <button> is clicked 
      $resetBtn.bind('click', function (event) {
        $(event.currentTarget).parents('form.form_in_place').find('input.__real-btn-close-best_in_place').trigger('click');
        event.stopPropagation(); // << also neccessary
      });
      // append both
      output.append($_resetBtn).append($resetBtn);
    }
  }
}