2

best_in_placeは正常に機能していますが、文字列ではなく、オプションの[OK]ボタンに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"
4

3 に答える 3

4

これは古い質問であり、必要な機能が：ok_button_classオプションを使用してbest_in_placegemでサポートされるようになりました。使用法は次のようになります。

<%= best_in_place @post, :title, :ok_button => "Submit", :ok_button_class => "btn post-title" %>
于 2013-07-31T23:43:25.360 に答える
1

解決策はありますが、正確にはok_buttonにスタイルを追加するわけではありません。Unicodeグリフを使用してもかまわない場合は、次を試すことができます。

= best_in_place @book, :default_price_amount, :html_attrs => {:class => 'medium_no_dropdown'}, :ok_button => "&#x2713;".html_safe

すべてのUnicode文字を含むテーブルは、別のバリアントの参照になる可能性があります。

ok_buttonの実際のスタイル設定の問題は、ハッシュがボタンの定義のためにのみデータ属性を受け入れることです。おそらく、BIPの次のバージョンの1つで、これは改善されるでしょう。

ボタンが作成されるソースコード（best_in_place.js）： 

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

'value'は、ハッシュに渡すものです。&#xf00c;素晴らしいフォント（ icon-okの場合）で 定義されたグリフコードを参照する方法があれば、それは美しいでしょう。

于 2012-12-22T22:58:59.060 に答える
1

同じことをするのに数時間を費やしたので、この関数<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);
    }
  }
}
于 2019-02-14T07:23:35.297 に答える