体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 体彩排列5双期走势图Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

来源: 易采站长站

当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单。但要想做到跨浏览器比较困难了。Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand(“Copy”) 更加灵活。

Zero Clipboard 的实现原理

Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

Zero Clipboard 特点介绍:
兼容支持Flash 10
避免使用第三方浏览器插件(的Adobe Flash浏览器中的安全冲突)
无形的覆盖,无干扰,页面设计
支持CSS“悬停”和“活跃”状态
保留目标元素的“点击”,”mouseenter”和”mouseleave”的事件
供应回调函数“复制前”和“复制”
极轻的重量! (7KB精缩)

首先下载 Zero Clipboard ,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。
点击下载:jquery.zclip.1.1.1

用法:

1.) 首先引入核心文件

代码如下:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

2.) 在页面代码里写入功能模块,定义copy复制按钮元素属性信息

<script language="javascript">
$(document).ready(function(){
 
    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text()
    });
 
    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"
 
 
    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('input#dynamic').val();}
    });
 
    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"
 
});
</script>

例一:

代码如下:
<a href="#" id="copy-description">点击复制效果预览</a>
<p id="description">文本源……</p>

例二:

<a href="#" id="copy-dynamic">点击复制效果预览:</a><input style="width:300px; margin-left:15px;" type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}" />

Tags:
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -
体彩排列5双期走势图 体彩排列5双期走势图齐鲁风采23选5走势图 福彩七乐彩中奖规则 福彩双色球走势图 浙江体彩6 1走势图 河南22选5和值走势图 广东南粤风采36选7走势图 东方6 1历史开奖号码 江苏体彩七位数走势图 体彩排列3开奖结果 浙江体彩6 1历史开奖号码 福彩双色球201遗漏走势图 体彩排列3中奖规则 齐鲁风采23选5尾数走势图 体彩排列3中奖规则 东方6 1历史开奖号码 江苏体彩七位数大小走势图 辽宁福彩35选7重号分布图 福彩七乐彩走势图 福彩3D走势图