Question

我希望创建一个由文本选择触发的工具提示（左键单击拖动文本）。最好是通过创建一个JQuery插件。

我的最终目标是当用户选择/突出显示句子，短语，段落时，它将触发工具提示。工具提示将包含社交分享按钮，允许用户将选择发布到其个人资料状态。

所以，如果您喜欢特定的报价，可以选择它，点击分享到Twitter，它会调用twitter api发布选择（如果超过140个字符，它将添加省略号），并将缩短的URL返回给选择的页面。

显然这需要一些开发，但作为一名前端设计师，我只需要开球。感谢您提供的任何帮助。

我想要的功能的一个例子类似于apture扩展功能： http://www.apture.com/extension/

Answer 1

这是一个小小的演示：http://jsfiddle.net/sje397/fNt22/

它只监视计时器上的选定文本并跟踪鼠标位置，然后在所选文本不为空时创建一个鼠标位置带有“共享”按钮的悬停div。

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

由文本选择触发的工具提示

2 个答案: