<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>兼容浏览器 &#8211; LPC影子技术分享</title>
	<atom:link href="https://www.mudbest.com/tag/%E5%85%BC%E5%AE%B9%E6%B5%8F%E8%A7%88%E5%99%A8/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.mudbest.com</link>
	<description>行影不离,忘之却步.</description>
	<lastBuildDate>Sun, 07 Apr 2013 09:07:04 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.1</generator>
	<item>
		<title>Jquery跨浏览器文本复制插件Zero Clipboard的使用方法</title>
		<link>https://www.mudbest.com/jquery%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e6%96%87%e6%9c%ac%e5%a4%8d%e5%88%b6%e6%8f%92%e4%bb%b6zero-clipboard%e7%9a%84%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95/</link>
		
		<dc:creator><![CDATA[hkshadow]]></dc:creator>
		<pubDate>Sun, 07 Apr 2013 08:50:28 +0000</pubDate>
				<category><![CDATA[JQuery]]></category>
		<category><![CDATA[分享]]></category>
		<category><![CDATA[Zero Clipboard]]></category>
		<category><![CDATA[兼容浏览器]]></category>
		<category><![CDATA[文本复制]]></category>
		<guid isPermaLink="false">http://www.mudbest.com/?p=1842</guid>

					<description><![CDATA[当开发者需要对某局部文本进行点击复制效果时，在IE下实现比较简单。但要想做到跨浏览器比较困难了。Zero Cl ... <a title="Jquery跨浏览器文本复制插件Zero Clipboard的使用方法" class="read-more" href="https://www.mudbest.com/jquery%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e6%96%87%e6%9c%ac%e5%a4%8d%e5%88%b6%e6%8f%92%e4%bb%b6zero-clipboard%e7%9a%84%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95/" aria-label="阅读 Jquery跨浏览器文本复制插件Zero Clipboard的使用方法">阅读更多</a>]]></description>
										<content:encoded><![CDATA[<p>当开发者需要对某局部文本进行点击复制效果时，在IE下实现比较简单。但要想做到跨浏览器比较困难了。Zero Clipboard 它利用 Flash 进行复制，所以只要浏览器装有 Flash 就可以运行，而且比IE的document.execCommand(&#8220;Copy&#8221;) 更加灵活。</p>
<p>Zero Clipboard 的实现原理<br />
Zero Clipboard 利用 Flash 进行复制，之前有 Clipboard Copy 解决方案，其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进，用了一个透明的 Flash ，让其漂浮在按钮之上，这样其实点击的不是按钮而是 Flash ，也就可以使用 Flash 的复制功能了。 <span id="more-1842"></span></p>
<p>Zero Clipboard 特点介绍：<br />
兼容支持Flash 10<br />
避免使用第三方浏览器插件（的Adobe Flash浏览器中的安全冲突）<br />
无形的覆盖，无干扰，页面设计<br />
支持CSS“悬停”和“活跃”状态<br />
保留目标元素的“点击”，&#8221;mouseenter&#8221;和&#8221;mouseleave&#8221;的事件<br />
供应回调函数“复制前”和“复制”<br />
极轻的重量！ （7KB精缩）</p>
<p>首先下载 Zero Clipboard ，并解压缩。其中需要两个文件：ZeroClipboard.js 和 ZeroClipboard.swf ，将这两个文件放入到你的项目中。<br />
点击下载：<a href="http://www.mudbest.com/jquery%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e6%96%87%e6%9c%ac%e5%a4%8d%e5%88%b6%e6%8f%92%e4%bb%b6zero-clipboard%e7%9a%84%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95/jquery-zclip-1-1-1/" rel="attachment wp-att-1844">jquery.zclip.1.1.1</a></p>
<p>用法：</p>
<p>1.) 首先引入核心文件</p>
<pre class="brush: xml; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.zclip.js&quot;&gt;&lt;/script&gt;
</pre>
<p>2.) 在页面代码里写入功能模块，定义copy复制按钮元素属性信息</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script language=&quot;javascript&quot;&gt;
$(document).ready(function(){

	$('a#copy-description').zclip({
		path:'js/ZeroClipboard.swf',
		copy:$('p#description').text()
	});

	// The link with ID &quot;copy-description&quot; will copy
	// the text of the paragraph with ID &quot;description&quot;


	$('a#copy-dynamic').zclip({
		path:'js/ZeroClipboard.swf',
		copy:function(){return $('input#dynamic').val();}
	});

	// The link with ID &quot;copy-dynamic&quot; will copy the current value
	// of a dynamically changing input with the ID &quot;dynamic&quot;

});
&lt;/script&gt;
</pre>
<p>例一：</p>
<pre class="brush: xml; title: ; notranslate">
&lt;a href=&quot;#&quot; id=&quot;copy-description&quot;&gt;点击复制效果预览&lt;/a&gt;
&lt;p id=&quot;description&quot;&gt;文本源……&lt;/p&gt;
</pre>
<p>例二：</p>
<pre class="brush: xml; title: ; notranslate">
&lt;a href=&quot;#&quot; id=&quot;copy-dynamic&quot;&gt;点击复制效果预览:&lt;/a&gt;&lt;input style=&quot;width:300px; margin-left:15px;&quot; type=&quot;text&quot; id=&quot;dynamic&quot; value=&quot;Insert any text here.&quot; onfocus=&quot;if(this.value=='Insert any text here.'){this.value=''}&quot; onblur=&quot;if(this.value==''){this.value='Insert any text here.'}&quot; /&gt;
</pre>
<p>3.) 供应定制的回调函数。</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script language=&quot;javascript&quot;&gt;
$(document).ready(function(){

    $(&quot;a#copy-callbacks&quot;).zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('#callback-paragraph').text(),
        beforeCopy:function(){
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('#callback-paragraph').css('background','green');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }
    });

});
&lt;/script&gt;
</pre>
<p>3.) 默认参数。<br />
<a href="http://www.mudbest.com/wp-content/uploads/2013/04/111.jpg"><img fetchpriority="high" decoding="async" src="http://www.mudbest.com/wp-content/uploads/2013/04/111-540x370.jpg" alt="111" width="540" height="370" class="alignnone size-thumbnail wp-image-1850" /></a></p>
<p>扩展介绍：<br />
1.) 测试兼容IE6，IE7，IE8，FF 3.6，Chrome浏览器8，Safari 5的，歌剧11<br />
2.) 适当的CSS特效：</p>
<pre class="brush: css; title: ; notranslate">
/* zClip is a flash overlay, so it must provide */
/* the target element with &quot;hover&quot; and &quot;active&quot; classes */
/* to simulate native :hover and :active states. */
/* Be sure to write your CSS as follows for best results: */

/*大概意思就是说 ZeroClip是flash叠加……就是说flash叠加在了text文本上，其实显示文字可以根据css来定义*/
a:hover, a.hover {...}
a:active, a.active {...}
</pre>
<p>3.) ZeroClip的 显示/隐藏/移除</p>
<pre class="brush: jscript; title: ; notranslate">
$('a.copy').zclip('show'); // 启用zClip所选元素

$('a.copy').zclip('hide'); // 隐藏zClip所选元素

$('a.copy').zclip('remove'); // 删除的zClip所选元素
</pre>
<p>在线演示：<br />
1、<a href="http://help.mudbest.com/jquery/jquery_ZeroClipboard/demo1.html" target="_blank">http://help.mudbest.com/jquery/jquery_ZeroClipboard/demo1.html</a><br />
2、<a href="http://help.mudbest.com/jquery/jquery_ZeroClipboard/demo2.html" target="_blank">http://help.mudbest.com/jquery/jquery_ZeroClipboard/demo2.html</a></p>
<p>至此，该插件使用方法已经介绍结束，对于使用者的开发者来说，剩下的扩展方面就要根据需求而定了。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
