Question

我正在尝试创建一个标准的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>");

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

Answer 1

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

＆＃13;

{{ program|combine(program_inventory|combine(program_playbook)) }}

＆＃13;

$(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;
  });
});

＆＃13;

a[data-tooltip] {
  position: relative;
  display: inline-block;
}

.tooltip-overlay {
  position: absolute;
  background-color: yellow;
  border: 1px solid black;
  top: -140%;
  padding: 3px;
}

＆＃13;

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

1 个答案: