吞吴

我个人非常喜欢iOS系统中的开关按钮效果。相比于普通的checkbox，这种带有滑动效果的开关按钮显得更加美观，体验也更好。刚好最近在开发围脖贴，于是想在一些要用到checkbox的页面中使用类似iPhone/iPod/iPad中的开关按钮效果。

当然首先是寻找现成的实现，可能是我太土鳖了，不知道这个东西叫做 toggle switch，结果一直搜 toggle button，得到的结果都不是我想要的。于是索性自己实现了一个。（效果，Github Repo）

下面简单记录一下实现的思路。

背景动画

实现的重点在状态的切换过程，需要产生一个平滑的滑动效果。于是我想，制作一个左侧是开启，右侧是关闭的图片，作为背景，然后在切换的时候给背景做一个动画。于是产生了下图。

为背景作动画用到了Backgroud-Position Animation Plugin。仅使用一个开启/关闭联合起来的图是不够的，因为按钮有一个圆角，如果始终使用联合图的话，在一个开启状态下，右上角和右下角会显示灰色，在关闭状态下，左上角和左下角会显示蓝色，很不自然。所以，需要在动画结束后，把背景切换到单独的开启/关闭按钮的位置。

状态保存

考虑到这个开关按钮基本是放在一个form里面用的，因此使用一个hidden的input元素来保存它的状态。每次开关被单击，就改变input的值。这样以来，就很容易把开关状态通过表单提交到后台。

自定义事件

很多时候需要根据开关按钮的状态进行编程，因此添加了两个自定义事件 on 和 off，分别表示按钮被开启和关闭。可以使用jQuery的bind方法来添加事件处理函数。

成果

感兴趣的童鞋，可以 点击这里查看效果，或者在这里下载。

今天搞定了Proposal Tool v2.0的PDF报表生成模块。简单总结一下我所使用的解决方案。

需求

需求是要根据用户选择的历史数据，动态的生成一系列的折线图、饼图、柱状图，然后将这些图表整合到一个PDF文件中。PDF中的文本也是动态的和可修改的。

工具

开发语言使用PHP；图表生成工具使用了强大的pChart库；生成PDF的库选择了dompdf。

pChart将直接生成图片文件，很方便的就可以作多种用途。(pChart和jqPlot的比较，可参考我之前的文章：《图表生成工具pChart和jqPlot》)

dompdf简单易用，可直接将HTML转换成PDF。API十分简洁。不过dompdf有一些限制，它不支持position:relative/absolute, 不支持嵌套表格，不支持float等等(其他限制参考dompdf官方网站)。所以布局比较复杂的页面用它来处理会比较吃力。

解决思路

分3步解决

1. 使用pChart将数据转换成图表，并存储为图片文件，保存在临时存储区中
2. 使用PHP的模板引擎定制HTML，并在其中引用上一步中生成的图片文件
3. 使用dompdf将上一步中的HTML转换为PDF文件，删除临时存储区中的图片文件

效果图

PDF Report Generated by pChart and dompdf

之前开发喜乐喜乐网的后台统计功能的时候，一直在用jqPlot，效果很不错，我挺喜欢的。最近手头的一个项目要求将生成的图表嵌入到PDF中，jqPlot就无能为力了。于是我不得不转而寻找其他的解决方案，这才发现了pChart。感觉只有一个，那就是相见恨晚啊。

下面简单对比一下这两个图表生成工具。

成像风格

先上两个图看看效果

pChart Showcase

jqPlot Showcase

在图像风格上，pChart更加倾向于秀气，线条比较纤细；而jqPlot则显得比较大气，线条结实稳重。pChart内置了边缘防锯齿的功能，阴影、透明等feature一应俱全，成像风格很漂亮，我个人比较偏爱之。

适用场景

当然，图像的风格只是外在的表象，这二者最重要的区别在于，一个是在服务器端渲染图像，另外一个则是在浏览器端。

因此，pChart要占用服务器的CPU资源，当然，也要占用硬盘空间，如果你要把图表通过web页面展示的话，还要占用带宽资源。因此，pChart并不适合于用在仅需通过web页面显示图表的情境下，在这方面，jqPlot要更有优势一些，因为它是完全通过Javascript在浏览器端作图像渲染，不需要占用服务器端的CPU和硬盘，带宽的消耗也偏小，因为仅需传输文本数据而不是图片。

