10

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

我有一些动态选项卡，并希望用户能够选择标题以复制到剪贴板。

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

4

5 回答 5

5

我可以建议双击选择。您可以使用此代码来确定函数，然后双击调用它：

选择功能：

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“双击以选择文本”或类似内容的选项卡上使用工具提示标题，仅供参考。

于 2013-05-15T11:22:57.703 回答
5

<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'));
    });
});
于 2013-05-09T19:18:58.113 回答
0

对于它的价值，选项卡确实允许选择，您只需准确确定您开始选择单击的位置。

通过结合一些关于文本选择和鼠标点击的 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'));
        }
    });
});

小提琴

于 2013-05-15T20:09:45.450 回答
0

UI 选项卡已经通过使用 UI可选交互来处理选择状态。这就是 jQuery 如何知道当前显示哪个选项卡的内容。因此，当用户选择一个选项卡时，它会被激活并显示内容。

您可以做的是在选项卡上添加一个复制图标。单击时，选项卡的标题将复制到剪贴板。这很像操纵示例。除了显示关闭图标之外。你可以使用ui-icon-copy.

这是一个例子。

于 2013-05-06T20:23:03.863 回答
0

我试图用小提琴回答你的问题：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也很糟糕，但你有这个想法。

我希望它会帮助你。

于 2013-05-15T15:52:50.097 回答