10

JQuery-UI タブを使用するページで、ユーザーがタブ見出しのテキストを選択できるようにするにはどうすればよいですか?

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

たとえば、デモ ページでは、「Nunc tincidunt」をコピー/貼り付けするために選択できるようにしたいと考えています。「Proin dolor」と「Aenean lacinia」。または、見出しの一部 (例: 'Proin'、'Aenean'、'tincidunt')。

4

5 に答える 5

5

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

ここで私はあなたのためにデモを作成しました:デモ

PS: 次に、テキスト「ダブルクリックしてテキストを選択」などの情報を含むタブでツールヒントのタイトルを使用できます。

于 2013-05-15T11:22:57.703 に答える
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

私はフィドルであなたの質問に答えようとしました: 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 に答える
0

UI タブは、UI の選択可能な対話を使用して、既に選択状態を処理しています。これは、どのタブのコンテンツを現在表示するかを jQuery が認識する方法です。ユーザーがタブを選択すると、タブがアクティブになり、コンテンツが表示されます。

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

ここに例があります。

于 2013-05-06T20:23:03.863 に答える