使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

导言

之前在开发普加09年国庆中秋祝福页面复制链接功能时,遇见在Firefox,Chrome,Opera,Safari能复制链接的兼容性问题,而在近期上线的普加地图产品中使用的是Flash的flashvars来传入参数来解决了这个问题。其实开发中经常会用到复制的功能,在 IE 下通过JavaScript的window.clipboardData.setData可以简单实现复制到剪贴板功能。最后终于找到了终极解决方式:使用jhuckaby写的Zero Clipboard的js类库。此方法利用 Flash完成进行复制内容到剪贴板,所以只要浏览器装有Flash 就可以复制内容。

Zero Clipboard的实现原理

Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板

Zero Clipboard的安装方法

其实也不算安装啦,就是使用前的准备工作。
首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。
Zero Clipboard : [项目主页] [zip下载] [在线演示]

IE6 PNG图片不透明问题的解决方法

IE6真是前端开发人员的噩梦,就像刘洋说的:IE6一次又一次的阻碍了互联网的发展。在前几天开发的WordPress天气预报插件中使用的图片都是png格式的透明图片,由于png格式的图片比较漂亮美观,可是在IE6中png的透明效果是没有的,这样子本来设计很漂亮的页面在IE6就歇菜了,让人感觉很不爽~本文使用js的方法来解决IE6下PNG图片不透明的问题,简单实用。更多解决方法点击此处

如果我们在页面中使用的透明PNG图片不是很多,可以使用下面的代码来解决问题:

function setPng(img, w, h){
     ua = window.navigator.userAgent.toLowerCase();
     if (!/msie/.test(ua))
         return;
     imgStyle = "display:inline-block;" + img.style.cssText;
     strNewHTML = "";
     img.outerHTML = strNewHTML;
}

使用方法,在img上添加onload=”setPng(this,宽度,高度)”,如<img onload=”setPng(this,98,78)” src=”” />
如果您觉得这样的方法比较麻烦,或者页面中使用的透明png图片比较多如果手动添加很不方便的时候,可是使用下面的代码来解决问题。

主流浏览器的CSS Hack方法整理

由于不同的浏览器,比如IE6、IE7、Firefox等,对CSS的解析不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。我在写WordPress天气预报插件的时候就碰见了一个CSS hack的问题:在IE6下不能显示正常。本来一个很好的WordPress天气预报插件就因为IE6给推迟了发布时间。所以对于前端开发人员CSS兼容性是个比较棘手的问题,当然对于不同浏览器也有不同的CSS hack的方法,此处本人就整理了一些常用到CSS hack方法,分享给大家,希望对大家有用。

CSS Hack浏览器的顺序

对于不同浏览器的CSS hack是有顺序区分的,一般的书写hack的顺序是:Firefox -> IE7 -> IE6 -> 其他
当然推荐大家使用Firefox+Firebug来进行调试,注意书写的时候要尽量标准,记住封口,很多时候不封口在FF,IE7下显示正常,可是在IE6下就全部乱了~

CSS Hack整理汇总

这些方法相信很多人已经很熟悉了:比如 IE6能识别下划线”_“和星号” * “,IE7能识别星号” * “,但不能识别下划线”_“,而firefox两个都不能认识。

使用if IE hack注释解决CSS以及JS的兼容问题

IE CSS hack(更多方法)当中常用到if IE 来判断浏览器的类型,解决CSS甚至于JS的兼容性问题,之前大家可能知道if IE来解决CSS的兼容性问题,其实if IE不仅仅是用于CSS hack的使用,我们在前端开发中甚至可以使用if IE来做JS的处理,如下面的代码:

<!–[if IE 5]> <script>document.write(“仅IE5.0与IE5.5可以识别”);</script> <![endif]–>

<!–[if gte IE 5.0]><script>document.write(“IE5.0以及IE5.0以上版本都可以识别”);</script><![endif]–>

<!–[if IE 6]><script>document.write(“仅IE6可识别”);</script><![endif]–>

<!–[if lt IE 6]><script>document.write(“IE6以下版本可识别”);</script><![endif]–>

<!–[if gte IE 6]><script>document.write(“IE6以及IE6以上版本可识别”);</script><![endif]–>

<!–[if IE 7]><script>document.write(“仅IE7可识别”);</script> <![endif]–>

<!–[if lt IE 7]><script>document.write(“IE7以下版本可识别”);</script><![endif]–>

<!–[if gte IE 7]><script>document.write(“IE7以及IE7以上版本可识别”);</script><![endif]–>
下面对if IE做一下详细的解释:

cURL常用的几个PHP函数

cURL是一个功能强大的PHP库,我们可以使用PHP的cURL采用GETPOST等方式发送请求,获取网页内容以及取一个XML文件并把其导入数据库等等。本文中收集了几种常用的PHP的cURL函数,以备使用。主要的有几个PHP函数用于:GET,POST,HTTP验证,302重定向,设置cURL的代理。

1、开启PHP的cURL功能

在Windows平台下,或者使用xampp之类的集成服务器的程序,会非常简单,你需要改一改你的php.ini文件的设置,找到php_curl.dll,并取消前面的分号注释就行了。如下所示:

//取消注释,开启cURL功能
extension=php_curl.dll
Linux下面,那么,你需要重新编译你的PHP了,编辑时,你需要打开编译参数——在configure命令上加上“–with-curl” 参数。

UTF-8页面引用外部编码为GBK的JS文件编码的处理

昨天写的一个根据来访者IP返回来访者所在地区的天气情况的WordPress天气插件侧边栏,效果见本博客的首页侧边栏“天气预报”。其中根据IP返回来访者城市地理位置的方法是采用了QQ的一个接口:http://fw.qq.com/ipaddress,而这个接口提供的js为GBK编码的,由于[我的博客](http://js8.in “断桥残雪部落格”)是UTF-8编码的,所以再次使用返回的城市名称在我页面显示的是乱码,而且不能引用的。

上网找了很多关于JavaScript把GBK编码转换为UTF-8编码的js函数,可是都无济于事,并且如果单单为了编码问题就单独写一个js函数来处理GBK转UTF-8编码,这是很不合理的~由于本来我引用的是QQ的根据IP返回城市接口,我自己是不能够改变QQ官方的数据编码格式的,解决的方法唯有我在我的程序中把GBK编码的js强制转换为utf-8的格式,怎么转换是个比较难的方式,既然不能通过写js函数,那就只用用其他的方式了。

最后我在网上找到了一个很好的解决方法,

发布WordPress来访者天气预报插件

细心的童鞋会发现我的博客昨天添加了一个新的功能——天气预报,昨天我说要发布给大家的,晚上睡觉之前,想了很久关于WordPress天气插件的编写,基本上在晚上就已经理清了思路,早上很早就起床了,没有吃饭就来到公司,趁着大家还没有来的时候,我要在九点上班之前把WordPress来访者天气预报的插件做出来,加上之前开发的WordPress Follow5 插件开发经验,自己写WordPress来访者天气插件已经是轻车熟路了~

