3

私は best_in_place gem を使用しているので、index ビューで複数の学生を編集できます。

ただ、使い勝手が悪いのが難点。別の情報を編集するには、クリックして情報を入力し、入力/クリックして、もう一度クリックする必要があります。

タブを押してフィールドを移動する方法はありますか?

インデックスのコードは次のとおりです。

<% @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

Ok。これは私が今得たものですが、まだ機能していません:/何かアイデアはありますか?

索引：

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

ユーザー.js.コーヒー

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'))
4

2 に答える 2

5

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タブの順序が維持されるように を割り当てます。

UPDATE : 上記の 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()
于 2012-12-12T23:27:34.417 に答える
1

BIP は命名構造を変更しました。それらには、いくつかのタブインデックスのサポートも含まれていました。

gem github 経由:

HTML オプション:

明示的に best_in_place オプションではないオプションを指定すると、best_in_place スパンの作成時に渡されます。

したがって、たとえば、HTML タブ インデックスを best_in_place スパンに追加する場合は、メソッド呼び出しに追加するだけです。

<%= 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返信してください! どうも

于 2015-02-09T20:50:35.960 に答える