Jquery跨瀏覽器文字複製外掛程式Zero Clipboard的使用方法

Jquery跨瀏覽器文字複製外掛程式Zero Clipboard的使用方法_jquery

PHP中文网

發布： 2016-05-16 15:13:11

原創

1362 人瀏覽過

當開發者需要對某局部文字進行點擊複製效果時，在IE下實作比較簡單。但要做到跨瀏覽器比較困難了。 Zero Clipboard 它利用 Flash 進行複製，所以只要瀏覽器裝有 Flash 就可以運行，而且比IE的document.execCommand(“Copy”) 更靈活。

Zero Clipboard 的實作原理

Zero Clipboard 利用 Flash 進行複製，之前有 Clipboard Copy 解決方案，其利用的是一個隱藏的 Flash。但最新的 Flash Player 10 只允許在 Flash 上操作才能啟動剪貼簿。所以 Zero Clipboard 對此進行了改進，用了一個透明的 Flash ，讓其漂浮在按鈕之上，這樣其實點擊的不是按鈕而是 Flash ，也就可以使用 Flash 的複製功能了。

Zero Clipboard 特點介紹：
相容支援Flash 10
避免使用第三方瀏覽器外掛程式（的Adobe Flash瀏覽器中的安全衝突）
無形的覆蓋，無幹擾，頁面設計
支援CSS“懸停”和“活躍”狀態
保留目標元素的“點擊”，”mouseenter”和”mouseleave”的事件
供應回調函數“複製前”和“複製”
極輕的重量！（7KB精縮）

先下載 Zero Clipboard ，並解壓縮。其中需要兩個檔案：ZeroClipboard.js 和 ZeroClipboard.swf ，將這兩個檔案放入到你的專案中。
點選下載：jquery.zclip.1.1.1

用法：

) 先引入核心檔案

程式碼如下:

<script type="text/javascript" 
src="js/jquery.js"></script>
<script type="text/javascript" 
src="js/jquery.zclip.js"></script>

登入後複製

2.) 在頁碼裡寫入功能模組，定義copy複製按鈕元素屬性資訊

<script language="javascript">
$(document).ready(function(){
   
    $(&#39;a#copy-description&#39;).zclip({
        path:&#39;js/ZeroClipboard.swf&#39;,
        copy:$(&#39;p#description&#39;).text()
    });
   
    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"
   
   
    $(&#39;a#copy-dynamic&#39;).zclip({
        path:&#39;js/ZeroClipboard.swf&#39;,
        copy:function(){return $(&#39;input#dynamic&#39;).val();}
    });
   
    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"
   
});
</script>

登入後複製

例一：

<a href="#" id="copy-description">点击复制效果预览</a>
<p 
id="description">文本源……</p>

登入後複製

例二：

<a href="#" id="copy-dynamic">点击复制效果预览:</a><input 
style="width:300px; margin-left:15px;" type="text" id="dynamic" value="Insert 
any text here." onfocus="if(this.value==&#39;Insert any text here.&#39;){this.value=&#39;&#39;}" 
onblur="if(this.value==&#39;&#39;){this.value=&#39;Insert any text here.&#39;}" />

登入後複製

3.) 供應定制的回調函數。

<script language="javascript">
$(document).ready(function(){
   
    $("a#copy-callbacks").zclip({
        path:&#39;js/ZeroClipboard.swf&#39;,
        copy:$(&#39;#callback-paragraph&#39;).text(),
        beforeCopy:function(){
            $(&#39;#callback-paragraph&#39;).css(&#39;background&#39;,&#39;yellow&#39;);
            $(this).css(&#39;color&#39;,&#39;orange&#39;);
        },
        afterCopy:function(){
            $(&#39;#callback-paragraph&#39;).css(&#39;background&#39;,&#39;green&#39;);
            $(this).css(&#39;color&#39;,&#39;purple&#39;);
            $(this).next(&#39;.check&#39;).show();
        }
    });
   
});
</script>

登入後複製

3.) 預設參數。

擴充介紹：
1.) 測驗相容IE6，IE7，IE8，FF 3.6，Chrome瀏覽器8，Safari 5的，歌劇11

2.) 適當的CSS特效：

/* zClip is a flash overlay, so it must provide */
/* the target element with 
"hover" and "active" classes */
/* to simulate native :hover and :active 
states. */
/* Be sure to write your CSS as follows for best results: 
*/
 
/*大概意思就是说 
ZeroClip是flash叠加……就是说flash叠加在了text文本上，其实显示文字可以根据css来定义*/
a:hover, a.hover 
{...}
a:active, a.active {...}

登入後複製

線上示範：
1、http://demo.jb51.net/js/2016/jquery_zclip/demo1.html

2、http:// demo.jb51.net/js/2016/jquery_zclip/demo2.html

至此，該插件使用方法已經介紹結束，對於用戶的開發者來說，剩下的擴展方面就要根據需求而定了。

以上就是Jquery跨瀏覽器文字複製插件Zero Clipboard的使用方法_jquery的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！