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}專用邀請(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)容感興趣的讀者可查看本站專題:《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ù)類 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ù)據(jù)刪除與隔行變色以及圖片預(yù)覽
項(xiàng)目需求:表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標(biāo)移動(dòng)到圖片時(shí)顯示圖片預(yù)覽等等,感興趣的朋友可以參考下2013-01-01jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07基于jQuery實(shí)現(xiàn)網(wǎng)頁(yè)打印功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)網(wǎng)頁(yè)打印功能,實(shí)現(xiàn)的打印功能大致跟瀏覽器的Ctrl+P效果一樣,感興趣的小伙伴們可以參考一下2015-12-12jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法
這篇文章主要介紹了jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法,實(shí)例分析了jQuery使用animate、css等方法實(shí)現(xiàn)滾動(dòng)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03boxy基于jquery的彈出層對(duì)話框插件擴(kuò)展應(yīng)用 彈出層選擇器
當(dāng)大家進(jìn)行復(fù)雜功能設(shè)計(jì)的時(shí)候,在對(duì)多級(jí)聯(lián)選擇進(jìn)行設(shè)計(jì),為了獲得更好的用戶體驗(yàn)和節(jié)省頁(yè)面空間,往往會(huì)使用彈出層的方法。2010-11-11jquery解析json格式數(shù)據(jù)的方法(對(duì)象、字符串)
這篇文章主要介紹了jquery解析json格式數(shù)據(jù)的方法,包括針對(duì)json對(duì)象及json字符串的解析技巧,并附帶了完整的jQuery解析json數(shù)據(jù)示例,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11jQuery獲取文本節(jié)點(diǎn)之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個(gè)參數(shù)來(lái)賦值,那么它們有些什么區(qū)別?2011-03-03