ZeroClipboard 和JqueryUI_dialog 完美组合！
生活随笔
收集整理的这篇文章主要介绍了
ZeroClipboard 和JqueryUI_dialog 完美组合！
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
ZeroClipboard 和JqueryUI 都是好东西，这里就不细说了。
下面直接看效果图和代码：
<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="被复制的内容！" /> </div> <script type="text/javascript"> $(function () {ZeroClipboard.setMoviePath('../ZeroClipboard.swf');var clip = new ZeroClipboard.Client();clip.setHandCursor(true); // 鼠标手形 $('#dialog').dialog({dialogClass: 'clip_dialog', // 为dialog设置一个class，用于选取其中的按钮 title: 'dialog_ZeroClipboard',buttons: {"复制": function () {}, // 复制按钮"取消": function () {$('#dialog').dialog('close');}}, dragStop: function(event,ui){clip.reposition();},resizeStop: function(event,ui){clip.reposition();},open: function (event, ui) { // 对话框打开时if ($('#clip_btn').length > 0) return;$('.clip_dialog .ui-button-text:eq(0)').attr('id', 'clip_btn'); // 给复制按钮加一个ID，为clip选取容器用，注意当有多个按钮的时候要用“:eq(x)”选取其中的一个，x从0开始，0表示第一个 $('#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()); // 要复制的文本 clip.addEventListener('onComplete', function (client, text) { // 复制成功时的操作 alert('成功复制“' + text + '”到剪贴板');});$('#clip_txt').keyup(function () { // 当要复制的文本内容更改时更新clip中的内容 clip.setText($(this).val());}); /* */}}); }); </script> <input type="button" value="打开" onclick="$('#dialog').dialog('open')" /> </body> </html>
转载于:https://www.cnblogs.com/psamd/archive/2012/12/08/2809099.html
总结
以上是生活随笔为你收集整理的ZeroClipboard 和JqueryUI_dialog 完美组合！的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 发光二极管原理，理解，相关计算
- 下一篇： hibernate一级缓存和二级缓存的区