jQuery ZeroClipboard粘贴板

稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2012-2-29   阅读次数: 10593   查看权限: 游客查看

网页中偶尔需要复制链接到粘贴板里,常常做的是js版本,但无法兼容,今天介绍一个兼容比较好的jQuery ZeroClipboard粘贴板。

网页中偶尔需要复制链接到粘贴板里,然后粘贴分享。为了用户体验都不好意思对客户说“请使用右键复制粘贴”,都需要给一个按钮点一下就复制了内容。此做法常常用到的就是execCommand("Copy")。可惜只IE支持,但无法兼容。今天介绍一款FLASH粘贴板,兼容所有浏览器,但必须得安装了FLASH插件哦。

jQuery ZeroClipboard v1.1.1
官网:http://steamdev.com/zclip 全英文哦,英语要是好点就直接进去看看

事先请准备三个文件:
1、jquery.js
2、jquery.zclip.js ~16KB 源始版    或者下载压缩版jquery.zclip.min.js ~7KB 
3、ZeroClipboard.swf ~1KB

使用例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>jquery.zclip</title>	
<script type="text/javascript" src="jquery1.4.2.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>
<body><input type="text" name="text" id="text" value="http://www.baidu.com" />
<a href="javascript:void(0)" id="dynamic">复制</a>

<script type="text/javascript">
$(document).ready(function(){
    $("#dynamic").zclip({
        path:'ZeroClipboard.swf',
        copy:$('#text').text()
});
</script>
</body>
</html>

 文件打包下载:点击下载

使用注意:我们曾做一个案例时,发觉只有第一次复制有效,之后就无法复制。原来是我们多次运行$(id).zclip();造成的,也就是说针对同一个id你只能执行一次$(id).zclip(),假如你非要执行第二次,请你删除这个id再建一个相同的id来执行$(id).zclip()。

其他参数设置:

Settings

Variable
Default Value
Available Values
path * "ZeroClipboard.swf" "path/to/ZeroClipboard.swf"
copy * null any string, or any javascript expression or function that returns a string
afterCopy null specify a function to call after text is copied.

(your afterCopy function will overwrite the default alert box.)
beforeCopy null specify a function to call before text is copied.
clickAfter true true
false
setHandCursor true true
false
setCSSEffects true true
false
* required

 

关键词: 复制,jquery,网页粘贴,ZeroClipboard   编辑时间: 2014-6-21 20:56:59

  • 感到高兴

    12

    高兴
  • 感到支持

    3

    支持
  • 感到搞笑

    4

    搞笑
  • 感到不解

    4

    不解
  • 感到谎言

    2

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    1

    震惊
  • 感到无奈

    5

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    2

    愤怒
14.29%(8)
85.71%(48)
共有2 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 【游客】对,确实没卵用 [2016-2-17 11:05:25]
  • 【游客】并没什么卵用
    [2015-7-29 14:11:00]
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程