反过来，当你的图片不仅仅是要在浏览器上显示，还要作其他用处，比如我现在面临的情境，需要把图表嵌入到PDF文件中，那么pChart就将是不二之选了。pChart还内置了缓存机制pCache，用以节约CPU资源。一定程度上减少了CPU的消耗。

API易用程度

由于图表中需要控制的元素特别的多，因此API不可避免的会比较复杂一点，总体上来看，由于jqPlot中可以使用json，API上相对会比较简洁一些。而pChart则略逊一筹。

pChart

jqPlot

总结

曰：悠悠长路暂别过，漫漫征途再启程

程序设计与实践2顺利结课了。今天下午跟学生们唠叨了一下项目开发的一些琐事，估计学生们也是云里雾里的。以后这种不伦不类的说教得完全抛弃了，原本以为自己能真正的言之有物的，结果发现离开了代码和项目的土壤，扯这些闲淡实在是不给力。

总体上来讲这学期的课程效果还算是可以，几个参与项目的学生都还是令人满意的。而且还有王芳同学，这个所有作业全部完成的女生。应该说课程的基本目标是达到了。但是还是有很多的遗憾，在此罗列一下，下学期要有针对性的改进。

一、作业还不够精

我非常赞同sunner的“淡讲课，精作业”的理念，在这学期得课程里也在尝试去模仿，不过看起来现在还是有点蹒跚学步，不够老道。一共布置了3次作业，一个HTML+CSS的作业，一个算命程序，一个Mini WOW。前两次作业的提交情况还是让人满意的，效果也不错，不过最后一次的作业效果不好。

作业的几个问题：量小、难度低、没有体系。这些都要好好的加强一下。如果作业不够有挑战性，就无法显著的提升教学效果。本学期的作业还是侧重于让学生能够完成，免得太难吓跑了大家。下个学期应该适当的调整。目前在跟老杨讨论建立习题库的想法。

二、课堂讲授内容不够充实

有几节课的内容太过干瘪，言之无物。没有能够传达尽量多的信息量。课堂也显得枯燥无味，与我最开始“有意思”的定位相去甚远。在这一点上，可能还要多下一点功夫。课堂上的内容应该既有趣，又有代表性。下学期会考虑把本学期的学生遇到的问题整理汇总一下，作为素材用到下学期的讲授中。结合实例进行剖析，不能再这样光靠唾沫星子作战了。

三、知识缺乏系统性和条理性

原本计划本学期的课程要把Web开发的入门步骤整理一个有条理的系统出来，但是由于种种原因这件事情到现在还没有完成。尽管我自己已经在脑海中反复的构思过这个东西，但一直没能落实成文字和一个可执行的规划出来。这件事情一定得在下学期开学前搞出来。否则这个硬伤肯定会影响到下学期的教学效果。

曰：生前何必久睡，死后自当长眠

给PureWeber Blogs设计了一个简单的首页，计划明天把它上上去。

之前的计划没有彻底的执行，Proposal Tools的工作还剩下一大堆。惭愧的是今天下午又偷懒睡了一觉。勤奋还不够，毅力仍欠缺。

最近在给喜乐喜乐网的后台添加一系列的统计功能，遇到很多需要按条件计数的情况。尝试了几种方法，下面简要记录，供大家参考。

问题描述

为使讨论简单易懂，我将问题稍作简化，去掉诸多的背景。

从前有一个皇帝，他有50个妃子，这些妃子很没有天理的给他生了100,000个儿子，于是，皇帝很苦恼，海量的儿子很难管理，而且，他想知道每个妃子给他生了多少个儿子，从而论功行赏，这很难办。于是，皇帝请了一个程序员帮他编了一个程序，用数据库来存储所有的儿子的信息，这样就可以用程序来统计和管理啦。

数据库的结构如下：

id	皇子的唯一编号
mother	皇子母亲的唯一编号

皇帝把妃子分成了两个等级，天宫娘娘(编号小于25)和地宫娘娘(编号大于等于25)，他想知道天宫娘娘们和地宫娘娘们的生育能力孰强孰弱。于是，程序员开始写SQL Query了。

方法1：使用GROUP BY

SQL Query

执行结果

在100,000行数据上的运行时间：0.0335 秒

分析

这种GROUP BY方法的最大问题在于：无法区分所得到的结果。这两个数字哪一个是天宫娘娘们所生的皇子数，哪一个是地宫娘娘们所生的皇子数呢？不知道。所以，尽管它统计出了总数，但是没有什么意义。

