按照http://www.steamdev.com/zclip/我实现一个简单的zclip test

以下是我的测试code:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test jquery</title>

<script type="text/javascript" src="/kk/script/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="/kk/script/jquery.zclip.min.js"></script>

<script type="text/javascript">

    $(function($){

        $('#clip_order_id').zclip({

            path:'/kk/script/ZeroClipboard.swf',

            copy:$('#value_order_id').text(),

            beforeCopy:function(){

                $(this).css('color','#c0c0c0');

            },

            afterCopy:function(){

                $(this).css('color','green');

            }

        });

    });

</script>

</head>

<body>

    <ul class="order_info_list">

        <li class="info_label">orderId</li>

        <li id="value_order_id">201354</li>

        <li><input type="button" class="button_copy" id="clip_order_id" value="copy"></li>

    </ul>

</body>

</html>

但它不能实现预期的效果。分析原因有两个：

1》ZeroClipboard.swf有问题，需要重新下载一个。

2》但是我放入复杂的框架里，它不能实现相应效果。检查我发现它的位置有问题：就是说我所点击的按钮和zclip的位置并不重合，所以没有起作用。

<div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; left: 48px; top: 56px; width: 44px; height: 22px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="/kk/script/ZeroClipboard10.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="44" height="22" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=44&amp;height=22" wmode="transparent"></div>

详细修改可以参照：http://cheny.sh.blog.163.com/blog/static/49675535201305111141867/

jquery zclip 复制黏贴功能不能实现的更多相关文章

  1. jquery.zclip—复制剪贴板（兼容各大浏览器）

    开始前说两句 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内 ...

  2. jquery.zclip.js粘贴功能

    jquery的粘贴插件: 如下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  3. jquery ZeroClipboard实现黏贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  5. js/jQuery实现复制到剪贴板功能，兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

  6. JQuery实现复制到剪贴板功能

    在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...

  7. jquery.zclip轻量级复制失效问题

    工作原理 利用一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了 <script src="js/jquer ...

  8. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  9. 解决jquery.zclip.js插件无法复制的问题

    网页中需要用到点击复制,在使用webpack加载jquery以及jquery.zclip.js后,出现了以下情况: jquery顺利加载 zclip插件顺利加载 ZeroClipboard.swf顺利 ...

随机推荐

  1. [转]Java 泛型: 什么是PECS（Producer Extends, Consumer Super）

    以下内容转自: 原文链接: stackoverflow 翻译: ImportNew.com- 刘志军 译文链接: http://www.importnew.com/8966.html -------- ...

  2. Huffman树与编码的简单实现

    好久没写代码了,这个是一个朋友问的要C实现,由于不会C,就用JAVA写了个简单的.注释掉的代码属性按照原来朋友发的题里带的参数,发现没什么用就给注释掉了. package other; import ...

  3. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  4. myeclipse 6.5配置tomcat7.X

    软件安装:myeclipse 6.5 Apache Tomcat/7.0.47 安装完成后开始配置 1. 随便展开一个tomcat配置选项,这里配置到tomcat6.x,如下图:

  5. MongoDB相关资料

    MongoDB的介绍及安装参考http://www.cnblogs.com/lipan/archive/2011/03/08/1966463.html 安装过程: 第一步:下载安装包:官方下载地址←单 ...

  6. Linux-守护进程的实现

    Some basic rules to coding a daemon prevent unwanted interactions from happening. We state these rul ...

  7. POJ 2296 二分+2-sat

    题目大意: 给定n个点,给每个点都安排一个相同的正方形,使这个点落在正方形的下底边的中间或者上底边的中间,并让这n个正方形不出现相互覆盖,可以共享同一条边,求 这个正方形最大的边长 这里明显看出n个点 ...

  8. exit（0）与exit（1）、return区别

    exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数中,则会退出函数并返回一值. 详细说: 1. return返回函数值,是关键字 ...

  9. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  10. [Swift2.0系列]Defer/Guard 基础语法

    1.Defer Swift2.0中加入了defer新语法声明.defer译为延缓.推迟之意.那么在Swift2.0中它将被应用于什么位置呢?比如,读取某目录下的文件内容并处理数据,你需要首先定位到文件 ...