Question

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

我有一些动态标签，希望用户能够选择要复制到剪贴板的标题。

例如在Demo page上，我希望能够选择复制/粘贴'Nunc tincidunt'。 'Proin dolor'和'Aenean lacinia'。甚至是标题的一部分（例如'Proin'，'Aenean'，'tincidunt'）。

Answer 1

使用可选择的<span>元素替换定义选项卡的锚点是一种有点hacky方式：

$(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

PS： 然后您可以在带有textL“双击以选择文字”的标签上使用工具提示标题，或仅用于信息。

Answer 3

UI选项卡已使用UI selectable interaction处理选择状态。这就是jQuery如何知道当前显示内容的选项卡。因此，当用户选择一个标签时，它会变为活动状态并显示内容。

您可以执行的操作是向选项卡添加复制图标。单击时，选项卡的标题将复制到剪贴板。这与manipulation示例非常相似。除了显示一个关闭图标。您可以使用ui-icon-copy。

Here is an example

Answer 4

我试图用小提琴回答你的问题：http://jsfiddle.net/vcarluer/Rfw3t/

想法：在点击当前标题时显示html输入以启用用户选择文本。

<li id="li-1"><a id ="a1" href="#fragment-1">Nunc tincidunt</a>
 <div id="divText-1" class="tabText">
 <input id="input-1" size="13" readonly/>
 </div>
 <button id="copyToClipBoard-1" class="ccButton">cc</button>
</li>

$("#a1").click(function(e) { if (selected == 0) { $("#divText-1").show(); $("#input-1").val("Nunc tincidunt"); $("#input-1").focus(); } selected = 0; });
$("#input-1").blur(function(e) { $("#divText-1").hide(); });

如果你用IE打开它，你会发现'cc'按钮将标题复制到剪贴板（仅适用于IE）

var headerText = $("#a2").text();
window.clipboardData.setData('text', headerText);

我不擅长使用javascript而且太懒了所以我让你重构代码和函数调用，因为有很多复制粘贴代码。您也可以删除输入边框并正确对齐，或者不...我让边框让您看到输入和div叠加。 Css也很糟糕，但你有这个主意。

我希望它会对你有所帮助。

Answer 5

对于它的价值，选项卡允许选择，您只需要准确了解开始选择点击的位置。

通过结合一些关于文本选择和鼠标点击的SO文章找到了这个答案。这与jquery ui选项卡一起使用。感谢SO的Jason的文本选择和SO的Acorn鼠标右键单击检测和我自己将它们结合起来:)。这将选择选项卡文本并打开标准上下文菜单进行复制：

function SelectText(element) {
    var doc = document,
        text = doc.getElementById(element),
        range, selection;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

$(function () {
    $('a[href^="#tabs"]').mousedown(function (event) {
        if (event.which == 3) { //right click
            SelectText($(this).attr('id'));
        }
    });
});

Fiddle

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

5 个答案: