糖醋排骨 » dev

用DD_belatedPNG插件修复IE6 PNG

interjc — Sat, 10 Jul 2010 10:50:11 +0000

IE6是一个令人作呕的话题，个人极为厌恶IE6，并且恨屋及乌，不过没有办法，中国就是这么一个神奇的国度，到了2010年仍然有不少人以使用“简单、快捷”的IE6为荣，不知道浏览器为何物的也更加不提了，而这种人往往又是互联网中广告点击的生力军，消费能力强，所以你必须照顾到他们的感受。

我对IE6恨之入骨的重要原因之一，恐怕就是对PNG各种半透明的支持情况了。我们在其他浏览器可以轻松实现的图片半透明效果，到了IE6这儿就得纠结蹉跎，虽然IE6勉强的支持PNG-8格式的伪半透明，但这个和GIF图片的效果相差并不大，如果你使用PNG-32的话，你所有的半透明区域都会变成灰底。

网上有不少IE6上实现PNG半透明的工具，各有千秋，大多数使用了IE的一个滤镜：AlphaImageLoader，使用后会有各种诸如问题（比如background-position和background-repeat属性支持的不完善，有些还会擅自更改背景图片的尺寸）。DD_belatedPNG提供了一种新的选择，他使用微软的VML语言对PNG图片进行重新绘制，以达到半透明的效果，并且能支持background-position和background-repeat属性。

查看Demo | 打包下载

其使用方法也不难，先在此下载DD_belatedPNG ，然后插入head标签中：

将所有需要需要修补的元素加上class=”png”即可

PS：对于:focus和:hover伪类，则需要将以上代码中的 :
DD_belatedPNG.fix(‘.png’);
修改为 :
DD_belatedPNG.fix(‘.png,a.png:hover,.png:focus’);

BTW：虽然这样可以缓解IE6下PNG的问题，不过会带来性能问题，还有一些其他的问题，自然是不如对png半透明有原生支持的浏览器的。所以，赶快让该死的IE6下地狱吧。阿门！

一个最简单的基于PHP+jQuery的AJAX例子

interjc — Sun, 25 Apr 2010 12:56:01 +0000

说在前面：本文只作为一个笔记留存用以达到语言重用的效果，可能对于很多大虾过于入门级，请直接无视。

基本上一说起ajax，大家都感觉到比较神秘，我以前也是这样，总觉得这个和荷兰一家足球俱乐部同名的玩意儿是个高深莫测的东西。其实ajax之所以看上去那么蛋疼主要是为了解决各浏览器对js的兼容性问题而写了太多的代码，以至于一看见就头昏。强大简易的jquery扭转了这个局面。

首先说下个人对ajax的简单理解：html、css、js(jQuery等)是给浏览器看的，PHP是给服务器看的，js可以和php对话，而php可以生成html、css和js，以前我们浏览网页的时候，总是通过操作html，通过php告诉服务器我们需要什么内容，然后服务器会在一个新的页面将你请求的信息展示给你；而ajax，即是我们操作html时告诉js，然后js告诉php，php得到命令以后到服务器去取了你要的信息交给js，js再将此信息展示给你。这么看来ajax貌似更复杂一点，但是他带来几个好处：1. 你不需要进入一个新的页面就可以看到你所请求的信息；2.php只需要提取出产生了变化的有限信息即可，减少了重复。

简单扼要的说就是ajax模拟了提交表单的行为，但是把刷新页面这件事交由js在后台偷偷完成了。

由此可见ajax其实是一个很容易理解的过程，下面用例子来说明。首先写一个html页面：


 xmlns="http://www.w3.org/1999/xhtml">
>
 http-equiv="Content-Type" content="text/html; charset=utf-8" />
>ajax test>
 type="text/javascript" src="http://code.jquery.com/jquery-latest.js">>
 type="text/javascript">
$(function(){
  $('button').click(function(){
    $name = $(this).attr('name');
    $('#out').empty().load('test1.php',{ name : $name });
  });
});
>
 type="text/css">>
