Question

我有一个格式为grid.i.e的单元格表。 5排10个细胞。每个单元代表一个插槽，其中包含有关插槽中项目的一些信息。单元格被格式化为一个按钮，当我点击它时，它会将我引导到一个页面，用户可以在其中编辑项目名称，类型和其他信息，就像普通的rails编辑功能一样。

我的问题是，除了将用户引导到编辑页面之外，我希望他们看到有关该插槽的一些属性。因此，如果他们看到他们需要的信息，他们可以点击插槽并在新页面上进行编辑。

现在，我已经尝试使用CSS和javascript来隐藏并显示存储信息的div标签，但是当我将鼠标放在div上时，只是弄乱了单元格的排列。

我已经阅读了有关使用AJAX渲染页面的内容，但是当鼠标悬停在按钮上时，我无法理解如何使用弹出窗口。

这是我在index.html.erb中的单元格表

<div class="scrollWindow">
  <% @slots.each_with_index do |item,index| %>
    <div class="vmRow">
      <div class="btn-group">

      <% for i in item do %>     
        <% if !VendingMachine1.where(:slotID => i).first.nil? %>
        <% vm = VendingMachine1.where(:slotID => i).first %>
          <%= link_to  vending_machine1_path(vm.id),:class=>"vmButton", :method => :get do %>
            <div class="myPara"><%= i %> </div>
            <div class="myPara">Q:<%= find_vm_quantity(vm) %> </div>
            <div class="myPara">P:<%= vm.priority %></div>
            <div class="myPara" ><%= vm.identifier %></div>
            <% end %>
        <% else %>
            <div class="vmButton">
            <div class="myPara"><%= i %> </div>
            <div class="myPara">Q:-</div>
            <div class="myPara">P:-</div>
            <div class="myPara">-</div>
            </div>
        <% end %>
      <% end %>

     </div>
    </div>
  <% end %>
</div>

我的控制器

  def index
    @vending_machine1s = VendingMachine1.all.order(:slotID).paginate(:page => params[:page], :per_page => 10)
    @total_quantity = VendingMachine1.sum(:quantity)
    @slots =[["A1", "A2", "A3", "A4", "A5" ,"A6", "A7", "A8", "A9", "A0"],
             ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "B0"],
             ["C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "C0"],
             ["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D0"],
             ["E1", "E2", "E3", "E4", "E5", "E6", "E7", "E8", "E9", "E0"]]

  end

我已经阅读过bootstrap中的popover，但我只能设置数据内容，就像简单的文本一样，但是，我需要显示更多的模型信息，所以我想我必须通过控制器？

理想的解决方案是当我将鼠标悬停在每个细胞上时，一个小的弹出窗口将显示细胞的信息，当我移开鼠标时，它会消失，同样对于所有细胞。

请帮忙。这太具有挑战性了。

Answer 1

你需要使用position: absolute来避免混淆html。

在JsFiddle上我提供了一些例子。 https://jsfiddle.net/bgzzzpe3/

将鼠标悬停在轨道中的按钮上时弹出内容

1 个答案: