Zero Clipboard實(shí)現(xiàn)瀏覽器復(fù)制到剪貼板的方法(多個(gè)復(fù)制按鈕)
本文實(shí)例講述了Zero Clipboard實(shí)現(xiàn)瀏覽器復(fù)制到剪貼板的方法。分享給大家供大家參考,具體如下:
<script type="text/javascript" src="{$site_url}/Public/js/ZeroClipboard.js"></script>
<script language="JavaScript">
$(function(){
$(".my_clip_button").each(function(i){
var id = $(this).attr('data');
var clip=null;
clip = new ZeroClipboard.Client();
ZeroClipboard.setMoviePath("{$site_url}/Public/js/ZeroClipboard.swf"); //設(shè)置 不然要放在網(wǎng)站根目錄下才顯示
clip.setHandCursor( true );
clip.setText( $("#txtInvite_"+id).val() );
clip.addEventListener('complete', function (client, text) {
ui.success( "恭喜復(fù)制成功" );
});
clip.glue( 'd_clip_button_'+id ,'d_clip_container_'+id );
});
});
</script>
<style>
.my_clip_button { width:62px; text-align:center; height:20px;border:1px solid black; background-color:#ccc; margin:2px; padding:2px; cursor:default; font-size:9pt; }
.my_clip_button.hover { background-color:#eee; }
.my_clip_button.active { background-color:#aaa; }
</style>
<div style="width:90%;margin:0 auto; height:50px;line-height:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="19%" height="45" align="right">默認(rèn)邀請(qǐng)鏈接:</td>
<td width="52%"><input type="text" name="txtInvite_default" id="txtInvite_default" value="{$defaultInviteLink}" style="width:350px;" /></td>
<td width="31%">
<div id="d_clip_container_default" style="position:relative;">
<div id="d_clip_button_default" class="my_clip_button" data="default">復(fù)制</div>
</div>
</td>
</tr>
</table>
</div>
<volist name="invitelists" id="vo">
<div style="width:90%;margin:0 auto; height:50px;line-height:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="19%" height="45" align="right">{$vo.group_name}專(zhuān)用邀請(qǐng)鏈接:</td>
<td width="52%"><input type="text" name="txtInvite_{$vo.id}" id="txtInvite_{$vo.id}" value="{$vo.invitelink}" style="width:350px;" /></td>
<td width="31%">
<div id="d_clip_container_{$vo.id}" style="position:relative;">
<div id="d_clip_button_{$vo.id}" class="my_clip_button" data="{$vo.id}">復(fù)制</div>
</div>
</td>
</tr>
</table>
</div>
</volist>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery跨瀏覽器文本復(fù)制插件Zero Clipboard的使用方法
- ZeroClipboard插件實(shí)現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)
- 使用ZeroClipboard解決跨瀏覽器復(fù)制到剪貼板的問(wèn)題
- zeroclipboard 單個(gè)復(fù)制按鈕和多個(gè)復(fù)制按鈕的實(shí)現(xiàn)方法
- JavaScript flash復(fù)制庫(kù)類(lèi) Zero Clipboard
- zeroclipboard復(fù)制到剪切板的flash
- Zero Clipboard js+swf實(shí)現(xiàn)的復(fù)制功能使用方法
- JQuery zClip插件實(shí)現(xiàn)復(fù)制頁(yè)面內(nèi)容到剪貼板
- jQuery插件Zclip實(shí)現(xiàn)完美兼容個(gè)瀏覽器點(diǎn)擊復(fù)制內(nèi)容到剪貼板
相關(guān)文章
jQuery 選擇同時(shí)包含兩個(gè)class的元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery 選擇同時(shí)包含兩個(gè)class的元素的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09
jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡(jiǎn)單實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-11-11
jQuery實(shí)現(xiàn)table表格信息的展開(kāi)和縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)table表格信息的展開(kāi)和縮小功能,涉及jQuery事件響應(yīng)及頁(yè)面元素遍歷、屬性修改相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開(kāi)隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開(kāi)就隱藏的效果,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07
jQuery用FormData實(shí)現(xiàn)文件上傳的方法
眾所周知文件上傳是Web開(kāi)發(fā)中的重要話題,最直接和簡(jiǎn)單的方式是通過(guò)表單直接提交文件。 下面這篇文章小編就來(lái)和大家分享jQuery利用FormData實(shí)現(xiàn)文件上傳的方法,文中介紹的方法簡(jiǎn)單易懂,相信對(duì)大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11