>
>
 id="btn-1" name="1">1>
 id="btn-2" name="2">2>
 id="btn-3" name="3">3>
 id="out">>
>
>

有一点html基础的童鞋可以看出，这里做了三个按钮，一个id为out的div，三个按钮是用来点击的，#out的div用来接收数据，每次点击button时先把#out清空，然后插入信息。

然后来写php：

 
switch($_POST['name']){
  case 1:
    echo '1 哈哈';
    break;
  case 2:
    echo '2 呵呵';
    break;
  case 3:
    echo '3 活活';
    break;
}
?>

这段代码使用了php的switch语句，意思就说根据post中name的值来替换输出的内容，这里只是个简单的例子，你也可以通过这个原理让php进行更复杂的运算或输出更复杂的内容。

js我直接写在html里面了，没有单独用一个文件，用纯js写估计得写不少，用jQuery就2句搞定，其实一句都行，只是我这儿还是写成两句比较好理解一点。
第一句是吧button按钮中的name值存在一个变量里面，第二句是使用了jQuery的load函数，告诉php需要哪些信息，然后取回这些信息插入到#out中。

这个ajax就这么完成了，简单吗？

效果见此：test1.html

Wdorpress 模板：ShadowBlue 0.5 Beta

interjc — Thu, 18 Mar 2010 06:54:22 +0000

Shadowblue这模板发布也有一段时间了，正式发文也就是0.1 alpha 的时候，其后陆陆续续修改了一些小BUG，更新到了 0.3 。过年期间到现在一直很忙，所以一直没有什么大的更新，这两天抽空添了点儿内容，升级到 0.5 Beta ，也算是一个迟到的新年礼物吧。

Shadowblue 0.5 beta 在外观上和前面的版本没有什么太大的不同，就是增加了一个后台，可以用来控制顶部广告位、社会化链接显示的内容，切换内容部导航栏分类与标签的选项，也增加了一个底栏的开关（因为我发现有很多朋友不大喜欢底栏）。本人实属懒人，十分能理解懒人们的疾苦，有了后台朋友们就不用去改代码了。

目前后台可控的项目不多，本人会逐步改进并即时更新到 SVN 中并在Demo中体现出来，有稳定版本也会直接升级到下载地址，如果您喜欢这个主题，请关注开发页面，欢迎提供各种意见和建议，我会在后续版本中改进，谢谢！

下载请移步开发页面

Shadow Blue 0.1 Alpha

interjc — Tue, 19 Jan 2010 16:02:24 +0000

这是一个WordPress模板，点此预览

1. 主题内已嵌入了最新的jQuery 1.4，~~如果你使用的插件也使用jQuery，请禁用其所内置的jQuery库载入~~ ，并已修正多库共存的兼容性问题；

2. 在文章自定义域，添加名称为 avatar 的域，值为需要显示的图片地址，可以自定义文章 avatar ，否则默认显示作者的 avatar ；

3. 暂不支持Ajax提交评论，不过可以很好的通过插件 WordPress Thread Comment 来很好的实现该功能；

4. Widget Ready，后台主题小工具中可以设置4个widget bar，1～4 的widget bar 分别控制右侧，下左，下中和下右的Widget bar；
模板文件夹内的AD文件夹内的 ad_468_60.php 文件可以自行编辑，添加规格为 468×60 像素大小的广告代码：

 class="ad-in">
在此处粘贴你的广告代码，或者任何大小为468×60的页面元素
>

5. 主题不断更新中，推荐使用SVN升级主题
…..

感兴趣的请移步本模板开发页面，谢谢。

jQuery 1.4 Released

interjc — Fri, 15 Jan 2010 15:27:35 +0000

这几天还在为Google的走留问题闹心的时候，就听到了这么一个好消息，jQuery总算是1.4了，还是released。
jQuery是我最喜欢的一个js库，用起来简洁明了，感觉很爷们，什么都整合在一起，不像Mootools随便实现个什么效果还得去下这个那个文件一大堆把人都搞昏头了，对于我们这种小网站也没有什么太大的性能需求，jQuery就刚好。
到底更新了什么我还没看，不知道更新了什么东西，不过应该修复了不少bug做了很多改进吧，先给自己的主题换上再说。