因此，为了区分统计结果，必须要把条件 mother > 24 也作为一个字段在结果集中作为一个字段体现出来，修改后的sql如下：

执行结果

条件表达式作为字段时，该字段的值就是该条件表达式的值，因此，对应我们的例子，type = 1 也就是表示 mother > 24 的值为1，因此，第二行中的数字代表地宫娘娘们所生的皇子数。

经过修改后，我们看出，天宫娘娘们略胜一筹。

优缺点

缺点是显而易见的，由于使用了条件表达式作为分组依据，它只能做二元的划分，对于要分成多类进行统计的情况不能够胜任。比如要分别统计1~10号、11~24号，25号~50号妃子的产子数，就无法实现了。

另外，由于使用了GROUP BY，因此涉及到排序，执行时间上要更长。

我暂时没有发现这种方法的优点。

方法2：使用嵌套的SELECT

使用嵌套的SELECT也可以达到目的，在每个SELECT子句中统计一个条件下的数据，然后用一个主SELECT把这些统计数据整合起来。

SQL Query

执行结果

在100,000行数据上的运行时间：0.0216 秒

分析

这种嵌套SELECT的方法非常直观，就是分别统计各个条件下的数值，最后进行汇总，通俗易懂，跟自然语言没啥区别了。

优缺点

优点就是直观，而且速度也比GROUP BY要快。虽然是3条SELECT语句，看起来比GROUP BY的方案多了2条语句，但是它不涉及到排序，这就节省了很多时间。

缺点可能就是语句稍多，对语句数量有洁癖的同学可能会比较不舒服。

方法3：使用CASE WHEN

CASE WHEN语句的功能很强大，可以定义灵活的查询条件，很适合进行分类统计。

SQL Query

执行结果

在100,000行数据上的运行时间：0.02365825 秒

分析

此方法的关键在于

这里的COUNT和CASE WHEN联合使用，做到了分类计数。先使用CASE WHEN，当满足条件时，将字段值设置为 1， 不满足条件时，将字段值设置为NULL，接着COUNT函数仅对非NULL字段进行计数，于是，问题解决。

优缺点

优点嘛，此方法也不涉及到排序，因此运行时间上与方法2相当，SELECT语句减少到了 1 条。

缺点就是语句比较长，对语句长度有洁癖的同学可能会比较不舒服。

总结

对于确定分类的按条件计数，可以尽量不用GROUP BY，从而避免排序动作，加速Query的执行。

如果需要根据某个字段的值进行分类，而该字段的值是可变的，比如皇帝要统计每一个妃子的产子数，而他可能不停的再娶很多妃子，这种情况下，使用方法2和方法3就不太灵光了，还是使用一个GROUP BY来得简单便捷。

最近在向服务器上新添加一个网站的时候遇到了一个问题，症状是虚拟主机之间出现了混淆，用某个虚拟主机的域名却访问到了另外一个虚拟主机的内容。经排查发现是一个低级错误，特此记录。

问题出在ServerName和ServerAlias的设置上。先看有问题的配置：

ServerName sub1.domain.com
ServerName sub2.domain.com
DocumentRoot /var/www/sub/
# other settings

ServerName doc.domain.com
DocumentRoot /var/www/doc/
# other settings

导致问题的原因是第一个VirtualHost的ServerName出现了两次，使用ServerAlias替换第二个ServerName之后，问题解决。

ServerName sub1.domain.com
ServerAlias sub2.domain.com
DocumentRoot /var/www/sub/
# other settings

前些日子发了一个Wordrpess中文包，但没有对如何发安装和配置进行详细的说明。有几个网友给我发信询问关于如何安装的问题，本篇文章详细描述的安装过程，希望对朋友们有帮助。

第一步：下载WordPress中文包。

第二步：把下载得到的zh_CN.mo文件拷贝到wordpress安装目录下的 wp-includes/languages/ 目录中。如果这个目录不存在则创建之。

第三步：修改配置文件 wp-config.php，此文件位于wordpress安装根目录中。将以下这一行：
[php]define (‘WPLANG’, ”);[/php]
改为：
[php]define(‘WPLANG’, ‘zh_CN’);[/php]
注意不要把文件的后缀 .mo 带上。

