对于使用 JQuery-UI 选项卡的页面，如何允许用户选择选项卡标题中的文本？
我有一些动态标签，希望用户能够选择标题以复制到剪贴板。
例如在Demo page 上，我希望能够选择复制/粘贴“Nunc tincidunt”。 “Proin dolor”和“Aenean lacinia”。甚至是标题的一部分（例如“Proin”、“Aenean”、“tincidunt”）。
【问题讨论】：
标签： jquery jquery-ui jquery-ui-tabs
这是用可选的<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'));
});
});
【讨论】：
我可以建议双击选择。您可以使用此代码来确定函数，然后双击调用它：
选择功能：
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“双击选择文本”或类似内容的选项卡上使用工具提示标题，仅供参考。 p>
【讨论】：
UI 选项卡已经使用 UI selectable interaction 处理选择状态。这就是 jQuery 如何知道当前显示哪个选项卡的内容。因此，当用户选择一个选项卡时，它会被激活并显示内容。
您可以做的是在选项卡上添加一个复制图标。单击时，选项卡的标题将复制到剪贴板。这很像manipulation 示例。除了显示关闭图标之外。你可以使用ui-icon-copy。
【讨论】：
我试着用小提琴回答你的问题：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 也很糟糕，但你有这个想法。
希望对你有帮助。
【讨论】：
对于它的价值，标签确实允许选择，您只需要准确地确定您开始选择点击的位置。
通过结合一些关于文本选择和鼠标点击的 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'));
}
});
});
【讨论】：