为你的评论框增加Ctrl+Enter提交功能

interjc — Wed, 06 Jan 2010 17:07:45 +0000

写完评论之后不能按Ctrl+回车提交，非要拿鼠标点一下，实在是痛苦的事情，不知道打消了多少懒人留言的积极性。
想给你的评论框添加这个功能么，那么就开始吧：

打开主题中comments.php文件，按Ctrl+F搜索“textarea”，然后在他的后面加上以下代码：

onkeydown="if(event.ctrlKey&&event.keyCode==13)
{document.getElementById('submit').click();return false};"

大概改完以后就是这么个样子：

保存提交，然后就有这个功能了，经我自己测试了，基本上市面上的浏览器都可以很好的支持，爽吗？

Have fun !

关于本Blog的页面载入效果

interjc — Fri, 01 Jan 2010 09:58:32 +0000

Zed童鞋向我询问本站载入效果的做法，由于比较繁琐，遂写到Blog中来，一来是这样比QQ等手段更有条理性，二来可以保留下来提高重用率。

废话不多说，现在开始：

1.结果
本效果完成后的效果就是你在打开本站每一个页面的时候会出现一个半透明遮罩一个loading画面然后页面载入完以后遮罩消失的效果。

2.思路
这个半透明遮罩首先被载入，这样他才能在一开始就出现，他上面有一张图片和一段文字告诉浏览者这是在loading，而不是笔记本快没电了或者什么；然后，页面的DOM就Ready了，这个时候为了验证各种库(比如我所使用的jQuery)载入完毕，CSS也下载完了，我们使用jQuery语句来使这个遮罩层隐藏起来，这个时候这个效果就完成了。

3.准备
你需要一个已经安装好的网站，和一个可以在你自己控制之下的文件系统。说简单点，拿WordPress举例，你得能够修改自己的模板全部代码；你需要一个jQuery库、一个载入用的图片、和一个好用的文本编辑器(当然你可以用记事本，不过我这里推荐Notepad++)。

4.动手
以下我们以修改一个WordPress模板为例，其他所有类型网页修改方法都大同小异，只是文件的命名方式有少许不同而已。

找到header.php文件，用编辑器打开，如果你的模板本身没有使用jQuery库，那么请在标签内加入以下代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/loading.js"></script>

还是header.php文件，找到body标签，将其修改并在其下添加遮罩层，如下：

<body style="height:100%; width:100%; position:relative;">
<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) no-repeat center center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:20px 0 0 -50px; padding:3px 10px;">页面载入中..</p>
</div>

未达到最佳效果，请将上面代码中background里url括号内的图片下载至你的模板文件夹(比如img文件夹)内，并将此图片网址改为如下：

background:#000 url(('stylesheet_directory'); ?>/img/load.gif) no-repeat center center;

最后通过jQuery来控制整个遮罩(也就是页面载入效果)的行为：
在模板文件夹随便什么地方(这里我们使用其根目录)新建一个名为loading的js文件loading.js ，在其中添加如下代码：

//载入中 Loding..
jQuery(function(){
  jQuery('#loading-one').empty().append('页面载入完毕.').parent().fadeOut('slow');
});

Update(2010.1.9)：

默默觉得需要一个点击就立刻取消遮罩的功能，可以照顾到网速慢的用户…

我觉得他说得很对，于是我就加上了，在此对默默童鞋表示感谢。如果你也需要这样的功能，可以这么做：
打开header.php文件，把刚才的那段添加在body标签之下的关于遮罩的代码替换成如下代码即可：

<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) no-repeat center center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:20px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中..</p>
</div>
<script type="text/javascript">
//[CDATA[
  function turnoff(obj){
    document.getElementById(obj).style.display="none";
  }
//]]>
</script>

