JQuery zClip插件實(shí)現(xiàn)復(fù)制頁(yè)面內(nèi)容到剪貼板
相信這個(gè)功能大家平時(shí)上網(wǎng)經(jīng)常能碰到，以前也沒(méi)怎么留意怎么實(shí)現(xiàn)的，直到項(xiàng)目中需要。
最終效果：
網(wǎng)上一搜一大堆，單純使用js方法也不是沒(méi)有，但是由于各瀏覽器的安全機(jī)制不同，不是跨瀏覽器的。去看了幾個(gè)常用的網(wǎng)站，都是用的透明flash遮擋“復(fù)制到剪貼板”按鈕，所以當(dāng)你點(diǎn)擊“復(fù)制到剪貼板”的時(shí)候，點(diǎn)擊的其實(shí)是flash，然后把你需要復(fù)制的內(nèi)容傳入到了flash，然后在通過(guò)flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到了剪貼板。
加載JQuery庫(kù)和zclip插件
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> <script src="js/jquery.zclip.min.js"></script>
下面是一個(gè)小demo，主要是復(fù)制文本框中的鏈接到剪貼板。
HTML
<input type="text" value="www.fzitv.net" id="link"> <span id="copyBtn">復(fù)制鏈接</span>
然后加入腳本
<script>
$('#copyBtn').zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $('#link').val();
}
});
</script>
然后就可以直接打開(kāi)網(wǎng)頁(yè)測(cè)試了，這只是一個(gè)簡(jiǎn)單的小應(yīng)用，希望大家可以迅速掌握。
相關(guān)文章
本文介紹了jquery實(shí)現(xiàn)輪播圖效果示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
大家應(yīng)該都會(huì)有這樣一種感覺(jué)，data函數(shù)在jQuery中看起來(lái)很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細(xì)一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無(wú)比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來(lái)詳細(xì)深入的學(xué)習(xí)下jQuery中的data()，感興趣的朋友們可以參考借鑒。2016-12-12
jquery checkbox實(shí)現(xiàn)單選小例
checkbox是復(fù)選框如何將其變?yōu)閱芜x呢？下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能
這篇文章主要介紹了jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
ajax 文件上傳應(yīng)用簡(jiǎn)單實(shí)現(xiàn)
今天看到一個(gè)jquery插件jquery.fileupload.v.1.5.0，自己試著結(jié)合java做了一個(gè)ajax的文件上傳小應(yīng)用2009-03-03
Android中的資源是指非代碼部分，指外部文件，本文詳細(xì)介紹資源使用概覽，需要了解的朋友可以參考下2012-12-12
jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫(huà)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫(huà)效果,涉及jQuery事件響應(yīng)及動(dòng)態(tài)修改頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
jQuery使用bind函數(shù)實(shí)現(xiàn)綁定多個(gè)事件的方法
這篇文章主要介紹了jQuery使用bind函數(shù)實(shí)現(xiàn)綁定多個(gè)事件的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery使用bind函數(shù)進(jìn)行多個(gè)事件綁定的操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-10-10
jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件結(jié)合x(chóng)ml數(shù)據(jù)繪制Marimekko圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery實(shí)現(xiàn)購(gòu)物車(chē)基本功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)購(gòu)物車(chē)基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10