欧美成人免费一区二区三区视频 ,乱人伦精品视频在线观看,中国惊奇先生

1.ZeroClipboard.js

點擊按鈕實現復制鏈接或者一段文本到剪貼板，這個小功能想必不少人都見過。GitHub上就有這么一個點擊按鈕復制倉庫地址的功能。如下圖所示：

Github用的是ZeroClipboard來實現這一功能。這個庫是用一個不可見的Flash來完成剪貼操作的。即將 Flash 做成透明的，以便于我們放在諸如鏈接、按鈕等需要放置的任何地方。這樣，用戶界面看起來沒有變化，當點擊鏈接或按鈕時，實際上點擊是卻是 Flash，從而實現復制操作。具體實現方法，可以參考官方文檔http://zeroclipboard.org。

我們知道Flash正走向沒落，不少功能被越來越強大的HTML5所替代。而且，出于安全方面的考慮，不少瀏覽器都默認禁用了Flash。那么有沒有不是Flash的實現方式呢？

2.clipboard.js

clipboard.js是個更加輕量的JavaScript庫，沒有使用Flash，而是依賴于Selection和execCommand這兩個API，并且使用了HTML5的特性，比如自定義數據的data-* 屬性。因此，clipboard.js在兼容性方面比ZeroClipboard.js差，但現代瀏覽器(IE9+)基本能夠兼容。

使用方法非常簡單：

1)下載代碼，并引入到文件中。

<script src="dist/clipboard.min.js"></script>

2)實例化一個Clipboard對象，參數可以是CSS選擇器、HTML節點、NodeList對象

參數為CSS選擇器：

new Clipboard('.btn'); // btn為DOM元素的class名, 跟jQuery的用法一樣。

參數為HTML節點：

var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);

參數為NodeList對象：

var btns = document.querySelectorAll('button');
var clipboard = new Clipboard(btns);

3)實例化對象的時候，可以同時設置復制的內容：

var clipboard = new Clipboard('.btn', {
    text: function() {
        return 'to be or not to be'; //剪貼板上的文本
    }
});

4)也可以通過data-*屬性來設置要復制的內容

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">點擊復制</button>

<script>
    var clipboard = new Clipboard('.btn');
</script>

點擊一下，看看是否成功復制到剪貼板：

data-clipboard-target屬性的值#foo對應的是目標節點的CSS選擇器。

5）更多的配置信息和使用方法，請查閱clipboard.js官網，有興趣的朋友，應該看看它的源碼。

注意我說的看源碼，指的是src目錄的代碼。