applezqp

终于完成了自己的wordpress主题，历时三个星期之久。Orz……难道是一个旷世之作？No，正如眼前所看到的，很简陋。为什么这么久呢？不是找托词，我需要总结。一方面，是自己的完美主义作祟，力求完美，但能力又无法达到。这样的状况多次令我想放弃，庆幸自己坚持。在无法到底完美的时候，需要有一个雏形作为基础来逐步改进。“罗马不是一日建成的”。另一方面，是执行力的问题。有时候我并不缺乏计划，而是缺乏执行力。执行力啊，执行力……

如何制作wordpress主题呢？再次强调网上资源的丰富性。

入门

作为入门强烈推荐那么你想创建WordPress主题吗？，你甚至不需要html,css,php的知识。但个人觉得最好有点这些语言的基础。

工具书

首推当然是官方的WordPress模板标签函数参考，英文版的，难度不是很大，但有些地方还是比较疑惑，提高英文。帕兰映像中的WordPress模板标签(函数)参考指南提供了丰富的工具书。

参考

又是帕兰映像，8款WordPress主题框架和初学者资源。其中，试用了Hybird和Sandbox。Hybird比较复杂，据说是有利于扩展的。主要参考了Sandbox，但是不太喜欢它的类名，亦或是我没有领略到其精髓。如果不自己写PHP，这个空白的框架是十分有利于设计的，别人如是说。

转自：http://www.cnblogs.com/cloudgamer/archive/2009/06/21/1369979.html

本文只摘取了文章重要的部分，详情请看原文。

暂时无法将演示代码直接插入页面中，无奈。

效果说明

Linear：无缓动效果；

Quadratic：二次方的缓动（t^2）；

Cubic：三次方的缓动（t^3）；

Quartic：四次方的缓动（t^4）；

Quintic：五次方的缓动（t^5）；

Sinusoidal：正弦曲线的缓动（sin(t)）；

Exponential：指数曲线的缓动（2^t）；

Circular：圆形曲线的缓动（sqrt(1-t^2)）；

Elastic：指数衰减的正弦曲线缓动；

Back：超过范围的三次方缓动（(s+1)*t^3 – s*t^2）；

Bounce：指数衰减的反弹缓动。

每个效果都分三个缓动方式（方法），分别是：

easeIn：从0开始加速的缓动；

easeOut：减速到0的缓动；

easeInOut：前半段从0开始加速，后半段减速到0的缓动。

其中Linear是无缓动效果，没有以上效果。

参数说明

t: current time（当前时间）；

b: beginning value（初始值）；

c: change in value（变化量）；

d: duration（持续时间）。

算法

同jquery-easing相同，只是写法不同。算法才是灵魂啊。

/*
算法来源：http://www.robertpenner.com/easing/
*/
var Tween = {
	Linear: function(t,b,c,d){ return c*t/d + b; },
	Quad: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t + b;
		},
		easeOut: function(t,b,c,d){
			return -c *(t/=d)*(t-2) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t + b;
			return -c/2 * ((--t)*(t-2) - 1) + b;
		}
	},
	Cubic: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return c*((t=t/d-1)*t*t + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t + b;
			return c/2*((t-=2)*t*t + 2) + b;
		}
	},
	Quart: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return -c * ((t=t/d-1)*t*t*t - 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
			return -c/2 * ((t-=2)*t*t*t - 2) + b;
		}
	},
	Quint: {
		easeIn: function(t,b,c,d){
			return c*(t/=d)*t*t*t*t + b;
		},
		easeOut: function(t,b,c,d){
			return c*((t=t/d-1)*t*t*t*t + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
			return c/2*((t-=2)*t*t*t*t + 2) + b;
		}
	},
	Sine: {
		easeIn: function(t,b,c,d){
			return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
		},
		easeOut: function(t,b,c,d){
			return c * Math.sin(t/d * (Math.PI/2)) + b;
		},
		easeInOut: function(t,b,c,d){
			return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
		}
	},
	Expo: {
		easeIn: function(t,b,c,d){
			return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
		},
		easeOut: function(t,b,c,d){
			return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
		},
		easeInOut: function(t,b,c,d){
			if (t==0) return b;
			if (t==d) return b+c;
			if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
			return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
		}
	},
	Circ: {
		easeIn: function(t,b,c,d){
			return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
		},
		easeOut: function(t,b,c,d){
			return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
		},
		easeInOut: function(t,b,c,d){
			if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
			return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
		}
	},
	Elastic: {
		easeIn: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		},
		easeOut: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
		},
		easeInOut: function(t,b,c,d,a,p){
			if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
			if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
			return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
		}
	},
	Back: {
		easeIn: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158;
			return c*(t/=d)*t*((s+1)*t - s) + b;
		},
		easeOut: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158;
			return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
		},
		easeInOut: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158;
			if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
			return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
		}
	},
	Bounce: {
		easeIn: function(t,b,c,d){
			return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
		},
		easeOut: function(t,b,c,d){
			if ((t/=d) < (1/2.75)) {
				return c*(7.5625*t*t) + b;
			} else if (t < (2/2.75)) {
				return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
			} else if (t < (2.5/2.75)) {
				return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
			} else {
				return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
			}
		},
		easeInOut: function(t,b,c,d){
			if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
			else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
		}
	}
}