以上三步过后，你的wordpress就已经中文化了，怎么样？是不是很简单？

如果您在配置的过程中遇到什么问题，可以给我留言或者发信。另外，如果发现本文有错误之处，请及时告诉我，我会及时改正。

在本节课中，我们来研究一下真正重要的问题：你如何让你的博客的内容显示出来？然后，你得添加更多的层来把内容和我们昨天已经调用过的文章标题分隔开来。
（注意：昨天的课程十分十分重要，如果你没有完全理解我昨天叙述的内容，你得再重新看一遍，然后可以向我提问，以便弄清楚它。）

第一步：
在文章标题的代码下面输入：.

保存并刷新你的浏览器，你应该能够看到在标题下面有一些文字。

刚才发生了什么？为什么会这样呢？
你使用PHP函数the_content()调用了文章的内容。现在你的文章内容只是一行文本，一直延伸到屏幕的右边，这是因为你还没有定义它的显示样式。还记得style.css文件吗？在以后的课程中我们将使用它来控制所有东西的显示方式。

昨天我让你们多发几篇文章来看看多篇文章是什么样子，如果你还没有发，那么现在就发吧。发完之后回到首页，多篇文章应该是这个样子的：

继续。。。

回到浏览器，点击查看-原代码。会弹出一个代码窗口。如果你用的是IE，那么弹出的会是一个记事本窗口。

我用的是FireFox，下面是在FireFox中的样子：

注意到页面源代码与你的index.php文件的不同了吗？所有你的图片、文字和其他东西，一切你在源代码中看到的都是由the_content()函数调用的。很有用，不是吗？如果没有博客程序，尤其是WordPress的模板系统，你就得自己编写所有的代码。

还有，注意一下我用圈圈起来的p标签，他们并没有在你的index.php文件中出现，但却出现在你的源代码窗口中。

那么这些P标签是为什么又是怎么加上去的呢？
为什么：在输入你的内容的时候，每个空行代表一个段落，你需要一种方式来把这种段落的划分显示出来。每个段落处于一对P标签中。这样就在段落之间产生了你所看到的空白。
怎样加上去：这很简单，WordPress自动为你生成了P标签。

第二步：
用一个具有class=”entry”的层来包含the_content()，像这样：
[html]

[/html]
这时的代码应该是：

保存并刷新浏览器，如果你查看源代码，你会发现你的每个文章内容条目都被一个class=”entry”的层包围着。

为什么这么做呢？
第一个原因，这样做可以让你把文章标题和文章内容区别开。第二个原因，是为了让你可以订制你的style.css文件。如果你愿意的话，你可以在不改变其他任何东西的情况下修改文章内容的样式。

id与class有什么区别：
到现在为止，你一直使用id来给层命名，还记得id=”header”吧。那么id与class有什么不同呢？id是唯一的，而class不是。如果你看看你的源代码就会发现，只有一个层id=”header”，只有一个层id=”content”,但有多个层class=”entry”。

那么header和content可不可以也用class呢？当然可以。

记住一点，你不能多次使用一个id。比如你不能在一个页面上写入两个id=”header”的层。如果你想反复使用同一个样式，那么就用class。

第三步：
把文章标题和文章内容用一个class=”post”的层包围起来。[html]

[/html]
（你可以给id和class用任何名字，你甚至可以用你喜欢的食物来命名他们，但是post和entry既简短有容易记，不是吗？）
现在的代码是这样：

下面是组织过后的版本：

我使用制表符来产生缩进。为什么要这么做呢？那是因为你的代码不像我的截图，没有红色和绿色的高亮显示，你需要一种方式来跟踪你的代码，使用缩进以后，你就可以很容易的分辨出哪个</div>与哪个<div>相对应。

保存并刷新你的浏览器来查看源代码的改变。

为什么要用另一个层来包围文章标题和文章内容呢？
你添加了class=”entry”层 来区分文章标题和文章内容，而你添加class=”post”的层则是为了把文章与文章区分开来。

这些就是今天的内容了。可能有点难懂，所以如果你不懂得话一定要问我。明天我们讨论一下日期、分类和评论。

如果你在我的教程中发现了错误，请一定尽快告诉我，以便我进行修改。还有，现在我们的进度如何？我是否需要讲的再详细一些呢？这个教程是不是太长了呢？请告诉我。

点击这里来从头阅读WordPress主题编写教程。

