कॉपी बूटस्ट्रैप 3

Question

मैं अपनी वेबसाइट पर बटन "क्लिपबोर्ड में प्रतिलिपि" एक जोड़ना चाहते हैं क्लिपबोर्ड में। साइट बूटस्ट्रैप 3 ढांचे का उपयोग करती है। मैं चाहता हूं कि मेरा बटन "क्लिप टू कॉपीबोर्ड" बटन के समान काम करता है: http://twitterbootstrapbuttons.w3masters.nl/

मैंने इस कोड को शामिल करने का प्रयास किया: http://jsfiddle.net/T2uXr/, लेकिन मुझे इसके साथ कोई सफलता नहीं मिली है।

जावास्क्रिप्ट:

$("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'); 
    } 
    }); 
}); 

सीएसएस:

body { 
    padding: 20px 
} 

एचटीएमएल

<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> 

कैसे मैं अपने बूटस्ट्रैप 3 साइट पर एक बटन को यह जोड़ना चाहिए पर कोई भी विचार? या क्या कोई अन्य अच्छा विकल्प हैं?

धन्यवाद! :)

Answer 1

आपका कोड ठीक लग रहा है और भी अपने jsfiddle कोड सही ढंग से काम करता है। मैंने इसे मैक ओएस एक्स पर सफारी, क्रोम और फ़ायरफ़ॉक्स में करने की कोशिश की और वे सभी काम करते थे। चूंकि आपके कोड को फ्लैश की आवश्यकता है, सुनिश्चित करें कि फ़्लैश स्थापित और सक्षम होना सुनिश्चित करें।

Answer 2

यहाँ कैसे मैं इस मुद्दे तय कर दी है, जबकि देर रात 4:00 बजे तक इस पर काम कर और अपनी समस्या पोस्टिंग (click here देखने के लिए) है, उम्मीद है कि इस में मदद मिलेगी कुछ एक अपने रात नहीं जलाने के लिए :) मैं करने की कोशिश की बूटस्ट्रैप वर्तमान वेबसाइट इसके कोड की प्रतिलिपि बनाने के लिए कैसे करती है, लेकिन बूटस्ट्रैप वर्तमान में पुराने शून्यक्लिबोर्ड प्लगइन का उपयोग कर रहा है। मैंने बूटस्ट्रैप के समान बनाने की कोशिश की है लेकिन नवीनतम शून्यक्लिपबोर्ड (अब तक) के साथ।

HTML: नोट कैसे मैं एक पंक्ति में शामिल नहीं किया है सभी कोड, दूसरी पंक्ति में pre & code ला सकते हैं या यह इंडेंट कोड बनाने के लिए नहीं है अच्छे लग रहे हैं और कुछ अतिरिक्त इरादा बोर्ड क्लिप को कॉपी किया जाएगा।

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

सीएसएस:

/* 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; 
    } 
} 

जावास्क्रिप्ट: जगह 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'); 
});