ZeroClipboard.js实现复制

为什么实现不了复制功能呢？

第一种情况：判断现在的运行环境是否在服务器模试运行

http://localhost:16980/Copy/Copy 正确

file:///F:/电影/狸小路项目/狸小路项目/all%20article.html 错误

 

 

 

第一步：引入需要JQ与ZeroClipboard.js文件（注意先后顺序）

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/zeroclipboard/ZeroClipboard.js"></script>

第二步：引入ZeroClipboard.swf文件

 ZeroClipboard.setMoviePath("/Scripts/zeroclipboard/ZeroClipboard.swf");

第三步：找到每一个需要实现点击复制的按键进行邦定

<script type="text/javascript">
    ZeroClipboard.setMoviePath("/Scripts/zeroclipboard/ZeroClipboard.swf");
    function copyData() {
        /*点击复制按钮复制该ID地址*/
        $(".acdcopy").each(function () {
            // 新建一个对象
            var text = $("#" + ($(this).attr("id") + "id")).text();
            var clip = new ZeroClipboard.Client();
            // 设置鼠标为手型 
            clip.setHandCursor(true);
            //设置要复制的文本   
            clip.setText(text);
            //设置是否使用样式：在网上找了很多版本： 当我们在元素上方移到时会在元素上加上.hover类 点击时会加上 .active类 实现样式变化   .active { background: green !important;  }  .hover { background: red;  }
            clip.setCSSEffects(true);

            clip.glue($(this).attr("id"));
            //复制完成后的监听事件        
            clip.addEventListener('complete', function (client, text) {
                alert("你已经复制成功" + text)
                // 复制一次后，hide()使复制按钮失效，防止重复计算使用次数
            });
        })
    }
    $(function () { copyData(); })

</script>

 

@{
    ViewBag.Title = "Copy";
}

<html>
<head>
    <title></title>

    <style type="text/css">
 table { border-collapse: collapse;  }

    table td { border: 1px solid red;  height: 30px;  width: 50px;  font-weight: bold;font-size: 5px;  }

        .acdcopy { position: relative;  }

        .active { background: green !important;  }
        .hover { background: red;
        }
    </style>
</head>
<body>


    <table>
        <tr>
            <td id="aid">111111111111</td>
            <td id="a" class="acdcopy">a</td>
        </tr>
        <tr>
            <td id="bid">22222222222</td>
            <td id="b" class="acdcopy">b</td>
        </tr>
        <tr>
            <td id="cid">3333333333333</td>
            <td id="c" class="acdcopy">c</td>

        </tr>
        <tr>
            <td id="did">444444444444</td>
            <td id="d" class="acdcopy">da</td>

        </tr>
    </table>

</body>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/zeroclipboard/ZeroClipboard.js"></script>

</html>

<script type="text/javascript">
    ZeroClipboard.setMoviePath("/Scripts/zeroclipboard/ZeroClipboard.swf");
    function copyData() {
        /*点击复制按钮复制该ID地址*/
        $(".acdcopy").each(function () {
            // 新建一个对象
            var text = $("#" + ($(this).attr("id") + "id")).text();
            var clip = new ZeroClipboard.Client();
            // 设置鼠标为手型 
            clip.setHandCursor(true);
            //设置要复制的文本   
            clip.setText(text);
            clip.setCSSEffects(true);

            clip.glue($(this).attr("id"));
            //复制完成后的监听事件        
            clip.addEventListener('complete', function (client, text) {
                alert("你已经复制成功" + text)
                // 复制一次后，hide()使复制按钮失效，防止重复计算使用次数
            });
        })
    }
    $(function () { copyData(); })

</script>

 

posted on 2015-10-12 14:59  高达  阅读(463)  评论(0)    收藏  举报

导航