ツールチップ+ Clipboard.jsでアニメーションを強調表示する

Question

clipboard.jsを正常にインストールしました。クリックするとクリップボードにコピーするためのスニペットを取得しました。私は、テーブルのセルにこれらのテキストスニペット（またはその中にある「btn」）を入れ子にするつもりです。

私の挑戦：「！コピーされた」

私は私にツールチップを与えるために、テキストのスニペットを必要としますメッセージが表示され、人々はクリック可能であることを認識します。これの大きな例は、クリップボードにあります.jsドキュメントページ - 切り取ったりコピーしたりするボタンをクリックすると、ツールチップのメッセージが表示されます。 clipboard.js'ドキュメントから

：

execCommandとのコピー/カット操作はまだ Safariでサポートされていませんが（携帯電話を含む） の選択がサポートされているので、それは優雅に低下します。

つまり、「コピーされました！」というツールチップを表示できます。成功イベントが呼び出されたとき が呼び出され、 テキストがすでに選択されているため、エラーイベントが呼び出されたときにCtrl + Cキーを押してコピーします。

私は特にJSに熟達していません（これまでには数時間かかりました）。だから私は...死んで終わりだ、WP上のすべてをインストールするスクリプトをエンキュー、およびテキスト/機能を追加することができました：

<!-- 1. Define some markup --> 
    <div id="btn" data-clipboard-text="1"> 
     <span>text to click</span> 
    </div> 

    <!-- 2. Include library --> 
    <script src="/path/to/dist/clipboard.min.js"></script> 

    <!-- 3. Instantiate clipboard by passing a HTML element --> 
    <script> 
    var btn = document.getElementById('btn'); 
    var clipboard = new Clipboard(btn); 

    clipboard.on('success', function(e) { 
    console.log(e); 
    console.info('Action:', e.action); 
    console.info('Text:', e.text); 
    console.info('Trigger:', e.trigger); 
    }); 

    clipboard.on('error', function(e) { 
     console.log(e); 
     console.error('Action:', e.action); 
     console.error('Trigger:', e.trigger); 
    }); 
    </script> 

私は何を追加する必要がありますか？ ありがとう！

Answer 1

あなたがしたいのは、Clipboard.jsをツールチップのソリューションと統合することだけです。

これは、ブートストラップのツールチップを使用してこれを達成する方法です。

// Tooltip 
 

 
$('button').tooltip({ 
 
    trigger: 'click', 
 
    placement: 'bottom' 
 
}); 
 

 
function setTooltip(btn, message) { 
 
    $(btn).tooltip('hide') 
 
    .attr('data-original-title', message) 
 
    .tooltip('show'); 
 
} 
 

 
function hideTooltip(btn) { 
 
    setTimeout(function() { 
 
    $(btn).tooltip('hide'); 
 
    }, 1000); 
 
} 
 

 
// Clipboard 
 

 
var clipboard = new Clipboard('button'); 
 

 
clipboard.on('success', function(e) { 
 
    setTooltip(e.trigger, 'Copied!'); 
 
    hideTooltip(e.trigger); 
 
}); 
 

 
clipboard.on('error', function(e) { 
 
    setTooltip(e.trigger, 'Failed!'); 
 
    hideTooltip(e.trigger); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button class="btn btn-primary" data-clipboard-text="It worked!">Click me</button> 
 
<button class="btn btn-primary" data-clipboard-text="It worked again!">Click me</button>

Answer 2

私はjQueryの機能でそれをラップしゼノンのコードに若干の改善を思い付く、および任意の要素からコピーをサポートしていました：

if (typeof $.uf === 'undefined') { 
 
    $.uf = {}; 
 
} 
 

 
$.uf.copy = function (button) { 
 
    var _this = this; 
 

 
    var clipboard = new Clipboard(button, { 
 
     text: function(trigger) { 
 
      var el = $(trigger).closest('.js-copy-container').find('.js-copy-target'); 
 
      if (el.is(':input')) { 
 
       return el.val(); 
 
      } else { 
 
       return el.html(); 
 
      } 
 
     } 
 
    }); 
 

 
    clipboard.on('success', function(e) { 
 
     setTooltip(e.trigger, 'Copied!'); 
 
     hideTooltip(e.trigger); 
 
    }); 
 

 
    clipboard.on('error', function(e) { 
 
     setTooltip(e.trigger, 'Failed!'); 
 
     hideTooltip(e.trigger); 
 
    }); 
 

 
    function setTooltip(btn, message) { 
 
     $(btn) 
 
     .attr('data-original-title', message) 
 
     .tooltip('show'); 
 
    } 
 
    
 
    function hideTooltip(btn) { 
 
     setTimeout(function() { 
 
      $(btn).tooltip('hide') 
 
      .attr('data-original-title', ""); 
 
     }, 1000); 
 
    } 
 

 
    // Tooltip 
 
    $(button).tooltip({ 
 
     trigger: 'click' 
 
    }); 
 
}; 
 

 
// Link all copy buttons 
 
$.uf.copy('.js-copy-trigger');

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form> 
 
<div class="form-group"> 
 
    <label>Email</label> 
 
    <div class="input-group js-copy-container"> 
 
    <input type="text" class="form-control js-copy-target" name="email" autocomplete="off" value="example@example.com" placeholder="Email goes here" disabled> 
 
    <span class="input-group-btn"> 
 
     <button class="btn btn-default js-copy-trigger" type="button">Copy</button> 
 
    </span> 
 
    </div> 
 
</div> 
 
</form>

ボタンがクラス01であることがわかりますと、js-copy-targetクラスでコピーされるテキスト/コントロール。どちらも共通のjs-copy-containerクラスにラップされています。

idのターゲットを使用するよりもはるかに優れています。複数のコピーボタン（テーブルなど）を生成する必要があることが多く、ページ上で一意である必要があります。