从 Rails link_to调用在函数中创建 JavaScript 弹出窗口

Create javascript popup in function from Rails link_to call

本文关键字：创建 JavaScript 窗口 函数 link Rails to 调用      更新时间：2023-09-26

我正在尝试创建一个标准的javascript弹出小部件，以在我的Rails应用程序中提供提示。 我希望能够创建一个弹出小部件，每当单击不同的提示按钮时，其中包含的信息都会发生变化。 我似乎找到的所有示例都使用 javascript onclick，但这不允许我根据单击的按钮传入不同的文本值。 此外，我一直看到弹出窗口是使用 html 创建的，而不是在 javascript 中完成的。

这是调用javascript函数的工作

<%= f.label :name %><%= link_to image_tag("hint_link.jpeg", :size=>"13x13"), '#', :onclick => 'create_hint_widget("a"); return false;' %>

但是我需要知道如何从调用的函数创建弹出小部件，因为 

function hint_widget(hint_text) { create_popup_widget }

也许是这样的？

$( "#draggable" ).draggable().html("<div id='draggable' class='ui-widget-content'><p>hint_text</p></div>");

这是我能想到的最好的解决方案，但可能有更好的解决方案。 我愿意接受任何意见/建议

这是您如何开始构建工具提示系统的基础知识 - 但是已经有数千个可用，因此除非您这样做是为了学习，否则编写一个没有多大意义。

$(function(){
  # delegate a handler to elements that have a `data-tooltip` attribute.
  $(document).on('click', 'a[data-tooltip]', function(){
    var $el = $(this)
    var $tooltip = $('<div class="tooltip-overlay">').text($el.data('tooltip'));
    $el.append($tooltip);
    # fade out and remove tooltip after 3s
    $tooltip.delay(3000).fadeOut(100).remove();
    return false;
  });
  
  # handle when user clicks a tooltip
  $(document).on('click', '.tooltip-overlay', function(){
    $(this).remove();
    return false;
  });
});
a[data-tooltip] {
  position: relative;
  display: inline-block;
}
.tooltip-overlay {
  position: absolute;
  background-color: yellow;
  border: 1px solid black;
  top: -140%;
  padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<p><a href="#">Link without tooltip</a></p>
<p><a href="#" data-tooltip="Sample text" class="tooltip">Link with tooltip</a></p>

  • http://foundation.zurb.com/sites/docs/v/5.5.3/components/tooltips.html
  • http://getbootstrap.com/javascript/#tooltips
  • https://jqueryui.com/tooltip/
相关文章：