通過文本選擇觸發的工具提示

Question

我正在創建一個由文本選擇（左鍵單擊拖動文本）觸發的工具提示。最好通過創建一個JQuery插件。

我的最終目標是當用戶選擇/突出顯示一個句子，短語，段落時，它會觸發一個工具提示。工具提示將包含社交分享按鈕，這些按鈕將允許用戶將選擇發佈到他們的個人檔案狀態。

所以，如果你喜歡特定的報價，你可以選擇它，點擊分享到twitter，它會調用twitter api來發布選擇（如果超過140個字符，它會添加一個省略號）並縮短url選擇的頁面。

顯然這需要一點發展，但作爲一名前端設計師，我只需要讓球滾動。感謝您提供任何幫助。

的我渴望的功能的一個例子是類似於如何apture擴展功能： http://www.apture.com/extension/

Answer 1

這裏有一個小演示：http://jsfiddle.net/sje397/fNt22/

它只是監視定時器上的選定文本並跟蹤鼠標位置，然後每當選定的文本不爲空時，在鼠標位置創建一個帶有「共享」按鈕的懸停格。

var mousePos; 
$(document).mousemove(function (e) { 
    mousePos = {left: e.pageX + 20, top: e.pageY + 20}; 
}); 

var selectedText = ''; 
function getSelectedText(){ 
    if(window.getSelection){ 
     return window.getSelection().toString(); 
    } 
    else if(document.getSelection){ 
     return document.getSelection(); 
    } 
    else if(document.selection){ 
     return document.selection.createRange().text; 
    } 
} 

function checkSelectionChanged() { 
    var current = getSelectedText(); 
    if(current != selectedText) { 
     selectedText = current; 
     if(selectedText != '') { 
      $('#quote #text').text(selectedText); 
      $('#quote').offset(mousePos); 
      $('#quote').show(); 
     } else { 
      $('#quote').hide(); 
     } 
    } 
} 

setInterval(checkSelectionChanged, 1000); 

Answer 2

我已經寫這個插件:)

http://www.latentmotion.com/search-and-share

歡迎你在它適應所有你喜歡的，只要你給信貸。

---

我也寫一個有點滑頭一個，但從來沒有完全覈實它（它還挺處於alpha）：

http://seox.org/pro-beta.html