web-dev-qa-db-ja.com

bootstrap 3でクリップボードにコピー

ウェブサイトに「クリップボードにコピー」ボタンを追加したい。このサイトはBootstrap 3フレームワークを使用しています。ここで使用されている[クリップボードにコピー]ボタンと同じようにボタンを機能させたいです： http://twitterbootstrapbuttons.w3masters.nl/

私はこのコードを取り込もうとしました： http://jsfiddle.net/T2uXr/ 、しかし私はそれで成功しませんでした。

Javascript：

$("a.copy").on('click', function (e) {
  e.preventDefault();
}).each(function () {
  $(this).zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function() {
      return $(this).data('copy');
    }
  });
});

CSS：

body {
  padding: 20px
}

HTML

<hr />

<h5>These copy to clipboard links are working...</h5>

<p><a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a></p>

<p><a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a></p>

<p><a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a></p>

<hr />

<h5>If I put these links inside the bootstrap dropdown, they stop working...</h5>

<div class="btn-group">
                  <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                    View copy clipboard links
                    <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a></li>
                    <li><a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a></li>
                    <li><a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a></li>
                    <li class="divider"></li>
                    <li><a href="mailto:" title="Email URL Links">Email URL Link</a></li>
                  </ul>
</div>

これを私のBootstrap 3サイトのボタンに追加する方法についてのアイデアはありますか？または他の良い選択肢はありますか？

ありがとう！ :)

javascripttwitter-bootstrapcopyclipboard
7
user3504529

深夜4:00 AMまで作業し、問題を投稿しながら問題を修正した方法は次のとおりです（ ここをクリック 表示）。これが誰かが夜を燃やさないようにするのに役立つことを願っています:) Bootstrapの現在のウェブサイトがコードをコピーする方法を試してみましたが、Bootstrapは現在古いzeroClipboardプラグインを使用しています。 Bootstrapと同じように作成しようとしましたが、最新のzeroClipboardを使用しました（現在）。

HTML：1行にすべてのコードを追加していないことに注意してください。pre＆codeをインデントしないでください。 2行目またはインデントしてコードの見栄えを良くします。そうしないと、余分な意図がクリップボードにコピーされます。

<div class="highlight"><pre><code>Some code/text goes here</code></pre></div>

CSS：

/* ZeroClipboard styles */

.zero-clipboard {
    position: relative;
    display: none;
}
.btn-clipboard {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: block;
    padding: 5px 8px;
    font-size: 12px;
    color: #777;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e1e1e8;
    border-radius: 0 4px 0 4px;
}
.btn-clipboard-hover {
    color: #fff;
    background-color: #563d7c;
    border-color: #563d7c;
}

@media (min-width: 768px) {
    .zero-clipboard {
        display: block;
    }
    .zero-clipboard .btn-clipboard {
        top: -16px;
        border-top-right-radius: 0;
    }
}

JavaScript：JSファイルがある場所にZeroClipboard.swfを配置します。

// Config ZeroClipboard
ZeroClipboard.config({
    hoverClass: 'btn-clipboard-hover'
})

// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
    var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';
    $(this).before(btnHtml)
});

var zeroClipboard = new ZeroClipboard($('.btn-clipboard'));
var htmlBridge = $('#global-zeroclipboard-html-bridge');

// Handlers for ZeroClipboard
zeroClipboard.on('ready', function (event) {
    htmlBridge
        .data('placement', 'top')
        .attr('title', 'Copy to clipboard')
        .tooltip();

    // Copy to clipboard
    zeroClipboard.on('copy', function (event) {
        var highlight = $(event.target).parent().nextAll('.highlight').first();
        event.clipboardData.setData("text/plain", highlight.text())
    });

    // Notify copy success and reset tooltip title
    zeroClipboard.on('aftercopy', function () {
        htmlBridge
            .attr('title', 'Copied!')
            .tooltip('fixTitle')
            .tooltip('show')
            .attr('title', 'Copy to clipboard')
            .tooltip('fixTitle')
    });
});

// Notify copy failure
zeroClipboard.on('error', function () {
    ZeroClipboard.destroy();
    htmlBridge
        .attr('title', 'Flash required')
        .tooltip('fixTitle')
        .tooltip('show');
});
2
Syed

コードは正常に見え、jsfiddleコードも正しく機能します。 Mac OS XのSafari、Chrome、Firefoxで試してみましたが、すべて機能しました。コードにはFlashが必要なので、Flashがインストールされて有効になっていることを確認してください。

0
Behrooz