选择JQuery-UI选项卡标题中的文本到剪贴板

Question

对于使用JQuery-UI选项卡的页面,如何允许用户在选项卡标题中选择文本？

我有一些动态标签,并希望用户能够选择标题复制到剪贴板.

例如在Demo页面上,我希望能够选择复制/粘贴'Nunc tincidunt'.'Proin dolor'和'Aenean lacinia'.甚至是标题的一部分(例如'Proin','Aenean','tincidunt').

Answer 1

这是一种有点hacky方法来替换使用可选<span>元素定义选项卡的锚点:

$(function() {
    $( "#tabs" ).tabs();

    $('.ui-tabs-anchor').each(function () {
        var anchorText = $(this).text(),
        tabIndex = $(this).attr('id').split('-')[2] - 1;

        $(this).hide();
        $('<span class="selectable-tab-header">' + anchorText + '</span>').insertAfter(this).data('tabIndex', tabIndex);
    });

    $('.selectable-tab-header').click(function () {
        $('#tabs').tabs('option', 'active', $(this).data('tabIndex'));
    });
});

Answer 2

我建议双击选择.您可以使用此代码确定函数,然后双击调用它:

选择功能:

function select_all(el) {
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
    }
}

然后只需在选项卡上双击它:

$('#tabs').children('ul').children('li').children('a').dblclick(function() {
    select_all(this);
});

在这里我为你创建了Demo:Demo

PS: 那么你可以在带有textL"双击以选择文本"的标签上使用工具提示标题或类似的东西,仅供参考.