点击单词并获得定义......？

Question

我希望用户点击一个单词，并在显示定义的单词上方显示提示。定义将来自我们已有的词汇表。我们在网站上使用Ruby和Jquery。

任何建议或指向某个方向？

Answer 1

如果您正在使用jQuery，请将单击或悬停事件附加到单词容器。因此，如果您有<div class="WordDef">Word</div>，那么您可以添加;

$('.WordDef').click(function(){ 
  var word = $(this).text(); 
  //do postback to get definition then show definition 
})

显示定义可能会使另一个div可见，其中包含单词的定义。

$('.DivDefinition').text("Definition of word from jQuery ajax postback");
$('.DivDefinition').show();

考虑使用一个jQuery插件，它会为您提供工具提示外观，您可以将鼠标放在鼠标所在的位置。

修改

我发现此链接可能有助于您在rails中执行Ajax回发。我不是铁轨开发人员，所以不确定这是否会有所帮助。

http://jimneath.org/2008/06/18/using-jquery-with-ruby-on-rails/

Answer 2

你的帖子激励我开源我们基于tipTip插件使用的插件。

通过鼠标点击事件很容易弹出工具提示：

$("#example").click(function(e){ $.tipTipLite('some content loaded using jQuery, not from markup', {mouse_event: e}); return false; });

您可以在github上查看：http://github.com/ubermajestix/tipTipLite/

Answer 3

就个人而言，我会将单词包含在span标记中，并将该定义包含在title属性的一部分中。这样，没有javascript的用户仍会获得默认工具提示。从可访问性的角度来看，使整个事情变得更好。例如：

<span title="Once in a while">Sporadic</span>

然后你可以使用你选择的工具提示插件 - 比如qtip（默认使用title属性），并执行以下操作：

$('a[title]').qtip({ style: { name: 'cream', tip: true } })