當(dāng)前位置：
首頁 >
ZeroClipboard 和JqueryUI_dialog 完美组合！
發(fā)布時(shí)間：2025/7/14
30
豆豆
生活随笔
收集整理的這篇文章主要介紹了
ZeroClipboard 和JqueryUI_dialog 完美组合！
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
ZeroClipboard 和JqueryUI 都是好東西，這里就不細(xì)說了。
下面直接看效果圖和代碼：
?
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link href="/script/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet"> <style type="text/css"></style><script src="../src/javascript/ZeroClipboard.js" type="text/javascript"></script> <script src="/script/jquery-1.7.2.min.js"></script> <script src="/script/jquery-ui-1.8.20.custom.min.js"></script> </head> <body> <div id="dialog"><input type="text" id="clip_txt" value="被復(fù)制的內(nèi)容！" /> </div> <script type="text/javascript"> $(function () {ZeroClipboard.setMoviePath('../ZeroClipboard.swf');var clip = new ZeroClipboard.Client();clip.setHandCursor(true); // 鼠標(biāo)手形 $('#dialog').dialog({dialogClass: 'clip_dialog', // 為dialog設(shè)置一個(gè)class，用于選取其中的按鈕 title: 'dialog_ZeroClipboard',buttons: {"復(fù)制": function () {}, // 復(fù)制按鈕"取消": function () {$('#dialog').dialog('close');}}, dragStop: function(event,ui){clip.reposition();},resizeStop: function(event,ui){clip.reposition();},open: function (event, ui) { // 對(duì)話框打開時(shí)if ($('#clip_btn').length > 0) return;$('.clip_dialog .ui-button-text:eq(0)').attr('id', 'clip_btn'); // 給復(fù)制按鈕加一個(gè)ID，為clip選取容器用，注意當(dāng)有多個(gè)按鈕的時(shí)候要用“:eq(x)”選取其中的一個(gè)，x從0開始，0表示第一個(gè) $('#clip_btn').css('position', 'relative'); // 拉出clip到頂層（被dialog覆蓋），也可將js中的“zIndex:99”改為“zIndex:2001”，但不推薦使用 $('#clip_btn').css('z-index', 2000);clip.glue('clip_btn'); // clip按鈕容器 clip.setText($('#clip_txt').val()); // 要復(fù)制的文本 clip.addEventListener('onComplete', function (client, text) { // 復(fù)制成功時(shí)的操作 alert('成功復(fù)制“' + text + '”到剪貼板');});$('#clip_txt').keyup(function () { // 當(dāng)要復(fù)制的文本內(nèi)容更改時(shí)更新clip中的內(nèi)容 clip.setText($(this).val());}); /* */}}); }); </script> <input type="button" value="打開" onclick="$('#dialog').dialog('open')" /> </body> </html>?
?
轉(zhuǎn)載于:https://www.cnblogs.com/psamd/archive/2012/12/08/2809099.html
總結(jié)
以上是生活随笔為你收集整理的ZeroClipboard 和JqueryUI_dialog 完美组合！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 发光二极管原理，理解，相关计算
- 下一篇： hibernate一级缓存和二级缓存的区