兼容：FF3.0, IE 6~8, safari 4.0, Opare 9.64, chrome 2.0

由于工作的需要，自己写了一个日期控件，开始想的很简单，在后期的使用过程中出现越来越多的BUG。近期对这个控件进行了改进。

一，计数月的天数

方法1

这是比较传统的方法，列出每个月的天数，其中二月是通过判断闰年来确定的。

var mon = new Array(12);
mon[0] = 31; mon[1] = 28; mon[2] = 31; mon[3] = 30; mon[4]  = 31; mon[5]  = 30;
mon[6] = 31; mon[7] = 31; mon[8] = 30; mon[9] = 31; mon[10] = 30; mon[11] = 31;
if (0==year%4&&((year%100!=0)||(year%400==0))){
   mon[1] = 29;
}

方法2

在JS中，月是以0开头的。而一个月的第0天是上一个月的最后天，因此计算2009年8月有几天如下：

var num = new Date(2009, (7+1), 0).getDate();

二，document.body & document

日期控件中点击除输入框、按钮和日期控件之外的地方，日期控件会关闭。开始是在documnet.body上绑定onclick事件。在演示页面中，body的高度远小于浏览器的可视区域（浏览器全屏的情况下），那么用户点击非body区域是无法关闭日期控件的。因此后把onclick事件绑定在document。

document.onclick = function(e){
		var e = e || window.event;
		var srcElement = e.srcElement || e.target;
		if( srcElement != outTxt && srcElement != outBtn && srcElement.className != "btn" ){
			calHide();
		}
	};

三，性能

在后期中发现原先控件在性能发面有点低（我之前在写JS中很少考虑性能，不过这次是太明显了）。在点击上一个月（年）或下一个月（年）都有一定的耗时，这是因为点击这些按钮都要重新生成当前月的日期。原先的做法是重新生成所有的a元素包括其中的内容；后期的做法是在初始化的时候生成a元素，刷新月份的时候只是刷新a标签中的内容。其中发现，FF不支持innerText，注意一下。

PS:在此谢谢小强同学的建议，虽然他很鄙视我的逻辑。

//构造函数
function myConstructor(message){
      this.myMessage = message;
//私有属性
      var separator = '-';
      var myOwner = this;
//私有方法
function alertMessage(){
      alert(myOwner.myMessage)
}
//特权方法（也是共有方法）
this.appendToMessage = function(string){
     this.myMessage += separator + string;
     alertMessage();
}
}
//公有方法
myConstructor.prototype.clearMessage = function(string){
      this.myMessage = ' ';
}
//静态属性
myConstructor.name = 'Jeff';
//静态方法
myConstructor.alertName = function(){
        alert(this.name);
}

未完待续……

浏览器只有增加，没有减少，无奈！虽然所有人都希望IE6能成为历史，但我们应该还要面对它好几年吧。在我现在的工作中，只需要测试IE6~8, FF，因此我对OP, Sa, CH测试的很少，有时间的话，确实应该测试的全面一些。对CSS Hack的总结的不是很全面，实在很繁琐，列出常用的吧。

selector{
color:red;
[;color:red;]/*Sa, CH*/
color:red\0;/*IE8*/
*color:red;/*IE7-*/
_color:red;/*IE6*/
}

html* selector{
backgrond-color:red;/*Sa IE7 OP*/
}

*+html selector{
backgrond-color:red;/*OP9.6-*/
*backgrond-color:red;/*IE7*/
}

*html selector{
backgrond-color:red;/*IE6*/
}

html*~/**/body selector{
backgrond-color:red;/*IE8*/
}

@media all and(min-width:0){
selector{color:red;}
}/*only Opera */

@media all and (min-width:0){
selector{
color:red; /*Opera,Sa3.2.3- */
html* selector{color:red; /*Sa3.2.3-*/}
}
}

IE的if条件Hack

<!--[if IE]> Only IE <![endif]-->
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
<!--[if lt IE 6]> Only IE 6- <![endif]-->
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
<!--[if lte IE 7]> Only IE 7/- <![endif]-->

相关阅读：

1. CSS Hack 汇总快查
2. [原][更新]最新CSS兼容方案
3. Goodbye to CSS Hack
4. Ajaxian » CSS Browser Hacks