Best_in_place 标签槽

Posted 2023-02-15

【中文标题】Best_in_place 标签槽

【英文标题】：Best_in_place tab trough

【发布时间】：2012-11-30 17:05:54

【问题描述】：

我正在使用 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'))

【参考方案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 以便保持 Tab 键的顺序。

更新：上述 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()

【讨论】：

有没有专门放js代码的地方？我把它放在 users.js 中。但现在我遇到了一个错误。

SyntaxError: reserved word "function" on line 7 (in C:/Users/SpeedUp/My Documents/Aptana Studio 3 Workspace/participatio/app/assets/javascripts/users.js.coffee).** 第 7 行是你的 JS conde。 :/**

JS 代码不适用于 CoffeeScript，我用 CoffeeScript 版本更新了答案。

我现在没有收到错误。但是仍然没有工作。 :/ 我更新了我的代码。

对不起，我记错了，请重新检查答案。而且您不必从 10 BTW 开始坚持tabindex。

【参考方案2】：

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

通过 gem github：

HTML 选项：

如果您提供的选项不是明确的 best_in_place 选项 创建 best_in_place 跨度时会通过。

因此，例如，如果您想将 HTML 选项卡索引添加到 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 下拉列表进行选项卡有任何建议，请回复！谢谢

【讨论】：

我需要将您的代码与 Ahmed 的 html 一起使用。那行得通。