Best_in_place标签槽

我使用的是best_in_place gem，因此我可以在我的索引视图中编辑多个学生。Best_in_place标签槽

虽然问题是，可用性很差。我必须点击，输入信息，输入/点击并再次点击以编辑其他信息。

这是一种我可以按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'))

来源

2012-12-12 Allan

我认为你可以使用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>

and this 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键的顺序。

UPDATE：上面的JS

$ -> 
    $('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-12 23:27:34

是否有特殊的地方放置js代码？我把它放在users.js中。但现在我得到一个错误。 – Allan

'语法错误：第7行的保留字“功能” （在C：/ Users/SpeedUp/My Documents/Aptana Studio 3 Workspace/participatio/app/assets/javascripts/users.js.coffee）。** ** Line 7是你的JS conde。：/ ** – Allan

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

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

通过宝石github上：

HTML Options:

If you provide an option that is not explicitly a best_in_place option it will be passed through when creating the best_in_place span.

So, for instance, if you want to add an HTML tab index to the best_in_place span just add it to your method call:

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

来源

2015-02-09 20:50:35

我需要使用Ahmed的html代码。这工作。 –

Best_in_place标签槽

回答

相关问题