5.完工
这个时候把所有修改过的文件保存，然后上传，应该就成功了。需要注意的是，如果你使用的是UTF-8编码的话，所有的文件必须使用编辑器转换为UTF-8无BOM模式之后再保存，不然也许会出现各种诸如乱码之类的问题。更改格式的办法如左图(以notepadd++为例)。

有意见或者建议欢迎在楼下指出，have fun！

使用jquery和cookies控制select表单

interjc — Mon, 30 Nov 2009 09:56:18 +0000

问题源于一个群里面的提问，在一个网页上添加一个select表单，当用户选择表单的时候，内容区会显示不同的内容，并在该用户下次打开此网页的时候记住这个设置。
像这样的东东一般都会想到要用Cookies来存储设置，方便起见，对于DOM的操作就想到了jQuery（直接写js执行效率会更高，只是，人都是很懒的嘛，呵呵..）。记录下来也算是个笔记吧(Demo)。

首先写这么一个Select下拉表单，以及用来输出被选中项相应内容的块：

然后是用来处理Cookies的函数，其实jQuery有个插件是干这个的，不过貌似有点小Bug，所以我用的是以下函数：

//这一大段代码你没有必要知道它的确切意思，只要复制粘贴就可以了，他们是用来提供操作Cookies的支持的
function setCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function dropCookie(name) {
	setCookie(name,"",-1);
}

然后是用来操作表单和Cookies的js：

