Выбор текста в заголовке вкладки JQuery-UI в буфер обмена

Ответ 1

Вот несколько хакерский способ заменить анкеры, которые определяют вкладки с помощью выбираемых элементов <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'));
    });
});

Ответ 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 для вас: Демо

P.S:, тогда вы можете использовать заголовок подсказки на вкладках с помощью textL "Двойной щелчок, чтобы выбрать текст" или что-то в этом роде, просто для информации.

Ответ 3

Вкладки пользовательского интерфейса уже обрабатывают состояние выбора с помощью пользовательского интерфейса выбираемого взаимодействия. Именно так jQuery знает, на какой вкладке отображается текущее содержимое. Поэтому, когда пользователь выбирает вкладку, она активируется, и содержимое отображается.

Что вы можете сделать, так это добавить значок копии на вкладку. При нажатии заголовок вкладки копируется в буфер обмена. Это будет работать как пример manipulation. Вместо того, чтобы показывать значок закрытия. Вы можете использовать ui-icon-copy.

Вот пример.

Ответ 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 тоже плохо, но у вас есть идея.

Надеюсь, это поможет вам.

Ответ 5

Для того, что стоит, вкладки DO разрешают выбор, вы просто должны быть точными о том, где вы начинаете свой выбор.

Нашел этот ответ, объединив несколько статей 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