存档

‘js’ 分类的存档

27

按钮实现复制文本框input内容效果js特效代码

主要的理解的几个点:
1、Firefox这些浏览器,出于安全考虑吧,直接是不让复制的;
2、在Flash中,可以用System.setClipboard(),把内容扔到剪贴板上,然后再让FLASH工作在Firefox下;
3、在Flash播放器10.0之后呢,也是出于安全考虑吧,System.setClipboard的内容必须在FLASH里边;
4、用ExternalInterface可以和JS通信;
5、ExternalInterface在flash8中必须引用一下才可以;
默认的HTML代码:

程序代码

<input type="text" id="testInput" name="testInput" value="4234324234" />
<div id="buttonBox">
<button onclick="copy('testInput')">copy</button>
</div>

所以,设计的时候,先作第一个判断,如果是IE,就还用默认的代码,这样最没有问题,如果不是,就用一个FLASH把默认的

按钮覆盖;

程序代码

if (window.XMLHttpRequest){//如果不是IE时,就用FLASH的方式复制
$('buttonBox').innerHTML = '&lt;object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="48" height="23" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"&gt;&lt;param name="src" value="flashCopy.swf" /&gt;&lt;param name="quality" value="high" /&gt;&lt;embed type="application/x-shockwave-flash" width="48" height="23" src="flashCopy.swf" quality="high"&gt;&lt;/embed&gt;&lt;/object&gt;';
}

以下是所有的JS文件:

程序代码

&lt;script type="text/javascript"&gt;// &lt;![CDATA[
function $(id){
return document.getElementById(id);
}
function copy(){//ie6
var value = $('testInput').value;
window.clipboardData.clearData();
window.clipboardData.setData("Text", value);
alert('复制成功!');
}

function flashCopy(){//firefox .......
return $('testInput').value;
}

function flashCopyBack(){
alert('复制成功!');
}

if("\v" != "v"){//如果不是IE时,就用FLASH的方式复制
$('buttonBox').innerHTML = '&lt;span  src="111.swf" width="48" height="23" quality="high"   pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"&gt;&lt;/span&gt;';
}
// ]]&gt;&lt;/script&gt;

FLASH按钮的代码如下:
程序代码

on (release) {
import flash.external.ExternalInterface;
var inputText = ExternalInterface.call('flashCopy');
System.setClipboard(inputText);
ExternalInterface.call('flashCopyBack');
//_root.boboText.text = inputText;
}

原理,就是避开那个安全上的限制,在点FLASH中的按钮时,通过FLASH中的代码去调页面中的JS代码,JS代码可以拿到INPUT

中的值,然后再传给FLASH,这时,FLASH中就有了这些值了,然后,FLASH自已再通过System.setClipboard把这些值存到剪

贴板上; 再然后,他再去调用页面中的flashCopyBack,flashCopyBack只干一件事,就是提示已复制成功!

27

复制文本框的内容到剪贴板:






18

压缩你的JS和CSS代码让你网站速度飙升
减小代码在传输中的大小,就能提高页面的传输速度,打开网页也就快了。在一起PHP程序中 像WordPress是默认的gzip压缩功能是通过ob_gzhandler这个函数来实现的,ob_gzhandler是php 4.0.4新增的一个输出缓存函数,并通过gzip压缩后发送到客户端。这个函数需要zlib库支持,一般的虚拟主机都安装有这个库,所以很多blog都使用这个方法来实现对php页面的压缩。

那么对于我们这些没有开启mod_deflate模块的主机来说,就只能采用ob_gzhandler函数来压缩了,它的压缩效果和 mod_deflate相比,相差很小,几乎可以忽略(但它只能对php文件进行压缩),下一篇文章将附上我对这几种方式的一个对比测试。

使用ob_gzhandler函数有3种方法让它对php进行压缩:
1、在php.ini中设置output_handler = ob_gzhandler
2、在.htaccess中加入php_value output_handler ob_gzhandler
3、在php文件头加上ob_start(‘ob_gzhandler’);
第一种我们是没法办到,第二种方法不错,可以一劳永逸,一、二种方法效果都一样,就是对所有php后缀文件进行压缩。我这里主要介绍一下第三种方法,
就是试用CSS压缩法 例如对模板下的 style.css进行压缩

1、把模板目录下的 style.css复制一份出来,命名为style.css.php

接着在style.css.php顶部加入这句:

< ?php if(extension_loaded(‘zlib’)) {ob_start(‘ob_gzhandler’);} header(“Content-type: text/css”); ?>
在最后加上

< ?php if(extension_loaded(‘zlib’)) {ob_end_flush();} ?>
(复制的时候去掉?php前的空格)

2、按照下面的方式修改header.php中的css连接

原来的:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”/style.css”/>
修改后的:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”/style.css.php”/>
搞定,现在你的CSS就可以被gzip压缩了。

JS也可以使用同样的方法,只是在xx.js.php头部加入的应该是这样:

< ?php if ( extension_loaded(‘zlib’) ) {ob_start(‘ob_gzhandler’);} header(“Content-Type: text/javascript”); ?>
(复制的时候去掉?php前的空格)

仔细看看K2主题的中的JS,就是修改后缀为php后在顶部加入了ob_gzhandler函数。

所以我们可以用能压缩CSS 和JS的工具来对代码压缩 提高浏览速度~~~
附几个好用的代码压缩工具
CSS压缩与优化工具http://www.ip79.cn/css/css_optimiser.php?lang=zh
CSS验证器http://jigsaw.w3.org/css-validator/
JavaScript 在线压缩 http://www.ip79.cn/tools/js.html