Best_in_place标签槽

Question

我使用的是best_in_place gem，所以我可以在索引视图中编辑多个学生。

然而，问题是可用性很差。我必须单击，键入信息，输入/单击，然后再次单击以编辑其他信息。

这是一种我可以按Tab键在字段中移动的方法吗？

以下是索引的代码：

<% @students.each do |student| %>
   <tr>
   <td><%= link_to .name, edit_student_path(student) %></td>
   <td><%= best_in_place student, :oral %></td>
   <td><%= best_in_place student, :writing %></td>
   <td><%= best_in_place student, :participation %></td>
   <td><%= best_in_place student, :grammar %></td>
   <td><%= best_in_place student, :presence, type: :select, collection: [["Present", "Present"], ["Absent", "Absent"], ["", "-"]] %></td>
   </tr>
<% end %>

我发现了这个：https://github.com/bernat/best_in_place/tree/master/lib/best_in_place

好的。这是我现在得到的，但仍然不起作用:/有什么想法吗？

索引：

 <td><%= best_in_place allan, :oral, :html_attrs => {:tabindex => 10} %></td>
 <td><%= best_in_place allan, :writing, :html_attrs => {:tabindex => 11} %></td>

Users.js.coffee

jQuery ->
$('.best_in_place').best_in_place()

$ ->
  $('span.best_in_place').focus ->
   el = $(this)
   el.click()
   el.find(el.data('type')).attr('tabindex', el.attr('tabindex'))

Answer 1

我认为你可以像这样使用tabindex的HTML属性和focus事件来解决问题：

   <td><%= best_in_place student, :oral, :html_attrs => {:tabindex => 10} %></td>
   <td><%= best_in_place student, :writing, :html_attrs => {:tabindex => 11} %></td>
   <td><%= best_in_place student, :participation, :html_attrs => {:tabindex => 12} %></td>
   <td><%= best_in_place student, :grammar, :html_attrs => {:tabindex => 13} %></td>
   <td><%= best_in_place student, :presence, type: :select, collection: [["Present", "Present"], ["Absent", "Absent"], ["", "-"]], :html_attrs => {:tabindex => 14} %></td>

这个JS

$(function() {
  $('span.best_in_place[data-html-attrs]').each(function() {
    var attrs, el;
    el = $(this);
    attrs = el.data('html-attrs');
    if (attrs && attrs['tabindex']) {
      el.attr('tabindex', attrs['tabindex']);
    }
  }).focus(function() {
    var el;
    el = $(this);
    el.click();
  });
});

JS代码的最后一行是搜索BIP表单的元素类型，并分配tabindex，以便保持跳转的顺序。

更新：上述JS的CoffeeScript版本

$ ->
  $('span.best_in_place[data-html-attrs]').each ->
    el = $(this)
    attrs = el.data('html-attrs')
    el.attr('tabindex', attrs['tabindex']) if attrs and attrs['tabindex']
  .focus ->
    el = $(this)
    el.click()

Answer 2

BIP改变了他们的命名结构。它们还包括一些tabindex支持。

通过gem github：

HTML选项：

如果您提供的选项不是显式的best_in_place选项，则在创建best_in_place跨度时将传递该选项。

因此，例如，如果您想要将一个HTML tab索引添加到best_in_place span中，只需将其添加到您的方法调用中：

<%= best_in_place @user, :name, tabindex: "1" %>

然而，我没有让它开箱即用(或者根本没有)。我最终修改了上面Ahmad的JS解决方案，以符合新的命名结构。它工作得很好，尽管在:select字段之间切换仍然是一个问题。

$(function() {
  $('span.best_in_place[data-bip-html-attrs]').each(function() {
    var attrs, el;
    el = $(this);
    attrs = el.data('bip-html-attrs');
    if (attrs && attrs['tabindex']) {
      el.attr('tabindex', attrs['tabindex']);
    }
  }).focus(function() {
    var el;
    el = $(this);
    el.click();
  });
});

JS不是我的强项。如果任何人对:select下拉菜单有任何建议，请回复！Thx