这个插件的使用的是jsonp技术,首先通过QQ的ip接口(http://fw.qq.com/ipaddress)获取到来访者的城市**地理信息**,然后使用WordPress的wp_footer的hook动态建立一个JavaScript文件,文件地址为我博客的[http://js8.in/weather/js.php](http://js8.in/weather/wordpress-weather “WordPress天气插件下载”),js.php返回的是一段JavaScript代码,代码使用innerHTML插入来访者天气预报的内容。

WordPress来访者天气预报插件采用精美的天气图标,完全DIV+CSS页面布局,保证了页面的美观大气,数据库信息来自中国气象网,保证了数据的可靠性,并且熟悉CSS的童鞋还可以修改插件中的CSS,以达到自己喜欢的页面效果。css地址为wp-content\plugins\weather\css.css

插件如不能正常使用,请看以下注意事项:

1、保证您的主题皮肤中的footer.php中存在do_action(‘wp_footer’);函数

2、如出现其他情况,请来插件页面报错
WordPress来访者天气预报插件截图

使用方法:

1、下载插件(点击下载)并上传到wp-content\plugins目录中;
2、登录网站后台安装此插件;
3、然后进入“外观”,“小工具”,把“Weather Widget”小工具拖到右侧,填写插件显示名称(如:天气预报)即可。

最后更新时间:2009-12-12 8:55

下载地址:http://js8.in/weather/vistor_weather.zip

当前最新版本为:0.1

推荐六个在线制作Loading图标的网站

经常来我的博客的而且细心的童鞋可以看见我的网站侧边栏加上了天气预报插件,这是我自己写的,代码稍后放出,写的时候需要一个Loading的gif,于是上网找生成Loading图标的网站,这里我推荐六个网站,希望大家喜欢~

1、Ajax Load

Ajax Load 在线loading图标制作网站

Ajax Load所提供的种类丰富,也可以自定义Loading图标样式,推荐!

2、Load Info

Load Info loading图标网站

Load Info在线制作Loading图标的免费网站,目前Load Info网站提供了90多种(总有一种适合你)动态图标。而且每种图标都自定义背景色和前景色,更有三种不同的尺寸可以选择,包括 16×16, 24×24, 48×46,很是方便实用。

设置htaccess应该注意的问题

今天给爱墙做SEO优化,发现自己没有自定义404页面,并且还发现存在index of列目录的漏洞,后来才知道原来WordPress都没有在htaccess中使用Options -Indexes来防止列目录,于是先加上了Options -Indexes来防止列目录的问题,自动转为了404错误,而不是403,呵呵~

可是我改变了爱墙的根目录下的htaccess配置把404页面指到了404.html,可是就是不能实现404页面的跳转呢?难道htaccess的404配置不可用?而是直接都返回到了爱墙的首页http://love.js8.in)~这样子听说对**SEO**是很不好的,搜索引擎不会收录网站的首页,于是上网google原因,找了半天的原因也没有找到问题的根本所在~

后来我在一片不起眼的文章中找到了问题的所在~

CSS清除浏览器默认样式注意点

今天看了岁月如歌的一片文章《KISSY CSS Reset 1.0》其中写到了css重置的代码

/
KISSY CSS Reset
理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。
特色:1. 适应中文;2. 基于最新主流浏览器。
维护:玉伯, 正淳
Revision: 276
/

/ 清除内外边距 /
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, / structural elements 结构元素 /
dl, dt, dd, ul, ol, li, / list elements 列表元素 /
pre, / text formatting elements 文本格式元素 /
form, fieldset, legend, button, input, textarea, / form elements 表单元素 /
th, td / table elements 表格元素 / {
margin: 0;
padding: 0;
}

/ 设置默认字体 /
body,
button, input, select, textarea / for ie / {
font: 12px/1.5 tahoma, arial, simsun, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } / 将斜体扶正 /
code, kbd, pre, samp { font-family: courier new, courier, monospace; } / 统一等宽字体 /
small { font-size: 12px; } / 小于 12px 的中文很难阅读,让 small 正常化 /

/ 重置列表元素 /
ul, ol { list-style: none; }

/ 重置文本格式元素 /
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { vertical-align: text-top; } / 重置,减少对行高的影响 /
sub { vertical-align: text-bottom; }

/ 重置表单元素 /
legend { color: #000; } / for ie6 /
fieldset, img { border: 0; } / img 搭车:让链接里的 img 无边框 /
button, input, select, textarea { font-size: 100%; } / 使得表单元素在 ie 下能继承字体大小 /
/ 注:optgroup 无法扶正 /

/ 重置表格元素 /
table { border-collapse: collapse; border-spacing: 0; }
而我在腾讯webteam中看到一篇文章《border:none;与border:0;的区别》中提到