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>

 

 

posted @ 2012-12-08 17:30  Rollin.Yu  阅读(379)  评论(0)    收藏  举报