$(function(){
    //以下部分是提取Cookie并对网页内容进行预设的过程
	var cityChosen = getCookie('citychosen');  //取得cookie中保存的值
	if(cityChosen!=null && cityChosen!=''){    //如果有这个cookie值
		var chosen = $('#choose option[value="'+cityChosen+'"]');  //绑定cookie中保存的那个城市所对应的选项
		chosen.attr('selected',true);  //使此选项变为选定状态
		$("#output").removeClass().addClass(cityChosen).html("你上次选择了
" + chosen.text());  //为id为output的div添加class为相应城市名称的类，以便在css中分别定义样式，并输出相应文字
	}
    //以下部分是用户对下拉菜单进行选取的时候，将设置存到Cookie，并对相应内容部分进行设定
	$("#choose").change(function(){
		var selected = $("#choose option:selected");  //浏览者选中一个选项	
		var output = "";
		if(selected.val() != 0){  //如果选项的值不为0
			setCookie('citychosen',selected.val(),365);  //将被选中选项的value值存在名为citychosen的cookie里面，有效期一年
			output = "你这次选择了
" + selected.text();  //设定output中的内容
		}
		$("#output").removeClass().addClass(selected.val()).html(output);  //在id为output的div里面输出相应的内容
	});
});

想要效果看得更清楚明白一点，写了一点点小CSS：

*{ margin:0; padding:0;}
body{ font:24px Verdana, Geneva, sans-serif; margin:100px;}
#output{ color:#fff; margin:20px 0; padding:50px; height:200px; width:200px;}
.default{ background:#CCC;}
.beijing{background:red;}
.shanghai{background:blue;}
.wuhan{background:orange;}
.shenzhen{background:plum;}

它们整合起来以后，大概就是如下代码了：


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//[CDATA[
$(function(){
	var cityChosen = getCookie('citychosen');
	if(cityChosen!=null && cityChosen!=''){
		var chosen = $('#choose option[value="'+cityChosen+'"]');
		chosen.attr('selected',true);
		$("#output").removeClass().addClass(cityChosen).html("你上次选择了
" + chosen.text());
	}
	$("#choose").change(function(){
		var selected = $("#choose option:selected");		
		var output = "";
		if(selected.val() != 0){
			setCookie('citychosen',selected.val(),365);
			output = "你这次选择了<br />" + selected.text();
		}
		$("#output").removeClass().addClass(selected.val()).html(output);
	});
});
//以下是用来处理Cookies的函数
function setCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function dropCookie(name) {
	createCookie(name,"",-1);
}
//]]>
</script>
<title>选择表单</title>
</head>
<body>
  <select id="choose">
		<option value="0">请选择城市</option> 
		<option value="beijing">北京</option> 
		<option value="shanghai">上海</option> 
		<option value="wuhan">武汉</option> 
		<option value="shenzhen">深圳</option> 
  </select>
<div id="output" class="default"></div>
</body>
</html>

效果演示可以看这个：Demo

PS：Chrome的安全工作做得可真够彻底的，本地文件居然不可以操作Cookies，害我测试了好久..

CMS.txt – 超简易的内容管理系统

interjc — Sat, 28 Nov 2009 11:54:41 +0000

CMS并不是一种离我们遥远的东西，从字面上(Content Management System)就可以知道，他只是一个用来管理网页内容的东东而已，比如我现在所使用的WordPress就是其中的一种，这里我要介绍的是一个核心程序2K不到，即便加上所有示例文件和模板打包起来也才442K的CMS系统，他的名字叫做 CMS.txt 。
使用起来也很简单，根目录的index.php是核心文件基本不用修改，CMS.txt是配置文件，用来管理网站的结构，内有两个文件夹pages和thems，前者用来存放内容，后者存放模板，如果你只是要发布一些内容的话，只需要动配置文件和pages文件夹里的内容就可以了。
如此简洁的东东，最适合用来制作内容不多的小网站了。

废话不多说，马上做了一个，有兴趣的可以到这里看看，以下是截图：

PS：安装和使用CMS.txt需要PHP以及mod_rewrite组件的支持(一般的PHP空间服务商都会提供此功能)。

WordPress主题：Grey Cover

interjc — Mon, 26 Oct 2009 09:31:31 +0000

做了一个WordPress主题，根据其配色方案起名为Grey Cover，顾名思义就是灰不隆咚的一主题，颜色不大鲜艳，侧边栏还是左侧的，还用的是直角，应该算是比较小众吧，希望喜欢这种风格主题的人能够喜欢。

点击下载 | 预览

这个主题有几个特点：

1. 主题内置分类Widget模块，后台小工具(widgets)面板中有可重复使用的模块“分类 Widget”，可以任意拖放至左中右三个Widget Bar中使用，这样就算是一个可随意定制的CMS主题了；

2. 首页及分类、Tag、存档页都使用幻灯片来展示文章列表，这样就可以把下面的大片区域让出来放置更丰富的内容；

3. 幻灯片中可以为每篇文章分别配图(最佳规格为200×100，单位为PX)，添加方法为：在该文章的自定义域添加一个名为 simg 的域，值为你要显示的图片地址；

4. 简单SEO优化、留言回复支持Ctrl+Enter、Widget Ready、通过标准…… 等等必要特性都是有的。

有任何意见和建议欢迎在此或在本主题开发页面留言。

有图有真相：

点击下载 | 预览

PS：欢迎任意转载此主题，但不要修改制作者信息或用于商业用途。

Wibiya

interjc — Sat, 10 Oct 2009 10:19:00 +0000

Wibiya是一个华丽的blog挂件（~~如我blog底部所示~~），其注册貌似是需要人工审核并由工作人员邀请的。

今天装了一个之后发现其与我所用的jQuery类库有所冲突。找到所有写有jQuery语句的代码，将其中 $ 全部替换为 jQuery ，问题解决。

BTW：这个工具条貌似很好的解决了腿特和脸书翻不过墙的问题。

一个jQuery+CSS幻灯片播放器

interjc — Thu, 08 Oct 2009 15:48:34 +0000

写了一个幻灯片播放器，是用纯jQuery+CSS写的，如果你不喜欢Flash幻灯片播放器可以试试这个。其主要特点是高度宽度可以自由重新设定，幻灯片的数量也可以自由增减（当然也不能过于离谱..），使用jquery+css节省了代码，使载入更迅速..等等..

效果是这样的，请点击这里。

安装方法很简单，首先在合适的地方（你想要插入幻灯片的地方）插入以下代码：

然后找到你的header.php（假设你使用WordPress），在/head标签之前添加如下代码：