主循环，调用了你的博客的内容条目。它是最为重要的PHP代码段。现在你应该已经知道在本节之前应该对我的系列教程做什么了吧，现在开始。先去做那件该做的事，然后我们来总结一下我们现在学过了什么东西。

到现在为止，你已经学到：

原则、结构和WordPress主题的分级制度
你的每一个页面是由什么组成的
如何安装你的主题
如何调用你的博客标题并把它转化成一个链接
如何调用你的博客的描述并把页头与其实内容分隔开来
现在我们开始第五课：
现在你应该已经开启了Xampp Control，打开了主题文件夹，将浏览器定位到 http://localhost/wordpress, 并已经在记事本中打开了index.php文件。该文件中应该有这样的内容：

记住，要想学会，请自己输入代码，而不要拷贝。

第一步：
在页头区域下面添加一个DIV（看不见的盒子）。将其ID设为”content”，像这样：

[html]

[/html]

这个层（DIV）是用来干什么的呢？它是用来把你的内容与接下来的内容（像侧边栏、页脚）分隔开来的。

第二步：

在content层中加入以下代码。按照你看到的原样输入这些代码，如果出现错误，请重新输入。

[php]

[/php]

从现在起，对你来说，每一个代码段是做什么的与它具体是怎么工作的相比，前者更好理解。刚才你输入的就是WordPress中的主循环。在我作进一步解释之前，你的代码应该已经是这样了：

你应该已经注意到，我把内容层中的代码都进行了缩进，而且常常输入空行。这是为了方便组织代码。现在单单手动输入代码已经不够了。你还得组织它们，使得你在一段时间后还知道每样东西在哪，有哪些代码与它相关。对于代码的缩进，最好用制表符而不是空格。

刚才发生了什么？

if(have_posts()) – 检查你是否有post
while(have_posts()) – 如果有post，只要还有，就执行the_post()
the_post() – 调用要显示的post
endwhile – 遵循原则#1，这个是用来关闭while()的
endif – 关闭if()
注意：不是每一个代码段都需要两个部分来开始和结束。有一些可以自关闭，这就解释了 have_posts() 和 the_post(); 函数(前者无分号，后者有分号)。因为the_post(); 在if()和while()的外面，它就需要用它自己的分号来结束它自己。（这里作者所说的“关闭”和“自关闭”应该是XHTML标签中的术语，译者认为并不适用于对PHP代码的解释。）

第三步：

在前面的课程中，你学会了如何用 bloginfo(‘name’) 来调用你的博客的标题。现在，你将学习如何在主循环中调用文章标题。

在the_post();?> 后面、 前面输入：

保存并刷新浏览器。你会发在你的博客的描述后面紧跟的是 Hello World。默认情况下，你的博客只有一篇文章。对于我来说，我的测试博客有多篇文章，所以我这里会显示多个文章标题。由于我的文章标题是相同的，而且在教程的本部分并没有将它们组织起来，它们看起来就像是一长串的 Hello World。

第四步：

把你的文章标题转换成链接。还记得怎么把博客标题转换成链接的吗？这里是一样的。在 两端加上<a href=”#”>和</a>。

保存并刷新。现在你的文章标题是链接形式了，但它们没有链接到任何地方。为了让每一个标题指向它所对应的文章，你需要用 the_permalink() 替换 #。

[php]<a href="”>[/php]

the_permalink() 是一个PHP函数，用来调用每篇文章的地址。保存并刷新浏览器。如果你只有一个 Hello World 标题，把鼠标停在上面，你会发现状态栏中的地址已经不是 http://localhost/wordpress/#了。

如果你有不只一个标题链接，你会发现每一个标题链接到不同的页面。但我们的标题链接还在同一行里。为了把它们分开，在你的链接代码的两端加上

和

。

[php]

<a href="”>

[/php]

还记得我们在博客标题中用到的h1标签吗？那是你的页面的标题。h2用于子标题。现在你的文章标题都是子标题，每一个都占用独立的一行。保存并刷新浏览器以观察改变。

本节课到此结束。你应该已经掌握：

……

注意：如果你还没有掌握上述内容，发几个测试文章来测试一下你的主题。定位到： http://localhost/wordpress/wp-login.php。登陆，点击 Write 标签，请确定你正在看 Write Post标签，写一个post, 然后重复这一动作。你可以像我一样给他们起同一个名字 Hello World，或者你也可以给它们起不同的名字。