點擊單詞並獲得定義...？

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插件，會給你一個提示一下，您可以放置​​在鼠標是被點擊時。

編輯

我發現這個鏈接，可以幫助你做導軌一個Ajax回發。我不是鐵軌開發者，所以不確定這是否會有所幫助。

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

Answer 2

您的文章啓發了我開源，我們使用基於tipTip插件的插件。

它易於通過鼠標從一個click事件彈開工具提示：

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