best_in_place运行良好,但我想将fontawesome图标用于可选的" OK"按钮,而不是字符串。如何将'<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"
这是一个旧问题,现在使用:ok_button_class选项在BEST_IN_PLACE GEM中支持所需的功能。用法是这样的:
<%= best_in_place @post, :title, :ok_button => "Submit", :ok_button_class => "btn post-title" %>
有一个解决方案,但并非完全是为了向OK_BUTTON添加样式。如果您不介意使用Unicode字形,则可以尝试:
= best_in_place @book, :default_price_amount, :html_attrs => {:class => 'medium_no_dropdown'}, :ok_button => "✓".html_safe
带有所有Unicode字符的表可以是您的另一个变体的参考。
OK_BUTTON的真实样式的问题是,哈希仅接受数据属性仅用于定义按钮。大概在下一个BIP版本之一中,这将得到改善。
在源代码中创建按钮(best_in_place.js):
if(this.okButton) {
output.append(
jQuery(document.createElement('input'))
.attr('type', 'submit')
.attr('value', this.okButton)
)
}
'value'是我们在哈希上传达的内容。如果有一种方法可以引用由Awesome Font(Icon-OK的
)定义的字形编码,那将是美丽的。
由于我花了几个小时去做同样的事情,所以我发现我们可以覆盖此功能的原型以创建<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);
}
}
}