Sélectionner du texte dans l'en-tête de l'onglet JQuery-UI vers le presse-papiers

Question

Pour une page utilisant des onglets JQuery-UI, comment puis-je autoriser les utilisateurs à sélectionner le texte dans l'en-tête de l'onglet?

J'ai des onglets dynamiques et j'aimerais que les utilisateurs puissent sélectionner l'en-tête pour le copier dans le presse-papiers.

Par exemple sur la page de démonstration, j'aimerais pouvoir sélectionner pour copier/coller 'Nunc tincidunt', 'Proin dolor' et 'Aenean lacinia'. Ou même une partie de l'en-tête (par exemple 'Proin', 'Aenean', 'tincidunt').

Answer 1

Voici une manière un peu bricolée de remplacer les ancres qui définissent les onglets avec des éléments sélectionnables :

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

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

        $(this).hide();
        $('' + anchorText + '').insertAfter(this).data('tabIndex', tabIndex);
    });

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

Answer 2

Je peux proposer de sélectionner en double-cliquant. Vous pouvez utiliser ce code pour déterminer la fonction, puis l'appeler simplement en double-cliquant :

Fonction de sélection :

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();
    }
}

et ensuite appelez-le simplement en double-cliquant sur l'onglet :

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

Ici j'ai créé une démo pour vous : Demo

P.S : vous pouvez ensuite utiliser un titre d'info-bulle sur les onglets avec le texte "Double-cliquez pour sélectionner le texte" ou quelque chose comme ça, juste pour information.

Answer 3

J'ai essayé de répondre à votre question dans un fiddle : http://jsfiddle.net/vcarluer/Rfw3t/

L'idée : afficher une entrée html en cliquant sur l'en-tête actuel pour permettre la sélection de texte par l'utilisateur.

Nunc tincidunt

 cc

$("#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(); });

Si vous l'ouvrez avec IE, vous trouverez également un bouton 'cc' pour copier l'en-tête dans le presse-papiers (fonctionne uniquement avec IE)

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

Je ne suis pas doué avec JavaScript et trop paresseux, donc je vous laisse réorganiser le code et les appels de fonction car il y a beaucoup de copier-coller. Vous pouvez aussi supprimer la bordure de l'entrée et l'aligner correctement, ou pas... Je laisse la bordure pour que vous puissiez voir le chevauchement de l'entrée et du div. Le CSS est mauvais aussi mais vous avez l'idée.

J'espère que cela vous aidera.

Answer 4

Pour ce que ça vaut, les onglets permettent bel et bien la sélection, vous devez juste être précis sur l'endroit où vous commencez votre clic de sélection.

J'ai trouvé cette réponse en combinant quelques articles SO sur la sélection de texte et le clic de souris. Cela fonctionne en conjonction avec les onglets jquery ui. Crédit à Jason de SO pour la sélection de texte, à Acorn de SO pour la détection du clic droit de la souris et à moi-même pour tout combiner :). Cela sélectionnera le texte de l'onglet et ouvrira le menu contextuel standard pour le copier :

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) { //clic droit
            SelectText($(this).attr('id'));
        }
    });
});

Fiddle

Answer 5

Les onglets d'interface utilisateur gèrent déjà l'état de sélection en utilisant l'interaction selectable de l'interface utilisateur. C'est ainsi que jQuery sait quel onglet afficher actuellement le contenu pour. Ainsi, lorsque l'utilisateur sélectionne un onglet, il devient actif et le contenu est affiché.

Ce que vous pourriez faire est d'ajouter une icône de copie à l'onglet. Lorsqu'on clique dessus, le titre de l'onglet est copié dans le presse-papiers. Cela fonctionnerait de la même manière que l'exemple de manipulation. Au lieu d'afficher une icône de fermeture. Vous pourriez utiliser le ui-icon-copy.

Voici un exemple.