2

ユーザーが短い URL アンカーをクリックしたときに、ツールチップ内のテキストを強調表示して、コピーして貼り付けられるようにしたいと考えています。ツールチップは Twitter Bootstrap によって提供され、マークアップは次のようになります。

<div class="shorturl">
    <a href="#" rel="tooltip_r" data-original-title="http://tmblr.co/ZPPojuQzc9bb">Short URI</a>
</div>

リンクのクリックを処理する方法をまだ理解していないことを除いて、このスニペットは適切に機能すると思います（どちらもスクロールせず、ツールチップ内のテキストを強調表示しません）。

function selectText() {
    if (document.selection) {
    var range = document.body.createTextRange();
        range.moveToElementText(document.getElementByClass('tooltip'));
    range.select();
    }
    else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementByClass('tooltip'));
    window.getSelection().addRange(range);
    }
}

どうすればこれを機能させることができますか？入力していただきありがとうございます。

4

1 に答える 1

3

これは私があなたに提案するものです：ライブデモ（jsfiddle）

var selector = '[rel="tooltip_r"]';  // Links that will have the feature
var tooltipOptions = {               // Some options for the tooltips (careful if you override the "defaults" set below)
    placement: 'right'
};
var attribute = 'data-url';          // Attribute where to find the url, could be href

/* Be sure of what you are doing if you modify below this */
$elts = $(selector);
var defaultOptions = {
        trigger: 'manual',
        title: '<input type="text" readonly="readonly"/>'
};
var opts = $.extend({}, defaultOptions, tooltipOptions);

$elts.each(function() {
    var $this = $(this);
    var url = $this.attr(attribute);
    $this.tooltip(opts);
    $this.on('click.tooltip',function(e) {
        $this.tooltip('show');
        $this.data('tooltip').$tip.find('input').val(url).select()
            .on('click', function(e){ e.stopPropagation(); });
        e.preventDefault();
        e.stopPropagation();
    });
});

$('html').on('click.tooltip', function() {
    $elts.tooltip('hide');
});

また、ツールチップの入力を改善するために、いくつかのスタイルを使用することもできます。例えば ​​：

.tooltip .tooltip-inner > input[type="text"] {
    background: transparent;
    border: none;
    max-width: 100%;
    width: auto;
    padding: 0;
    color: inherit;
}

アップデート

動的に読み込まれるコンテンツで同じ機能が必要な場合は、委任されたイベントを使用する必要があります。これは動作中のjsfiddleです。

var selector = '[rel="tooltip_r"]';  // Links that will have the feature
var tooltipOptions = {               // Some options for the tooltips (careful if you override the "defaults" set below)
    placement: 'right'
};
var attribute = 'data-url';          // Attribute where to find the url, could be href    
var onClass = 'on';                  // Class used to determine which tooltips are displayed

/* Be sure of what you are doing if you modify below this */
var defaultOptions = {
        trigger: 'manual',
        title: '<input type="text" readonly="readonly"/>'
};
var opts = $.extend({}, defaultOptions, tooltipOptions);
var selectorOn = selector+'.'+onClass;

$('body').on('click.tooltip', selector, function(e) {
    var $this = $(this);
    var url = $this.attr(attribute);
    $this.data('tooltip') || $this.tooltip(opts);
    $this.tooltip('show').addClass(onClass);
    $this.data('tooltip').$tip.find('input').val(url).select()
        .on('click', function(e){ e.stopPropagation(); });
    e.preventDefault();
    e.stopPropagation();
})
  .on('click.tooltip', function() {
    var $elts = $(selectorOn);
    $elts.tooltip('hide');
});
于 2012-08-02T13:41:45.580 に答える