JQuery-UIタブのテキストをクリップボードに選択する

Question

JQuery-UIのタブを使用するページで、タブ見出しのテキストを選択する方法を教えてください。

私はいくつかの動的なタブを持っており、ユーザーが見出しを選択してクリップボードにコピーできるようにしたいと考えています。

たとえば、Demo pageでは、コピー＆ペースト 'Nunc tincidunt'を選択できます。 'Proin dolor'、 'Aenean lacinia'などがあります。または見出しの一部（例：「Proin」、「Aenean」、「tincidunt」）。

Answer 1

は、ここで選択可能な<span>要素でタブを定義するアンカーを交換するややハック方法です。あなたは機能を決定するために、このコードを使用して、ちょうどダブルクリックでそれを呼び出すことができます：選択のための

機能：

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：次に、テキストの「ダブルクリックしてテキストを選択する」などのタブのツールチップタイトルを情報のためだけに使用できます。

Answer 2

UIタブでは、既にUI selectable interactionを使用して選択状態を処理しています。これは、jQueryがどのタブにコンテンツを表示するかを知る方法です。したがって、ユーザーがタブを選択すると、タブがアクティブになり、内容が表示されます。

あなたができることは、タブにコピーアイコンを追加することです。クリックすると、タブのタイトルがクリップボードにコピーされます。これは、manipulationの例のように動作します。閉じるアイコンを表示する代わりに。 ui-icon-copyを使用できます。

Here is an example。

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

私はダブルクリックして選択を提案することができます。

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と怠惰とよくありませんよコピー貼り付けコードがたくさんあるので、コードと関数呼び出しをリファクタリングすることができます。 入力枠も削除して正しく整列させることができます。 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