<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Hiro&#039;s Blog</title>
	<atom:link href="http://www.ihiro.org/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ihiro.org</link>
	<description>添加弹框Ajax加载catgory、tag的最新10篇文章！</description>
	<lastBuildDate>Tue, 09 Mar 2010 05:23:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>资讯:2010年03月编程语言排行榜</title>
		<link>http://www.ihiro.org/information-march-2010-programming-language-list</link>
		<comments>http://www.ihiro.org/information-march-2010-programming-language-list#comments</comments>
		<pubDate>Tue, 09 Mar 2010 05:22:51 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/information-march-2010-programming-language-list</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/2010.03.language-logo.png" alt="" title="2010.03.language-logo" width="100" height="100" class="alignleft size-full wp-image-1152" />
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站今天更新了最新10年02月份的编程语言排行榜。</p>
<p>这个月的编程语言排行榜比较平静，没有太大的变化。PHP仍旧保持的继续上升的势头，市场占有率继续增加。另外升的比较明显是的数学建模编程语言Matlab，上升了4个排名。就市场占有率来看，貌似微软的所有编程语言都在走下坡路，一直在少量地减少。</p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站今天更新了最新10年03月份的编程语言排行榜。</p>
<p>这个月的编程语言排行榜比较平静，没有太大的变化。PHP仍旧保持的继续上升的势头，市场占有率继续增加。另外升的比较明显是的数学建模编程语言Matlab，上升了4个排名。就市场占有率来看，貌似微软的所有编程语言都在走下坡路，一直在少量地减少。</p>
<h3>2010年03月份编程语言前20名：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/2010.03.language-no.png" alt="" title="2010.03.language-no" width="562" height="567" class="aligncenter size-full wp-image-1153" /></p>
<h3>2010年03月份编程语言前10名的走势图：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/2010.03.language-trend.png" alt="" title="2010.03.language-trend" width="636" height="479" class="aligncenter size-full wp-image-1154" /></p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/information-march-2010-programming-language-list/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CSS:CSS3基础（附图）</title>
		<link>http://www.ihiro.org/css3-basic</link>
		<comments>http://www.ihiro.org/css3-basic#comments</comments>
		<pubDate>Mon, 08 Mar 2010 02:41:14 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[译文]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/css-css3-based-with-photos</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-basics.gif" alt="" title="css3-basics" width="130" height="115" class="alignleft size-full wp-image-1138" />
<p>今日在<a href="http://www.webdesignerwall.com/" rel="external">Web Designer Wall</a>博客上看到这篇介绍css3基础的博文，文章其实很普通，关键喜欢他配上了截图，看起来就更加明了。便花了点时间整理后发表出来与大家分享一下！</p>
<p>文中主要介绍了四个css3高级属性，也是最最常用的四个css3属性。</p>
<p>最后，css3高级属性远远不值文中的这些，文中讲到的是一些基础的，也是使用最多的，为了给用户带去更多的美好体验，努力学透css吧！</p>
<p>本文翻译自：<a href="http://www.webdesignerwall.com/tutorials/the-basics-of-css3/" rel="external">Web Designer Wall -- The Basics of CSS3</a></p>]]></description>
			<content:encoded><![CDATA[<p>今日在<a href="http://www.webdesignerwall.com/" rel="external">Web Designer Wall</a>博客上看到这篇介绍css3基础的博文，文章其实很普通，关键喜欢他配上了截图，看起来就更加明了。便花了点时间整理后发表出来与大家分享一下！</p>
<p>文中主要介绍了四个css3高级属性，也是最最常用的四个css3属性。</p>
<h3>1.RGBA</h3>
<p>RBGA是用于css的background属性，前三个参数是RBG颜色值，最后一个参数是透明度设置。<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-rgba.gif" alt="" title="css3-rgba" width="470" height="276" class="aligncenter size-full wp-image-1143" />RGBA也可以使用在css中与颜色相关的所有属性中，如color,border-color,background-color,shadow-color等。<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-rgba2.gif" alt="" title="css3-rgba2" width="470" height="303" class="aligncenter size-full wp-image-1144" /></p>
<h3>2.Text Shadow</h3>
<p>text-shadow的设置值是由x-offset, y-offset, blur, color四个参数组成。<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-text-shadow.gif" alt="" title="css3-text-shadow" width="470" height="276" class="aligncenter size-full wp-image-1145" />若给x-offset设置一个负值，则阴影偏向左边；若个y-offset设置一个负值，则阴影偏向顶部；当然你也可以使用RGBA来设置第四个参数color。<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-text-shadow-example2.gif" alt="" title="css3-text-shadow-example2" width="470" height="114" class="aligncenter size-full wp-image-1146" />你也可以给text-shadow设置一系列的值（用逗号隔开）。下面的图片展示了两个值来设置一个单词的印刷效果（1px向上，1px向下）：<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-text-shadow-example3.gif" alt="" title="css3-text-shadow-example3" width="470" height="114" class="aligncenter size-full wp-image-1147" /></p>
<h3>3.Border Radius</h3>
<p>对border radius的记忆方法就和padding、margin一样(如： border-radius: 20px)。为了达到多浏览器兼容，需要在该属性前加上“-moz-“用于火狐浏览器、加上”-webkit-“用于谷歌和苹果浏览器。（IE浏览器不支持此CSS3高级属性）<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-border-radius.gif" alt="" title="css3-border-radius" width="470" height="340" class="aligncenter size-full wp-image-1139" />你也可以分别设置四个角的圆角直径，火狐浏览器与苹果（谷歌)浏览器的设置属性有所差别，看图：<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-border-radius-corners.gif" alt="" title="css3-border-radius-corners" width="470" height="460" class="aligncenter size-full wp-image-1140" /></p>
<h3>4.Box Shadow</h3>
<p>box shadow属性设置值的构成与text-shadow是一样的，都是有四个属性：x-offset, y-offset, blur, color组成。<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-box-shadow.gif" alt="" title="css3-box-shadow" width="470" height="353" class="aligncenter size-full wp-image-1141" />当然，box-shadow也可以用一系列的值来设置属性，如：</p>

<div class="wp_codebox"><table><tr id="p11481"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p1148code1"><pre class="css" style="font-family:monospace;">-moz-box-shadow<span style="color: #00AA00;">:</span>
		<span style="color: #933;">-2px</span> <span style="color: #933;">-2px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">,</span>
		<span style="color: #933;">2px</span> <span style="color: #933;">2px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc00cc;">#bb9595</span><span style="color: #00AA00;">,</span>
		<span style="color: #933;">2px</span> <span style="color: #933;">4px</span> <span style="color: #933;">15px</span> rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> .3<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span></pre></td></tr></table></div>

<p>效果如下图：<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/03/css3-box-shadow2.gif" alt="" title="css3-box-shadow2" width="470" height="278" class="aligncenter size-full wp-image-1142" /></p>
<p>最后，css3高级属性远远不值文中的这些，文中讲到的是一些基础的，也是使用最多的，为了给用户带去更多的美好体验，努力学透css吧！</p>
<p>本文翻译自:<a href="http://www.webdesignerwall.com/tutorials/the-basics-of-css3/" rel="external">Web Designer Wall &#8212; The Basics of CSS3</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/css3-basic/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>jQuery:丰富效果的Flash图片播放（JS重写版）</title>
		<link>http://www.ihiro.org/a-rich-picture-effect-flash</link>
		<comments>http://www.ihiro.org/a-rich-picture-effect-flash#comments</comments>
		<pubDate>Fri, 26 Feb 2010 07:17:13 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[cases]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1129</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/flashImgPlay-logo.jpg" alt="" title="flashImgPlay-logo" width="100" height="100" class="alignleft size-full wp-image-1132" />
<p>大家看到这个图片播放效果的演示后一定觉得很熟悉吧，因为该效果使用的地方是在太多了。但凡比较大型的网站上都有图片播放的效果，有的是单一的图片切换、有的是图片渐入渐出、还有的就是左滑右滑。而我演示的这个版本则是播放效果比较丰富的，所以也是使用比较广泛的。</p>
<p>在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果，那个时候我的Js不好，纯粹是拿了代码后套进内容，然后放到网上去就万事OK了。现在不一样了，JS编程熟悉了，jQuery库更是熟悉，便觉得原始的代码怎么看都不爽，昨天终于将该效果的JS代码重写了一下，贴出来与大家分享！</p>]]></description>
			<content:encoded><![CDATA[<p>大家看到这个图片播放效果的演示后一定觉得很熟悉吧，因为该效果使用的地方是在太多了。但凡比较大型的网站上都有图片播放的效果，有的是单一的图片切换、有的是图片渐入渐出、还有的就是左滑右滑。而我演示的这个版本则是播放效果比较丰富的，所以也是使用比较广泛的。</p>
<p>在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果，那个时候我的Js不好，纯粹是拿了代码后套进内容，然后放到网上去就万事OK了。现在不一样了，JS编程熟悉了，jQuery库更是熟悉，便觉得原始的代码怎么看都不爽，昨天终于将该效果的JS代码重写了一下，贴出来与大家分享！</p>
<p>先来看看重写后的播放效果吧！</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/flashImgPlay/flashImgPlay.rar" class="download">download</a> <a href="http://www.ihiro.org/cases/flashImgPlay/" rel="external" class="demo">demo</a></p>
<h3>一、下载后的初始Html代码和JS代码：</h3>
<p>
Html代码(在需要显示图片播放的代码处添加)：</p>

<div class="wp_codebox"><table><tr id="p11292"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p1129code2"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;flashImgPlay.js&quot;&gt;&lt;/script&gt;</pre></td></tr></table></div>

<p>flashImgPlay.js中的Javascript代码:</p>

<div class="wp_codebox"><table><tr id="p11293"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</pre></td><td class="code" id="p1129code3"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> pic_width<span style="color: #339933;">=</span><span style="color: #CC0000;">480</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> pic_height<span style="color: #339933;">=</span><span style="color: #CC0000;">166</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> button_pos<span style="color: #339933;">=</span><span style="color: #CC0000;">3</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> stop_time<span style="color: #339933;">=</span><span style="color: #CC0000;">3000</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> show_text<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> txtcolor<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;000000&quot;</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> bgcolor<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;DDDDDD&quot;</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> imag<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> link<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> text<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
imag<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;images/pics/news09-col-manual.jpg&quot;</span><span style="color: #339933;">;</span>
link<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;news/coll-manual.php&quot;</span><span style="color: #339933;">;</span>
imag<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;images/pics/news02.jpg&quot;</span><span style="color: #339933;">;</span>
link<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;news/mid_school.php&quot;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> swf_height<span style="color: #339933;">=</span><span style="color: #009900;">&#40;</span>show_text<span style="color: #339933;">==</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">?</span>pic_height<span style="color: #339933;">+</span><span style="color: #CC0000;">20</span><span style="color: #339933;">:</span>pic_height<span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> pics<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">,</span> links<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">,</span> texts<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>imag .<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	pics<span style="color: #339933;">=</span>pics<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;|&quot;</span><span style="color: #339933;">+</span>imag<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	links<span style="color: #339933;">=</span>links<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;|&quot;</span><span style="color: #339933;">+</span>link<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	texts<span style="color: #339933;">=</span>texts<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;|&quot;</span><span style="color: #339933;">+</span>text<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
pics<span style="color: #339933;">=</span>pics.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
links<span style="color: #339933;">=</span>links.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
texts<span style="color: #339933;">=</span>texts.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; codebase=&quot;http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0&quot; width=&quot;'</span><span style="color: #339933;">+</span> pic_width <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; height=&quot;'</span><span style="color: #339933;">+</span> swf_height <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;param name=&quot;movie&quot; value=&quot;flash/focus.swf&quot;&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;/param&gt;&lt;param name=&quot;quality&quot; value=&quot;high&quot;&gt;&lt;/param&gt;&lt;param name=&quot;wmode&quot; value=&quot;opaque&quot;&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;/param&gt;&lt;param name=&quot;FlashVars&quot; value=&quot;pics='</span><span style="color: #339933;">+</span>pics<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;links='</span><span style="color: #339933;">+</span>links<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;texts='</span><span style="color: #339933;">+</span>texts<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;pic_width='</span><span style="color: #339933;">+</span>pic_width<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;pic_height='</span><span style="color: #339933;">+</span>pic_height<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;show_text='</span><span style="color: #339933;">+</span>show_text<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;txtcolor='</span><span style="color: #339933;">+</span>txtcolor<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;bgcolor='</span><span style="color: #339933;">+</span>bgcolor<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;button_pos='</span><span style="color: #339933;">+</span>button_pos<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;stop_time='</span><span style="color: #339933;">+</span>stop_time<span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;embed src=&quot;flash/focus.swf&quot; FlashVars=&quot;pics='</span><span style="color: #339933;">+</span>pics<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;links='</span><span style="color: #339933;">+</span>links<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;texts='</span><span style="color: #339933;">+</span>texts<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;pic_width='</span><span style="color: #339933;">+</span>pic_width<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;pic_height='</span><span style="color: #339933;">+</span>pic_height<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;show_text='</span><span style="color: #339933;">+</span>show_text<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;txtcolor='</span><span style="color: #339933;">+</span>txtcolor<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;bgcolor='</span><span style="color: #339933;">+</span>bgcolor<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;button_pos='</span><span style="color: #339933;">+</span>button_pos<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;stop_time='</span><span style="color: #339933;">+</span>stop_time<span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; quality=&quot;high&quot; width=&quot;'</span><span style="color: #339933;">+</span> pic_width <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; height=&quot;'</span><span style="color: #339933;">+</span> swf_height <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; allowScriptAccess=&quot;sameDomain&quot; type=&quot;application/x-shockwave-flash&quot; pluginspage=&quot;http://www.macromedia.com/go/getflashplayer&quot; /&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>param<span style="color: #339933;">&gt;&lt;/</span>imag<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

</p>
<h3>二、重写后的Html代码、Css代码以及JS代码：</h3>
<p>
Html代码(在需要显示图片播放的代码处添加)：</p>

<div class="wp_codebox"><table><tr id="p11294"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p1129code4"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;flash&quot;&gt;
    &lt;ul&gt;
        &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;1.jpg&quot; alt=&quot;banner1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;2.jpg&quot; alt=&quot;banner2&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;3.jpg&quot; alt=&quot;banner3&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;4.jpg&quot; alt=&quot;banner4&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</pre></td></tr></table></div>

<p>需要用到的Css代码：</p>

<div class="wp_codebox"><table><tr id="p11295"><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code" id="p1129code5"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.flash</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">50px</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.flash</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.flash</span> li<span style="color: #6666ff;">.first</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>flashImgPlay.js中的Javascript代码（插件方式）:</p>

<div class="wp_codebox"><table><tr id="p11296"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
</pre></td><td class="code" id="p1129code6"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">;</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$.<span style="color: #660066;">fn</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		flashImgPlay <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>options<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #003366; font-weight: bold;">var</span> defaults <span style="color: #339933;">=</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
					width <span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img:first'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
					height <span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img:first'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
					btn_pos <span style="color: #339933;">:</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">,</span>
					stop_time <span style="color: #339933;">:</span> <span style="color: #CC0000;">3000</span><span style="color: #339933;">,</span>
					show_text <span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
					txtcolor <span style="color: #339933;">:</span> <span style="color: #3366CC;">'000000'</span><span style="color: #339933;">,</span>
					bgcolor <span style="color: #339933;">:</span> <span style="color: #3366CC;">'dddddd'</span><span style="color: #339933;">,</span>
					flash_src <span style="color: #339933;">:</span> <span style="color: #3366CC;">'focus.swf'</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #003366; font-weight: bold;">var</span> images <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
					imgs <span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
					links <span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
					texts <span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					images.<span style="color: #660066;">imgs</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'src'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					images.<span style="color: #660066;">links</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					images.<span style="color: #660066;">texts</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'alt'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #003366; font-weight: bold;">var</span> swf_height <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>defaults.<span style="color: #660066;">show_text</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #009900;">&#40;</span>defaults.<span style="color: #660066;">height</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">20</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> defaults.<span style="color: #660066;">height</span><span style="color: #339933;">,</span>
					pics <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span> links <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span> texts <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> length <span style="color: #339933;">=</span> images.<span style="color: #660066;">imgs</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> length<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					pics <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'|'</span> <span style="color: #339933;">+</span> images.<span style="color: #660066;">imgs</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
					links <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'|'</span> <span style="color: #339933;">+</span> images.<span style="color: #660066;">links</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
					texts <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'|'</span> <span style="color: #339933;">+</span> images.<span style="color: #660066;">texts</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
				pics <span style="color: #339933;">=</span> pics.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				links <span style="color: #339933;">=</span> links.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				texts <span style="color: #339933;">=</span> texts.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>
					<span style="color: #3366CC;">'&lt;object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; codebase=&quot;http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0&quot; width=&quot;'</span><span style="color: #339933;">+</span> defaults.<span style="color: #660066;">width</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; height=&quot;'</span><span style="color: #339933;">+</span> swf_height <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;&gt;'</span> <span style="color: #339933;">+</span>
						<span style="color: #3366CC;">'&lt;param name=&quot;movie&quot; value=&quot;'</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">flash_src</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;&gt;'</span> <span style="color: #339933;">+</span>
						<span style="color: #3366CC;">'&lt;/param&gt;&lt;param name=&quot;quality&quot; value=&quot;high&quot;&gt;&lt;/param&gt;&lt;param name=&quot;wmode&quot; value=&quot;opaque&quot;&gt;'</span> <span style="color: #339933;">+</span>
						<span style="color: #3366CC;">'&lt;/param&gt;&lt;param name=&quot;FlashVars&quot; value=&quot;pics='</span><span style="color: #339933;">+</span>pics<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;links='</span><span style="color: #339933;">+</span>links<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;texts='</span><span style="color: #339933;">+</span>texts<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;pic_width='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">width</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;pic_height='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">height</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;show_text='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">show_text</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;txtcolor='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">txtcolor</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;bgcolor='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">bgcolor</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;button_pos='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">btn_pos</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;stop_time='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">stop_time</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;&gt;'</span> <span style="color: #339933;">+</span>
						<span style="color: #3366CC;">'&lt;embed src=&quot;'</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">flash_src</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; FlashVars=&quot;pics='</span><span style="color: #339933;">+</span>pics<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;links='</span><span style="color: #339933;">+</span>links<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;texts='</span><span style="color: #339933;">+</span>texts<span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;pic_width='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">width</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;pic_height='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">height</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;show_text='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">show_text</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;txtcolor='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">txtcolor</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;bgcolor='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">bgcolor</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;button_pos='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">btn_pos</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;stop_time='</span><span style="color: #339933;">+</span>defaults.<span style="color: #660066;">stop_time</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; quality=&quot;high&quot; width=&quot;'</span><span style="color: #339933;">+</span> defaults.<span style="color: #660066;">width</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; height=&quot;'</span><span style="color: #339933;">+</span> swf_height <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; allowScriptAccess=&quot;sameDomain&quot; type=&quot;application/x-shockwave-flash&quot; pluginspage=&quot;http://www.macromedia.com/go/getflashplayer&quot; /&gt;'</span> <span style="color: #339933;">+</span>
					<span style="color: #3366CC;">''</span>
				<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>param<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>调用方法：</p>

<div class="wp_codebox"><table><tr id="p11297"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p1129code7"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.flash'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">flashImgPlay</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//$('.flash').flashImgPlay({stop_time:200, show_text:1}); 自行设置播放间隔、是否显示图片标题  </span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>三、重写前后的比较说明：</h3>
<p>原始代码使用需要在Html代码内嵌入js文件，若一个页面中需要多个图片播放的话（大型网站上常有），就需要创建多个JS文件，并在一个页面中多次引入JS文件嵌套到Html代码内。这严重违背了三层分离的原则。重写后的插件版，只需在文档底部引入一次JS文件，通过方法调用就可以实现一个页面中多个图片播放效果。新代码是自识别图片的大小，从而实现自适应效果。</p>
<p style="color:#f00">不过貌似该效果使用到的foucs.swf的as代码中没有支持.gif格式的图片（这也是我多花了半个小时来调试），又因我暂时还不太会AS编程，所以没对focus.swf进行修改。所以大家使用时图片需采用.jpg格式。另外貌似若设置show_text:1的话，就是显示图片的标题，默认的第一个是现实原作者的版权链接。这些只是对该foucs.swf的bug的说明！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/a-rich-picture-effect-flash/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Javascript:新消息闪烁标题提示代码分享</title>
		<link>http://www.ihiro.org/javascript-news-flash-header-tips</link>
		<comments>http://www.ihiro.org/javascript-news-flash-header-tips#comments</comments>
		<pubDate>Wed, 24 Feb 2010 07:04:25 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/javascript-news-flash-header-tips</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/blinkTitle-logo.png" alt="" title="blinkTitle-logo" width="100" height="100" class="alignleft size-full wp-image-1124" />
<p>本文纯粹是贴出一些比较实用的代码出来供大家学习和使用，也算是个人博客对这些实用代码的记录和收集吧！有用到的可以参考，没用到的直接可以飘过！</p>
<p>特意将这些代码写成jQuery插件的格式，这样方便大家使用的时候调用。我在平时的开发和自我学习过程中也积累了不少有用的代码，不知道怎么概括性地发布出来，所以就已文章的形式陆续贴出来与大家分享。</p>

<p>以单篇文章发布的插件代码都是一些简单的代码，若是一些复杂的代码或插件我会归纳到插件专区里去，这样大家下载起来也方便！</p>]]></description>
			<content:encoded><![CDATA[<p>本文纯粹是贴出一些比较实用的代码出来供大家学习和使用，也算是个人博客对这些实用代码的记录和收集吧！有用到的可以参考，没用到的直接可以飘过！</p>
<p>特意将这些代码写成jQuery插件的格式，这样方便大家使用的时候调用。我在平时的开发和自我学习过程中也积累了不少有用的代码，不知道怎么概括性地发布出来，所以就已文章的形式陆续贴出来与大家分享。</p>
<p>以单篇文章发布的插件代码都是一些简单的代码，若是一些复杂的代码或插件我会归纳到插件专区里去，这样大家下载起来也方便！</p>
<h3>一、插件代码</h3>
<p>
<div class="wp_codebox"><table><tr id="p11258"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code" id="p1125code8"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">;</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	$.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">/**
		 * 调用方法： var timerArr = $.blinkTitle.show();
		 *			$.blinkTitle.clear(timerArr);
		 */</span>
		blinkTitle <span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
			show <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>	<span style="color: #006600; font-style: italic;">//有新消息时在title处闪烁提示</span>
				<span style="color: #003366; font-weight: bold;">var</span> step<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> _title <span style="color: #339933;">=</span> document.<span style="color: #660066;">title</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #003366; font-weight: bold;">var</span> timer <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					step<span style="color: #339933;">++;</span>
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>step<span style="color: #339933;">==</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>step<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>step<span style="color: #339933;">==</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>document.<span style="color: #660066;">title</span><span style="color: #339933;">=</span><span style="color: #3366CC;">'【　　　】'</span><span style="color: #339933;">+</span>_title<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>step<span style="color: #339933;">==</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>document.<span style="color: #660066;">title</span><span style="color: #339933;">=</span><span style="color: #3366CC;">'【新消息】'</span><span style="color: #339933;">+</span>_title<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">500</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#91;</span>timer<span style="color: #339933;">,</span> _title<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">/**
			 * @param timerArr[0], timer标记
			 * @param timerArr[1], 初始的title文本内容
			 */</span>
			clear <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>timerArr<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>	<span style="color: #006600; font-style: italic;">//去除闪烁提示，恢复初始title文本</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>timerArr<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					clearInterval<span style="color: #009900;">&#40;</span>timerArr<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
					document.<span style="color: #660066;">title</span> <span style="color: #339933;">=</span> timerArr<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>注意其中调用方法中的timerArr变量，若你在前面调用代码显示了效果，在页面的后面代码中需要清楚该闪烁效果的话，需要注意timerArr变量的作用域。若只是出现效果而无需清楚，则可以直接调用$.hiro.blinkNews.show()
</p>
<h3>二、调用方法</h3>
<p>
<div class="wp_codebox"><table><tr id="p11259"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code" id="p1125code9"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> timerArr <span style="color: #339933;">=</span> $.<span style="color: #660066;">blinkTitle</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	setTimeout<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>		<span style="color: #006600; font-style: italic;">//此处是过一定时间后自动消失</span>
		$.<span style="color: #660066;">blinkTitle</span>.<span style="color: #660066;">clear</span><span style="color: #009900;">&#40;</span>timerArr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//若人为操作消失，只需如此调用：	$.blinkTitle.clear(timerArr);</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/blinkTitle/blinkTitle.rar" class="download">download</a><a href="http://www.ihiro.org/cases/blinkTitle/" rel="external" class="demo">demo</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/javascript-news-flash-header-tips/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Wordpress:如何将GoogleBuzz数据插入到博客中</title>
		<link>http://www.ihiro.org/how-to-insert-googlebuzz-data-into-blog</link>
		<comments>http://www.ihiro.org/how-to-insert-googlebuzz-data-into-blog#comments</comments>
		<pubDate>Sat, 20 Feb 2010 03:31:12 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[技巧]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1118</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/google-buzz-logo.jpg" alt="" title="google-buzz-logo" width="100" height="100" class="alignleft size-full wp-image-1117" />
<p>我一直在试图找一种将一些实时状态消息集成到博客中作为公告消息的方法，Twitter被封，新浪围脖貌似没有公开的API，自己做一个吧，在别的网站上也不显示。好在月初的时候Google出了Buzz，这样我就可以有一个实时的公告了。</p>
<p>在国外的博客上发现了下面的一段代码，可以通过Ajax跨域读取Buzz数据，以Json数据格式返回，我只需将返回的数量罗列成一个列表即可。在代码中我使用的是匿名函数的方式（<label style="color:#f00;">一般只使用一次的函数体比较适用</label>），在函数体内部使用$.ajax()方法，通过设置dataType:'jsonp'来跨域读取json数据后，遍历数据获得列表并显示出来。</p>]]></description>
			<content:encoded><![CDATA[<p>我一直在试图找一种将一些实时状态消息集成到博客中作为公告消息的方法，Twitter被封，新浪围脖貌似没有公开的API，自己做一个吧，在别的网站上也不显示。好在月初的时候Google出了Buzz，这样我就可以有一个实时的公告了。</p>
<p>在国外的博客上发现了下面的一段代码，可以通过Ajax跨域读取Buzz数据，以Json数据格式返回，我只需将返回的数量罗列成一个列表即可。代码如下：</p>

<div class="wp_codebox"><table><tr id="p111810"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
</pre></td><td class="code" id="p1118code10"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> username <span style="color: #339933;">=</span> <span style="color: #3366CC;">'hiro.zhd'</span><span style="color: #339933;">,</span>		<span style="color: #006600; font-style: italic;">//gmail用户名</span>
			num <span style="color: #339933;">=</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">,</span>		<span style="color: #006600; font-style: italic;">//期望加载几条数据	</span>
			div <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#buzz'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	<span style="color: #006600; font-style: italic;">//列表显示的盒子</span>
&nbsp;
	   <span style="color: #006600; font-style: italic;">// 需要传给Google Feed API 的参数 : Buzz Feed URL, Number of Entries </span>
	   <span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>q<span style="color: #339933;">:</span><span style="color: #3366CC;">'http://buzz.googleapis.com/feeds/'</span> <span style="color: #339933;">+</span> username <span style="color: #339933;">+</span> <span style="color: #3366CC;">'/public/posted'</span><span style="color: #339933;">,</span> 
				num<span style="color: #339933;">:</span>num<span style="color: #339933;">,</span>
				output<span style="color: #339933;">:</span><span style="color: #3366CC;">'json'</span><span style="color: #339933;">,</span>
				v<span style="color: #339933;">:</span><span style="color: #3366CC;">'1.0'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	   <span style="color: #006600; font-style: italic;">// 调用Google Feed API</span>
	   $.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		  url<span style="color: #339933;">:</span><span style="color: #3366CC;">'http://ajax.googleapis.com/ajax/services/feed/load'</span><span style="color: #339933;">,</span>
		  data<span style="color: #339933;">:</span>data<span style="color: #339933;">,</span>
		  dataType<span style="color: #339933;">:</span><span style="color: #3366CC;">'jsonp'</span><span style="color: #339933;">,</span>
		  success<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>json<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			 <span style="color: #006600; font-style: italic;">// 通过Google Feed API返回json数据</span>
&nbsp;
			 <span style="color: #006600; font-style: italic;">// 若返回状态标记错误，给出错误提示信息</span>
			 <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>json.<span style="color: #660066;">responseStatus</span><span style="color: #339933;">!=</span><span style="color: #CC0000;">200</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				div.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;b style=&quot;color:red&quot;&gt;'</span><span style="color: #339933;">+</span> json.<span style="color: #660066;">responseDetails</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/b&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> 
			 <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
			 <span style="color: #006600; font-style: italic;">// Buzz 记录是以一个数组返回</span>
			 <span style="color: #003366; font-weight: bold;">var</span> entries<span style="color: #339933;">=</span> json.<span style="color: #660066;">responseData</span>.<span style="color: #660066;">feed</span>.<span style="color: #660066;">entries</span><span style="color: #339933;">;</span>
			 <span style="color: #003366; font-weight: bold;">var</span> length<span style="color: #339933;">=</span> entries.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
&nbsp;
			 <span style="color: #006600; font-style: italic;">// length为0，表示没有任何记录</span>
			 <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>length<span style="color: #339933;">==</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> 
&nbsp;
			 <span style="color: #006600; font-style: italic;">// 默认开始添加一个隐藏的列表元素，以便后边动画地显示</span>
			 <span style="color: #003366; font-weight: bold;">var</span> ul <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;ul class=&quot;gb&quot; style=&quot;display:none&quot;&gt;&lt;/ul&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span>div.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			 <span style="color: #006600; font-style: italic;">// 循环buzz数组</span>
			 <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>length <span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">// 格式化发布时间</span>
				<span style="color: #003366; font-weight: bold;">var</span> pDate <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span>entries<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">publishedDate</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #006600; font-style: italic;">// 获得内容</span>
				<span style="color: #003366; font-weight: bold;">var</span> snippet <span style="color: #339933;">=</span> entries<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">contentSnippet</span><span style="color: #339933;">;</span>
				<span style="color: #006600; font-style: italic;">// 通过正则表达式转换链接的http格式</span>
				snippet <span style="color: #339933;">=</span> snippet.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\b(https?\:\/\/\S+)/gi</span><span style="color: #339933;">,</span><span style="color: #3366CC;">' &lt;a href=&quot;$1&quot;&gt;$1'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				ul.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;li&gt;'</span>
				   <span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;span class=&quot;gb-content&quot;&gt;'</span><span style="color: #339933;">+</span> snippet <span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/span&gt;'</span>
				   <span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;span class=&quot;gb-meta&quot;&gt;'</span>
					  <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;a href=&quot;'</span><span style="color: #339933;">+</span> entries<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">link</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;&gt;'</span><span style="color: #339933;">+</span> pDate.<span style="color: #660066;">toLocaleString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/a&gt;'</span>
				   <span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/span&gt;'</span>
				<span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/li&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			 <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
			 ul.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  <span style="color: #009900;">&#125;</span>
	   <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>    <span style="color: #006600; font-style: italic;">//只有jQuery方法实例化完成后才执行</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>length<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>在此处我使用的是匿名函数的方式（<label style="color:#f00;">一般只使用一次的函数体比较适用</label>），在函数体内部使用$.ajax()方法，通过设置dataType:&#8217;jsonp&#8217;来跨域读取json数据后，遍历数据获得列表并显示出来。</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/getGoogleBuzz/getGoogleBuzz.rar" class="download">download</a><a href="http://www.ihiro.org/cases/getGoogleBuzz/" rel="external" class="demo">demo</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/how-to-insert-googlebuzz-data-into-blog/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>电视剧:《神话》褒贬不一，只为消磨时光</title>
		<link>http://www.ihiro.org/myth-just-to-kill-time</link>
		<comments>http://www.ihiro.org/myth-just-to-kill-time#comments</comments>
		<pubDate>Tue, 16 Feb 2010 17:25:15 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[爱情片]]></category>
		<category><![CDATA[电视剧]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1111</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/shenhua-logo.jpg" alt="" title="shenhua-logo" width="100" height="100" class="alignleft size-full wp-image-1112" />
<p>其实电视剧版的《神话》在1月刚刚开始的时候就在中央电视台播放了，那个时候换台也看到了，但我一直没怎么关注它。本来也没打算去看这一部电视剧，不仅因为它是改编自电影版《神话》，而且它的剧集也太长了点，有50集。</p>
<p>不过后来听别人介绍，也在网络上看到一些称赞的信息，貌似在央视8套收视率创新高，而且也在播放完后在央视1套重播。当然也看到了批评的信息，说剧情太“穿越”，台词太雷人。正是这褒贬不一的言论，让我对这部穿越题材的电视剧有了兴趣，加上住处的下载速度不错，花了一个通宵的挂机下载了整部电视剧，10G多。</p>]]></description>
			<content:encoded><![CDATA[<p>其实电视剧版的《神话》在1月刚刚开始的时候就在中央电视台播放了，那个时候换台也看到了，但我一直没怎么关注它。本来也没打算去看这一部电视剧，不仅因为它是改编自电影版《神话》，而且它的剧集也太长了点，有50集。</p>
<p>不过后来听别人介绍，也在网络上看到一些称赞的信息，貌似在央视8套收视率创新高，而且也在播放完后在央视1套重播。当然也看到了批评的信息，说剧情太“穿越”，台词太雷人。正是这褒贬不一的言论，让我对这部穿越题材的电视剧有了兴趣，加上住处的下载速度不错，花了一个通宵的挂机下载了整部电视剧，10G多。</p>
<p>我从2月9号开始看起，之前还没放春节长假时是每天晚上看2-3集，放了假后一天差不多6-7集，终于在今晚的12点结束了这部电视剧的观看之旅。下面说说我对该电视剧的一些个人看法吧：</p>
<h3>1.拍摄方面：</h3>
<p>估计是拍摄方为了节约成本吧，在穿越到秦朝后的提到的那么多场战争，没有一个是完整的战斗。剧中一直提到“蒙家军有三十多万的军人”，而每次只看到的就是那么几十个人。就算你有电脑特效复制点人出来也是合乎情理的，结果电脑特效也省略了；</p>
<h3>2.剧情方面：</h3>
<p>看完该电视剧后，我觉得我就像以前在学校时看完一部玄幻小说一样。什么样的好事都让主角遇到了，同样什么样的坏事也都让主角遇到了；还有永远是有很多女子喜欢这主角，甚至为他牺牲了很多；还有一个特搞笑的就是那部男主角自制的手动充电器了，也没演到男主角教授女主角制作和使用充电器，女主角是无师自通啊，天才！</p>
<h3>3.演员与造型：</h3>
<p>主角造型上我觉得比较成功的是大将军蒙恬和小月姑娘，一个是名将，一个是名姬。或许是男一号胡歌演过类型的古装片太多的原因吧，该片中他的造型感觉没什么变化，当然到了后面稍微改变了点。而演技方面，我觉得演赵高的张世最让人难以忘怀，另外饰演大将军蒙恬的丁子俊也不错，他演了一个比自己岁数大的角色，有稳重和气概的一面，也有悲伤和柔情的一面；</p>
<h3>4.音乐方面：</h3>
<p>筑琴琴师高渐离弹奏的乐曲很是动听，在电视剧后半部分的一些悲伤唱曲也是优美，这也算是该片的一个亮点。我也有点兴趣去收集到这些美丽的音乐。</p>
<p>总的来说，该电视剧实质的意义没有，但对我来说用来打发无聊的假期还是一个不错的选择！当然它还有一个侧面的好处是让我了解了更多的中国历史。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/myth-just-to-kill-time/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>资讯:2010年02月编程语言排行榜</title>
		<link>http://www.ihiro.org/information-february-2010-programming-language-list</link>
		<comments>http://www.ihiro.org/information-february-2010-programming-language-list#comments</comments>
		<pubDate>Mon, 08 Feb 2010 09:14:18 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1104</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/2010.02.language-logo.png" alt="" title="2010.02.language-logo" width="100" height="100" class="alignleft size-full wp-image-1108" />
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站今天更新了最新10年02月份的编程语言排行榜。</p>
<p>编程语言排行变幻莫测啊，这月你升一点，下月我升一点。2月的排名榜亦是如此，貌似Javascript现在一直是在9、10名间徘徊，而PHP的上升势头依然强悍啊，继续保持了第三的宝座，而且它的市场占有率仍在继续增加。Objective-C和Go编程语言分别借助于自己的开发公司：苹果和谷歌，市场份额的上升速度算得上是飞速了啊！</p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站今天更新了最新10年02月份的编程语言排行榜。</p>
<p>编程语言排行变幻莫测啊，这月你升一点，下月我升一点。2月的排名榜亦是如此，貌似Javascript现在一直是在9、10名间徘徊，而PHP的上升势头依然强悍啊，继续保持了第三的宝座，而且它的市场占有率仍在继续增加。Objective-C和Go编程语言分别借助于自己的开发公司：苹果和谷歌，市场份额的上升速度算得上是飞速了啊！</p>
<h3>2010年02月份编程语言前20名：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/2010.02.language-no.png" alt="" title="2010.02.language-no" width="555" height="588" class="aligncenter size-full wp-image-1109" /></p>
<h3>2010年02月份编程语言前10名的走势图：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/2010.01.language-trend.png" alt="" title="2010.01.language-trend" width="634" height="480" class="aligncenter size-full wp-image-1107" /></p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/information-february-2010-programming-language-list/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>电影:《锦衣卫》，甄子丹也会死？</title>
		<link>http://www.ihiro.org/film-jinyiwei</link>
		<comments>http://www.ihiro.org/film-jinyiwei#comments</comments>
		<pubDate>Sat, 06 Feb 2010 12:04:31 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[动作片]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1097</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/jinyiwei-logo.jpg" alt="" title="jinyiwei-logo" width="100" height="100" class="alignleft size-full wp-image-1096" />
<p>在《锦衣卫》未上映时，我就对这部武侠动作片充满了期待。主要原因有二：1.喜欢甄子丹的动作戏；2.期待电影中的兵器样式和使用方法。另外一个小的期待是：甄子丹和赵薇的悲情爱情。</p>
<p>今天下午终于去徐家汇的柯达电影世界看了，票价100元，比《孔子》贵了20元。买票时发现好多的观众还是对《阿凡达》电影十分感兴趣，而原版的《阿凡达》居然要140元的票价，都快赶上IMax版的了，着实贵啊！</p>
<p>该电影我唯一感到意外的是：甄子丹在电影的最后居然是抱着美女脱脱（徐子珊饰演）同归于尽了，这也是我看过甄子丹所有电影中第一次抱着美女死掉哦，之前在《十月围城》中太强悍了，撞着马儿死了！另一方面，脱脱的武艺也忒高了点吧，还有必杀技。不仅开始时杀了白虎，后来还杀了大漠判官（吴尊饰演），并且最后逼的甄子丹与其同归于尽，着实厉害吧！</p>]]></description>
			<content:encoded><![CDATA[<p>在《锦衣卫》未上映时，我就对这部武侠动作片充满了期待。主要原因有二：1.喜欢甄子丹的动作戏；2.期待电影中的兵器样式和使用方法。另外一个小的期待是：甄子丹和赵薇的悲情爱情。</p>
<p>今天下午终于去徐家汇的柯达电影世界看了，票价100元，比《孔子》贵了20元。买票时发现好多的观众还是对《阿凡达》电影十分感兴趣，而原版的《阿凡达》居然要140元的票价，都快赶上IMax版的了，着实贵啊！</p>
<p>看完后吧，觉得剧情一般。虽说《锦衣卫》宣传是定位为浪漫爱情动作片，但看时发现里面还是有很多喜剧的成分，大家都笑了呢！电影中的动作表演确实没的说，甄子丹把10把宝刀使用的出神入化，特别是那个装宝刀的盒子，还能当吊钢丝用呢，不错吧，甄子丹还利用了这点躲了一次，逃了一次，呵呵！</p>
<p>该电影我唯一感到意外的是：甄子丹在电影的最后居然是抱着美女脱脱（徐子珊饰演）同归于尽了，这也是我看过甄子丹所有电影中第一次抱着美女死掉哦，之前在《十月围城》中太强悍了，撞着马儿死了！另一方面，脱脱的武艺也忒高了点吧，还有必杀技。不仅开始时杀了白虎，后来还杀了大漠判官（吴尊饰演），并且最后逼的甄子丹与其同归于尽，着实厉害吧！</p>
<p>剧情什么的就不多少了，大家可以到影院去看看，说实话花一百块看这部《锦衣卫》不是很核算，不过优惠了去看的话还是挺值得的！我现在比较期待9号上映的《苏乞儿》，它貌似是国内首部3D版的武侠片吧，期待吧！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/film-jinyiwei/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>网赚:抛弃阿里妈妈，不再做网赚。杂谈</title>
		<link>http://www.ihiro.org/abandon-alimama-no-longer-do-wangzhuan</link>
		<comments>http://www.ihiro.org/abandon-alimama-no-longer-do-wangzhuan#comments</comments>
		<pubDate>Wed, 03 Feb 2010 03:26:32 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[alimama]]></category>
		<category><![CDATA[网赚]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1090</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/02/alimama-logo.png" alt="" title="alimama-logo" width="100" height="100" class="alignleft size-full wp-image-1091" />
<p>终于啊，今天狠了心底把博客上所有的阿里广告全部下架了。8月份上架之初就有博友们友情地提示我：这会影响加载速度和页面视觉。我当初的想法是：我的页面内容严重缺少，所以我添加了广告以用来丰富我的页面；另外也想感受一下博客网赚的乐趣。</p>
<p>到这个月的7号吧，阿里广告在我的博客上滞留就有半年了。相信大家一定对我赚的Money数额有所兴趣。我很悲哀地告诉大家，我半年来只赚的18元RMB，不知道算不算是赚了呢？</p>
<p>最近一直在继续深入地自我学习：有JS，也有Flex（刚刚起步）。重心暂时放在JS上，现在对我来说，jQuery库我已经使用的非常熟练了，各个方法、插件也都比较熟悉，我缺少的是对实现原理的了解和原生态JS的知识加固。去年6月的时候买了John Resig的《精通Javascript》，当时就看了一遍，非常朦胧。最近又将这本书重新看起来，发现这次理解的更多了，同时也学到了更多的编程技巧和编程原理。</p>]]></description>
			<content:encoded><![CDATA[<p>终于啊，今天狠了心地把博客上所有的阿里广告全部下架了。8月份上架之初就有博友们友情地提示我：这会影响加载速度和页面视觉。我当初的想法是：我的页面内容严重缺少，所以我添加了广告以用来丰富我的页面；另外也想感受一下博客网赚的乐趣。</p>
<p>到这个月的7号吧，阿里广告在我的博客上滞留就有半年了。相信大家一定对我赚的Money数额有所兴趣。我很悲哀地告诉大家，我半年来只赚的18元RMB，不知道算不算是赚了呢？</p>
<p>最近一直在继续深入地自我学习：有JS，也有Flex（刚刚起步）。重心暂时放在JS上，现在对我来说，jQuery库我已经使用的非常熟练了，各个方法、插件也都比较熟悉，我缺少的是对实现原理的了解和原生态JS的知识加固。去年6月的时候买了John Resig的《精通Javascript》，当时就看了一遍，非常朦胧。最近又将这本书重新看起来，发现这次理解的更多了，同时也学到了更多的编程技巧和编程原理。</p>
<p>这篇博文有点乱，主要是有近10天没有更新博客了，就当作是一片杂感文章吧！！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/abandon-alimama-no-longer-do-wangzhuan/feed</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>电影:观影《孔子》，为演员演技投票</title>
		<link>http://www.ihiro.org/confucius-vote-for-the-actors</link>
		<comments>http://www.ihiro.org/confucius-vote-for-the-actors#comments</comments>
		<pubDate>Sun, 24 Jan 2010 14:55:22 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[史诗片]]></category>
		<category><![CDATA[投票]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1062</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/confucius-logo.jpg" alt="" title="confucius-logo" width="100" height="100" class="alignleft size-full wp-image-1070" />
<p>昨天周六跟着姐夫去参加他们公司在大时代广场参加的进口食品展销会，呆了一个下午。到了晚上，实在无聊，便到展销厅隔壁的万裕国际影城观看了最新电影《孔子》。影片总长125分钟，算是国产电影中比较长的电影了吧。</p>
<p>整个影片的取景很美，背景音乐都很有古韵，非常动听，意境、情节感人至深，值得观看。整片中搞笑地出现了一句累人的话：“给个话儿！”，算是给电影添加了一点现代特设吧，呵呵！</p>
<p>利用公司网站之便发起个《孔子》演员演技的投票，看过的朋友可以参与当前的投票。也可以点击上、下按钮参与其他我们公司网站上的投票。想参加更多投票获取积分（1积分兑换1元，只有参加商业调查才会有）的朋友，可以点击链接注册会员：<a href="http://www.wanyan.com/user/register.jsp?rid=948375" rel="external">http://www.wanyan.com/user/register.jsp?rid=948375</a>。(做个小广告，呵呵!)</p>]]></description>
			<content:encoded><![CDATA[<p>昨天周六跟着姐夫去参加他们公司在大时代广场参加的进口食品展销会，呆了一个下午。到了晚上，实在无聊，便到展销厅隔壁的万裕国际影城观看了最新电影《孔子》。影片总长125分钟，算是国产电影中比较长的电影了吧。</p>
<p>在此之前就在网上和电视上看过一些该片的片花和介绍一类的信息。本没有准备去电影院观看的打算，但昨天实在无聊便还是去看了。看完了觉得还是挺超值的，因为我是使用贵宾券买票的，只要支付30元，而正票价格是80元。</p>
<p>影片主要讲解了中国伟大的儒家思想家、教育家孔丘（字仲尼）的生平。没有讲他的求学经历，只是从求学完成后开始在鲁国治国讲起。从一位平民被鲁定公先后提升为中都夫子、大司寇、代国相。孔丘也没有辜负鲁定公的期望，将鲁国治理的有条有理。但最终还是受到了齐国和鲁国三桓三人的排挤，被迫离开鲁国，开始了长达十几年的周游列国之旅。</p>
<p>
<blockquote><span>“三桓”是春秋时鲁大夫孟孙氏、叔孙氏、季孙氏三家的合称，分别是鲁桓公的三个儿子庆父、叔牙、季友的后裔。鲁国自宣公以后，政权操纵在以季孙氏为首的“三桓”贵族手中。由于君权削弱，鲁国国内贵族纷争激烈。此时参政的孔子提出尊王室、复礼制的理念，试图削弱贵族势力。但因“三桓”贵族势力强大，孔子被驱逐出鲁国，开始周游列国，直到晚年才回到鲁国著书立说。</span></p></blockquote>
<p>孔丘的一班徒弟们很是爱戴自己的老师，陪着老师走完了这十几年的漂泊之旅。在影片的最后，身为三桓之首的国相季孙氏（当前逼走孔丘主谋）老年反思，感觉自己年轻时侯的错误，终于将孔子一行人召回了鲁国，同时告示着孔丘等人漂泊生涯的结束，可以回家了。回国后，孔子只开堂讲书，而不再理会政治！！</p>
<p>整个影片的取景很美，背景音乐都很有古韵，非常动听，意境、情节感人至深，值得观看。整片中搞笑地出现了一句累人的话：“给个话儿！”，算是给电影添加了一点现代特设吧，呵呵！</p>
<p>影片的几个主演中，感觉发哥的表演最为出色，另外陈建斌的表演也非常不错。现代小生任泉和陆毅两人，我比较认可饰演孔子徒弟颜回的任泉，他在影片中为了晚秋落水的孔子著作而死掉了，该段也是影片催泪之处。</p>
<p>利用公司网站之便发起个《孔子》演员演技的投票，看过的朋友可以参与当前的投票。也可以点击上、下按钮参与其他我们公司网站上的投票。想参加更多投票获取积分（1积分兑换1元，只有参加商业调查才会有）的朋友，可以点击链接注册会员：<a href="http://www.wanyan.com/user/register.jsp?rid=948375" rel="external">http://www.wanyan.com/user/register.jsp?rid=948375</a></p>
<p class="aligncenter"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="340" height="400"><param name="movie" value="http://www.wanyan.com/flex_swf/PollEV.swf?s=0&#038;i=1430051"></param><param name="allowScriptAccess" value="always"></param><param name="wmode" value="transparent"></param><param name="bgcolor" value="#ffffff" /><embed src="http://www.wanyan.com/flex_swf/PollEV.swf?s=0&#038;i=1430051" type="application/x-shockwave-flash" width="340" height="400" allowFullScreen="true" wmode="transparent" bgcolor="#ffffff" allowScriptAccess="always"></embed></object></p>
<p>该站也是我进公司的第一个参与的项目（前端开发），希望我的博友们可以支持支持（给自己做个广告，呵呵!）。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/confucius-vote-for-the-actors/feed</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>jQuery:1.4新版本中你应该知道的15个新特性(二)</title>
		<link>http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2</link>
		<comments>http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2#comments</comments>
		<pubDate>Fri, 22 Jan 2010 05:04:47 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[译文]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1054</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/jquery-1.4-logo-2.gif" alt="" title="jquery-1.4-logo-2" width="100" height="100" class="alignleft size-full wp-image-1044" />
<p>继续发布jQuery1.4版本剩余的新特性：第9点至第15点。</p>
<h3>九、去除标签元素的父标签；</h3>
<h3>十、不用删除数据，即可删除掉DOM中的标签元素；</h3>
<h3>十一、对.index()方法进行了扩展；</h3>
<h3>十二、DOM控制方法支持回调函数...</h3>]]></description>
			<content:encoded><![CDATA[<p>继续发布jQuery1.4版本剩余的新特性：第9点至第15点。</p>
<h3>九、去除标签元素的父标签：</h3>
<p>在之前的版本中已经有了.wrap()方法来个标签添加新的父标签，而在1.4新版本中又添加了相对的.unwrap()方法来去除标签的父标签。实例Html代码如下：</p>

<div class="wp_codebox"><table><tr id="p105411"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1054code11"><pre class="html" style="font-family:monospace;">&lt;div&gt;
    &lt;p&gt;Foo&lt;/p&gt;
&lt;/div&gt;</pre></td></tr></table></div>

<p><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p105412"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p1054code12"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'p'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">unwrap</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>执行后的话题Html代码如下:</p>

<div class="wp_codebox"><table><tr id="p105413"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p1054code13"><pre class="html" style="font-family:monospace;">&lt;p&gt;Foo&lt;/p&gt;</pre></td></tr></table></div>

</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/unwrap/" class="p_5" rel="external">.unwrap()</a>方法的资料&#8230;</p>
<h3>十、不用删除数据，即可删除掉DOM中的标签元素：</h3>
<p>新版本中的.detach()方法允许你删除DOM中的任何标签元素，就像.remove()方法一样。但它与.remove()方法的不同之处是：.remove()是将标签直接删除，而.detach()方法则是将标签暂时移除，并通过方法内部调用.data()方法将标签缓存后赋予变量，再后面的代码中若还需要找回该标签，变量则会自动读取缓存的数据；另外若被.detach()方法移除的标签在移除前绑定了事件机制的话，在后面恢复后，该事件机制依然存在，无需再次绑定。<br />
<small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p105414"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code" id="p1054code14"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> foo <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#foo'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Bind an important event handler</span>
foo.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Foo!'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
foo.<span style="color: #660066;">detach</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Remove it from the DOM</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// … do stuff</span>
&nbsp;
foo.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Add it back to the DOM</span>
&nbsp;
foo.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// alerts &quot;Foo!&quot;</span></pre></td></tr></table></div>

</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/detach" class="p_5" rel="external">.detach()</a>方法的资料&#8230;</p>
<h3>十一、对.index()方法进行了扩展：</h3>
<p>1.4新版本中新增了两个.index()的调用方法。而之前，我们将一个标签元素作为.index()方法的参数，并希望执行后返回一个标识当前集合中匹配元素序列号的数字结果。<br />
<br /><small class="red">若有一段XHtml代码如下：</small></p>

<div class="wp_codebox"><table><tr id="p105415"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p1054code15"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>ul<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Apple<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Banana<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Grape<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Strawberry<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Pear<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Peach<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>ul<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>点击li标签获得该li标签的序号<br />
<br /><small class="red">jQuery1.32版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p105416"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1054code16"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
       <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">index</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p105417"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code" id="p1054code17"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
       <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">index</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//或者</span>
&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">index</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>				   
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/index" class="p_5" rel="external">.index()</a>方法的资料&#8230;</p>
<h3>十二、DOM控制方法支持回调函数：</h3>
<p>在1.4版本中绝大部分的DOM控制方法只支持回调函数作为唯一的参数，除了极个别的（比如：.attr()、.css()）方法中可以作为第二参数。这些回调函数将被匹配集合中所有元素所执行，<br />
以确定哪些应作为该方法的实际值。<br />
<br />下面的这些DOM控制方法都支持回调函数：</p>
<ul class="external" style="padding-left:30px; list-style:inside disc;">
<li><a href="http://api.jquery.com/after">after</a></li>
<li><a href="http://api.jquery.com/before">before</a></li>
<li><a href="http://api.jquery.com/append">append</a></li>
<li><a href="http://api.jquery.com/prepend">prepend</a></li>
<li><a href="http://api.jquery.com/addClass">addClass</a></li>
<li><a href="http://api.jquery.com/toggleClass">toggleClass</a></li>
<li><a href="http://api.jquery.com/removeClass">removeClass</a></li>
<li><a href="http://api.jquery.com/wrap">wrap</a></li>
<li><a href="http://api.jquery.com/wrapAll">wrapAll</a></li>
<li><a href="http://api.jquery.com/wrapInner">wrapInner</a></li>
<li><a href="http://api.jquery.com/val">val</a></li>
<li><a href="http://api.jquery.com/text">text</a></li>
<li><a href="http://api.jquery.com/replaceWith">replaceWith</a></li>
<li><a href="http://api.jquery.com/css">css</a></li>
<li><a href="http://api.jquery.com/attr">attr</a></li>
<li><a href="http://api.jquery.com/html">html</a></li>
</ul>
<p>在回调方法中，若你想访问该匹配集合的话，你需要使用&#8221;this&#8221;，或者序号index作为该方法的第一个参数。<br />
<small class="red">jQuery1.4版本中实现代码：</small><br />
</p>

<div class="wp_codebox"><table><tr id="p105418"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1054code18"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">'Index of this list item: '</span> <span style="color: #339933;">+</span> i<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>当然你可以给该回调函数传递第二个参数，比如是在使用设置类的DOM控制方法（如：.html()、.attr()等），你若想得到当前的值。<br />
<br /><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p105419"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1054code19"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span> currentHref<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> currentHref <span style="color: #339933;">+</span> <span style="color: #3366CC;">'?foo=bar'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>正如你看到的一样，在使用.attr()和.css()方法是，当该方法的第一个是属性名称时，你可以将回调函数作为方法的第二参数。<br />
<br /><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p105420"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1054code20"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span> currentCssColor<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> i <span style="color: #339933;">%</span> <span style="color: #CC0000;">2</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'red'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'blue'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>十三、检测对象类型方法：</h3>
<p>jQuery1.4新版本在命名空间下新增了两个帮助型的方法，用来帮助你检测对象类型。</p>
<p>第一个方法：.isEmptyObject()用来判断一个对象是否是空对象，返回一个布尔类型的结果；<br />
第二个方法：.isPlainObject()用来判断一个对象是否是最原始的Javascript对象(该对象是否是通过{}或者new Object()创建)，同样也返回一个布尔类型的结果。<br />
<br /><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p105421"><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code" id="p1054code21"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">isEmptyObject</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// true</span>
jQuery.<span style="color: #660066;">isEmptyObject</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>foo<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// false</span>
&nbsp;
jQuery.<span style="color: #660066;">isPlainObject</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// true</span>
jQuery.<span style="color: #660066;">isPlainObject</span><span style="color: #009900;">&#40;</span>window<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// false</span>
jQuery.<span style="color: #660066;">isPlainObject</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// false</span></pre></td></tr></table></div>

</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/jQuery.isEmptyObject" class="p_l_5" rel="external">.isEmptyObject()</a><a href="http://api.jquery.com/jQuery.isPlainObject" class="p_5" rel="external">.isPlainObject()</a>方法的资料&#8230;</p>
<h3>十四、.Closest()方法扩展：</h3>
<p>扩展后的.Closest()支持数组选择器作为参数，这在遍历一个元素的祖先元素时非常有用。</p>

<div class="wp_codebox"><table><tr id="p105422"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code" id="p1054code22"><pre class="html" style="font-family:monospace;">&lt; !DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;&lt;/style&gt;
  &lt;script src=&quot;/scripts/jquery-1.4.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;script&gt;var close = $(&quot;li:first&quot;).closest([&quot;ul&quot;, &quot;body&quot;]);
$.each(close, function(i){
  $(&quot;li&quot;).eq(i).html( this.selector + &quot;: &quot; + this.elem.nodeName );
});&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></td></tr></table></div>

<p>执行后的结果是：</p>

<div class="wp_codebox"><table><tr id="p105423"><td class="line_numbers"><pre>1
2
</pre></td><td class="code" id="p1054code23"><pre class="html" style="font-family:monospace;">    * ul: UL
    * body: BODY</pre></td></tr></table></div>

</p>
<p>另外该方法还支持使用上下文对象作为它的第二参数，也就是说你可以遍历任意上下文对象直到的元素的祖先元素。这个扩展使用的列子非常少，但在内部使用时非常的有效率。</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/closest" class="p_5" rel="external">.closest()</a>方法的资料&#8230;</p>
<h3>十四、新的事件机制（focusIn 、focusOut）：</h3>
<p>新版本中若要给事件对象委派&#8221;focus&#8221;和&#8221;blur&#8221;事件，也可以使用.focusIn()和.focusOut()方法（它们是一一对应的）。更加重要的是focus和blur事件不支持.live()方法委派，但focusIn和focusOut事件是支持.live()方法委派。<br />
<br /><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p105424"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p1054code24"><pre class="javascript" style="font-family:monospace;">   jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'form'</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">focusin</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'focused'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    .<span style="color: #660066;">focusout</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'focused'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>


<div class="wp_codebox"><table><tr id="p105425"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p1054code25"><pre class="javascript" style="font-family:monospace;">   jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input'</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'focusin'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'focused'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    .<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'focusout'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'focused'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/focusin" class="p_l_5" rel="external">.focusin()</a><a href="http://api.jquery.com/focusout" class="p_5" rel="external">.focusin()</a>方法的资料&#8230;</p>
<p>文章总结翻译来自：<a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/" rel="external">http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/</a></p>
<p>更多的API文档资料请阅读：<a href="http://api.jquery.com/" rel="external">http://api.jquery.com/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>jQuery:1.4新版本中你应该知道的15个新特性(一)</title>
		<link>http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1</link>
		<comments>http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1#comments</comments>
		<pubDate>Wed, 20 Jan 2010 05:53:13 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[译文]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1028</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/jquery-1.4-logo-1.gif" alt="" title="jquery-1.4-logo-1" width="100" height="100" class="alignleft size-full wp-image-1043" />
<p>题外话：前两天回了一趟泰州，星期二上班后看到了两条比较重大的新闻：1.谷歌耍了我们这些谷歌迷们一把，决定不离开中国了；2.jQuery1.4新版本也正式上线了。</p>
<p>从<a href="http://net.tutsplus.com/" rel="external">Nettuts+</a>博客上看到了这票jQuery1.4新特性的总结性文章，该博总结了15条新的特性，便给出相应的实现代码。觉得不错，便整理后翻译过来供大家参考，并加入了1.32版本的实现方法进行比较性地学习。</p>
<p class="red">文章较长，分两篇文章发布，请关心者耐心阅读与等待！上篇包含特性1-8点，下篇9-15点隔一日再发布！</p>]]></description>
			<content:encoded><![CDATA[<p>题外话：前两天回了一趟泰州，星期二上班后看到了两条比较重大的新闻：1.谷歌耍了我们这些谷歌迷们一把，决定不离开中国了；2.jQuery1.4新版本也正式上线了。</p>
<p>从<a href="http://net.tutsplus.com/" rel="external">Nettuts+</a>博客上看到了这票jQuery1.4新特性的总结性文章，该博总结了15条新的特性，便给出相应的实现代码。觉得不错，便整理后翻译过来供大家参考，并加入了1.32版本的实现方法进行比较性地学习。</p>
<p class="red">文章较长，分两篇文章发布，请关心者耐心阅读与等待！上篇包含特性1-8点，下篇9-15点隔一日再发布！</p>
<h3>一、给jQuery(…)方法传递新的参数：</h3>
<p>jQuery()方法是jQuery库的核心方法之一，在1.32版本及早期的版本中，该方法是用来获取节点或者创建DOM对象的，它只支持一个参数。在使用来创建新的DOM对象时，我们若要给该DOM对象添加属性的话，只能通过attr()方法在后面追加，很是不方便，阅读起来也比较累。在jQuery1.4中，给jQuery方法新增了一个对象型的参数，用来创建新的DOM对象设置该DOM对象相应的属性。<br />
<br /><small class="red">jQuery1.32版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102826"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code" id="p1028code26"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;a&gt;&lt;/a&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    id<span style="color: #339933;">:</span> <span style="color: #3366CC;">'foo'</span><span style="color: #339933;">,</span>
    href<span style="color: #339933;">:</span> <span style="color: #3366CC;">'http://google.com'</span><span style="color: #339933;">,</span>
    title<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Become a Googler'</span><span style="color: #339933;">,</span>
    rel<span style="color: #339933;">:</span> <span style="color: #3366CC;">'external'</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Go to Google!'</span><span style="color: #009900;">&#41;</span>
   .<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
       fontWeight<span style="color: #339933;">:</span> <span style="color: #CC0000;">700</span><span style="color: #339933;">,</span>
       color<span style="color: #339933;">:</span> <span style="color: #3366CC;">'green'</span>
   <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
   .<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
       <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Foo has been clicked!'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102827"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code" id="p1028code27"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;a /&gt;'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
    id<span style="color: #339933;">:</span> <span style="color: #3366CC;">'foo'</span><span style="color: #339933;">,</span>
    href<span style="color: #339933;">:</span> <span style="color: #3366CC;">'http://google.com'</span><span style="color: #339933;">,</span>
    title<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Become a Googler'</span><span style="color: #339933;">,</span>
    rel<span style="color: #339933;">:</span> <span style="color: #3366CC;">'external'</span><span style="color: #339933;">,</span>
    text<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Go to Google!'</span><span style="color: #339933;">,</span>
    css<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        fontWeight<span style="color: #339933;">:</span> <span style="color: #CC0000;">700</span><span style="color: #339933;">,</span>
        color<span style="color: #339933;">:</span> <span style="color: #3366CC;">'green'</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    click<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Foo has been clicked!'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/jQuery/" class="p_5" rel="external">jQuery(…)</a>方法的资料&#8230;</p>
<h3>二、新增&#8221;until&#8221;系列方法：</h3>
<p>新增&#8221;until&#8221;系列方法中有三个方法：&#8221;nextUntil&#8221;, &#8220;prevUntil&#8221; 和&#8221;parentsUntil&#8221;，这些方法是用来获取符合条件内的DOM对象。中文你可以理解为“直到”的意思。<br />
<br /><small class="red">若有一段XHtml代码如下：</small></p>

<div class="wp_codebox"><table><tr id="p102828"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p1028code28"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>ul<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Apple<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Banana<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Grape<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Strawberry<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Pear<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>Peach<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>ul<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>现在我想选取从含有apple的li到含有pear的li,则代码实现：<br />
<br /><small class="red">jQuery1.32版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102829"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p1028code29"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102830"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p1028code30"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul li:contains(Apple)'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">nextUntil</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">':contains(Pear)'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>虽然上面两者的选取效果是一样的，但若现在我在含有apple的li到含有pear的li中间再添加内容的话，1.32版本的代码就需要修改了，而1.4版本的则可继续使用，也就说1.4版本的代码可用性和语义性增强了。</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/prevUntil/" class="p_l_5" rel="external">prevUntil</a>, <a href="http://api.jquery.com/nextUntil/" class="p_l_5" rel="external">nextUntil</a>, <a href="http://api.jquery.com/parentsUntil/" class="p_5" rel="external">parentsUntil</a>方法的资料&#8230;</p>
<h3>三、给事件对象一次绑定多个事件：</h3>
<p>1.4不再像1.32版本中那样链式地给一个时间对象绑定时间，现在你可以将多个时间归纳后绑定到一个方法中。<br />
<br /><small class="red">jQuery1.32版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102831"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p1028code31"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#foo).bind('</span>click<span style="color: #3366CC;">', function() {
        // do something
}).bind('</span>mouseover<span style="color: #3366CC;">', function() {
        // do something
}).bind('</span>mouseout‘， <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// do something</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102832"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code" id="p1028code32"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
});</span></pre></td></tr></table></div>

<p>当然对.one()一次点击事件也是适用的哦！</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/bind/" class="p_5" rel="external">.bind(…)</a>方法的资料&#8230;</p>
<h3>四、Per-Property Easing动画效果</h3>
<p>在1.32版本中，我们使用animate()方法给对象添加动画效果时，特效很单一，只能再引入jquery.easing.js插件来丰富动画特效。在新版本1.4中将该插件集成到了jQuery库中，这样在使用过的过程中就更加地方便了。<br />
<br /><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102833"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p1028code33"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#foo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    left<span style="color: #339933;">:</span> <span style="color: #CC0000;">500</span><span style="color: #339933;">,</span>
    top<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">500</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'easeOutBounce'</span><span style="color: #009900;">&#93;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>当然也可以给附加的属性参数内添加动画效果，如：</p>

<div class="wp_codebox"><table><tr id="p102834"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code" id="p1028code34"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#foo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    left<span style="color: #339933;">:</span> <span style="color: #CC0000;">500</span><span style="color: #339933;">,</span>
    top<span style="color: #339933;">:</span> <span style="color: #CC0000;">500</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
    duration<span style="color: #339933;">:</span> <span style="color: #CC0000;">2000</span><span style="color: #339933;">,</span>
    specialEasing<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        top<span style="color: #339933;">:</span> <span style="color: #3366CC;">'easeOutBounce'</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/animate/#per-property-easing" class="p_5" rel="external">per-property easing</a>的资料&#8230;</p>
<h3>五、新增live事件：</h3>
<p>在1.32版本中，live()方法只对click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup这些时间提供了支持，而不支持也比较常用的focus和blur时间。在1.4版本中新增了submit, change, focus, blur四种时间的支持。其中focus对应的是focusin事件，而blur对应了focusout事件。<br />
<br /><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102835"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p1028code35"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'focusin'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// do something with this</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'focusout'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// do something with this</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>六、控制方法的上下文对象：</h3>
<p>1.4版本在jQuery命名空间下新增了一个名叫”proxy“的方法，该方法有两个参数：一个是作用域，一个是准备执行的处理方法。在Javascript中，this关键字很巧妙地自动执行父亲对象或某个DOM元素对象。当有时候我们希望this指向的不是一个DOM元素对象，而是希望它指向一个之前创建的对象。</p>
<p>举个列子，就很容易明白！比如，现在我们有一个app对象，该对象内部有一个”clickHandler“方法和一个命名为”config“的对象。代码如下：</p>

<div class="wp_codebox"><table><tr id="p102836"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p1028code36"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> app <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    config<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        clickMessage<span style="color: #339933;">:</span> <span style="color: #3366CC;">'Hi!'</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    clickHandler<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">config</span>.<span style="color: #660066;">clickMessage</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>当我们调用app.clickHandler()方法时，app对象就有了自己的上下文对象：clickHandler方法中的this指向的是app对象。执行后会弹出内容为”Hi!“的提示框。若现在我希望将该app对象下的clickHandler方法绑定在一个超链接上，如下：</p>

<div class="wp_codebox"><table><tr id="p102837"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p1028code37"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> app.<span style="color: #660066;">clickHandler</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>而此时，当我们点击该超链接时，app对象下的clickHandler方法并不会执行，用Firebug测试则会提示&#8221;app.clickHandler is not a function!&#8221;。原因在于jQuery（以及绝大部分的事件对象）默认地将事件对象作为了该clickHandler方法的上下文对象，也就是此时this指向了a超链接标签元素。而我们的实际愿望是希望this执行app对象，那么1.4中我们就可以使用新增的proxy()方法来处理这一问题。代码如下：</p>

<div class="wp_codebox"><table><tr id="p102838"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p1028code38"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span>
    <span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span>
    jQuery.<span style="color: #660066;">proxy</span><span style="color: #009900;">&#40;</span>app<span style="color: #339933;">,</span> <span style="color: #3366CC;">'clickHandler'</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这样执行后提示框就会正常地弹出了。proxy()方法返回的是一个包装后的方法，它将执行你所期望的对象（通过第一个参数传递）。这在其他上下文对象中也很实用，比如给其他方法或插件传递回调函数。</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/jQuery.proxy" class="p_5" rel="external">jQuery.proxy()</a>方法的资料&#8230;</p>
<h3>七、延迟动画队列：</h3>
<p>在平时编写代码时，你或许发现有一个动画效果还没完成呢，下面的代码就已经执行完了。而我们希望的是等动画效果执行完成后或执行一段时间后再执行后面的代码。1.4版本中新增了delay()方法来延迟代码的执行。<br />
<br /><small class="red">jQuery1.32版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102839"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1028code39"><pre class="javascript" style="font-family:monospace;">setTimeout<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">500</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// do something</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><small class="red">jQuery1.4版本中实现代码：</small></p>

<div class="wp_codebox"><table><tr id="p102840"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p1028code40"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#foo'</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">slideDown</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// Slide down</span>
    .<span style="color: #660066;">delay</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">200</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// Do nothing for 200 ms</span>
    .<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Fade in</span></pre></td></tr></table></div>

<p>若你希望延迟一个动画队列比默认的“fx”(queue()函数的默认参数)还要慢的话，你只需要将这个queue的变量名当作delay()方法的第二个参数传递即可。</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/delay" class="p_5" rel="external">.delay(&#8230;)</a>方法的资料&#8230;</p>
<h3>八、判断一个DOM父对象中是否含有某个匹配的子对象：</h3>
<p>1.4中新增了一个过滤型的方法has()来判断某个对象是否在某个标签或集合内出现过。该方法将返回在标签中出现的所有匹配子对象的集合，至少会包含一个子对象。若没有找到匹配子对象，则返回的是一个空的集合。</p>

<div class="wp_codebox"><table><tr id="p102841"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p1028code41"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">has</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>当然jQuery1.32版本中的.contains()方法其实也可以达到同样的效果，1.4版本又对.contains()进行了完善。在1.4版本中通过给.contains()方法传递两个DOM对象参数，从而判断第二个参数对象是否在第一个参数对象中。代码如下：</p>

<div class="wp_codebox"><table><tr id="p102842"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p1028code42"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">contains</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">documentElement</span><span style="color: #339933;">,</span> document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// Returns true - &lt;body&gt; is within &lt;html&gt;</span>
<span style="color: #339933;">&lt;/</span>html<span style="color: #339933;">&gt;&lt;/</span>body<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

</p>
<p>&gt;&gt;&gt;&gt;阅读更多关于<a href="http://api.jquery.com/has/" class="p_l_5" rel="external">.has(…)</a>，<a href="http://api.jquery.com/jQuery.contains/" class="p_5" rel="external">jQuery.contains(…)</a>方法的资料&#8230;</p>
<p style="color:#090;">剩余的7点新特性隔一日发布！敬请期待吧，呵呵。</p>
<p>文章总结翻译来自：<a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/" rel="external">http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>电影:观影巨制《阿凡达》，电影新概念</title>
		<link>http://www.ihiro.org/avatar-the-new-concept-of-the-film</link>
		<comments>http://www.ihiro.org/avatar-the-new-concept-of-the-film#comments</comments>
		<pubDate>Sat, 16 Jan 2010 14:45:24 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[电影]]></category>
		<category><![CDATA[科幻片]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1024</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/avatar-logo.jpg" alt="" title="avatar-logo" width="100" height="100" class="alignleft size-full wp-image-1023" />
<p>或许大家都差不多已经去电影院看完了这部卡梅隆导演的新概念巨制电影，我也只是昨天去看了，而且是普通版的。因请了一天假去苏州学校取户口派遣，办完事后才到中午。便约了苏州的好友吃饭，完了一起去看《阿万达》。岂料没能赶上1点的3D版，而下一场次却要到5:30，而我又是4：35分回上海的火车，所以就只能将就地看了普通的版本。</p>
<p>看完的第一感受，两个字:“震撼”！一、全新的电影感念；二、是“环保”还是“拆迁”。</p>
<p>呵呵，卡梅隆这个传奇的导演，祝愿他的《阿凡达》可以超越他的《坦克尼克号》所创下的第一年18亿多票房记录吧。</p>]]></description>
			<content:encoded><![CDATA[<p>或许大家都差不多已经去电影院看完了这部卡梅隆导演的新概念巨制电影，我也只是昨天去看了，而且是普通版的。因请了一天假去苏州学校取户口派遣，办完事后才到中午。便约了苏州的好友吃饭，完了一起去看《阿万达》。岂料没能赶上1点的3D版，而下一场次却要到5:30，而我又是4：35分回上海的火车，所以就只能将就地看了普通的版本。</p>
<p>看完的第一感受，两个字:“震撼”！下面就来说说综合感受吧！</p>
<h3>一、全新的电影感念：</h3>
<p>在网上看到有专业的影评家将现今的电影业分为电影前和电影后两个阶段，电影前是指《阿凡达》为上映前，而电影后就指《阿凡达》上映后。由此可见《阿凡达》带来的是电影业跨时代的创新和全新的电影制作理念。</p>
<p>《阿凡达》采用了全真人的3D制作模式，以遥远的未来作为故事背景，同时赋予地球以外的星球无尽的美好遐想，给人以未来美好的希望。影片的特效十分逼真和震撼，场景美丽而又飘渺，仿佛从一个狭小的空间忽然来到了无垠的天地一搬，他震撼了你身心的每一寸地方。</p>
<h3>二、是“环保”还是“拆迁”：</h3>
<p>卡梅隆导演花费10年的时间开发、5年的时间导演出的《阿凡达》，本意旨在宣传环保，告示世人要珍惜我们可爱的地球。而到了中国上映后，被中国的观影者拿来与当下盛行的全国拆迁问题结合，变了味了。不过这也没有什么可别扭的，每个人看完的感觉都是不尽相同的！</p>
<p>总之，看完整部电影后，我甚是喜欢！呵呵，卡梅隆这个传奇的导演，祝愿他的《阿凡达》可以超越他的《坦克尼克号》所创下的记录吧。即使累计总票房超不了，怎么说也要超过《坦克尼克号》第一年18亿多的票房记录吧。祝愿您，卡梅隆！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/avatar-the-new-concept-of-the-film/feed</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>软件:Mozilla软件系列之邮件、日历软件</title>
		<link>http://www.ihiro.org/mozilla-software-series-email-calendar</link>
		<comments>http://www.ihiro.org/mozilla-software-series-email-calendar#comments</comments>
		<pubDate>Wed, 13 Jan 2010 09:53:41 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[软件下载]]></category>
		<category><![CDATA[日历]]></category>
		<category><![CDATA[软件]]></category>
		<category><![CDATA[邮件]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1011</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/thunder-bird-logo.jpg" alt="" title="thunder-bird-logo" width="100" height="100" class="alignleft size-full wp-image-1014" />
<p>最近在使用Mozilla公司的一些开源软件，觉得很是不错，推荐给大家。</p>
<p><a href="http://www.mozillamessaging.com/en-US/thunderbird/" rel="external">ThuderBird</a>是Mozilla公司开发的一款开源免费的邮件客户端。我是从2.*版本开始使用的，最近ThuderBird更新了3.0版本，升级后发现他的界面越发与Firefox相似，很是喜欢。该邮件客户端软件支持安装插件、主题。估计是因为使用者不多的原因，Mozilla插件页面中罗列的插件不是很多，只有10多个。</p>
<p><a href="http://www.mozilla.org/projects/calendar/sunbird/" rel="external">SunBird</a>是Mozilla公司开发的一款开源免费的独立日历、任务管理客户端。SunBird同样也支持安装插件、主题。</p>
<p>SunBird也有一个基于ThuderBird邮件客户端的插件版，叫做<a href="http://www.mozilla.org/projects/calendar/lightning/" rel="external">Lightning</a>，在ThuderBird的插件列表框中可以下载安装。</p>]]></description>
			<content:encoded><![CDATA[<p>最近在使用Mozilla公司的一些开源软件，觉得很是不错，推荐给大家。</p>
<h3>一、邮件软件</h3>
<p><a href="http://www.mozillamessaging.com/en-US/thunderbird/" rel="external">ThuderBird</a>是Mozilla公司开发的一款开源免费的邮件客户端。我是从2.*版本开始使用的，最近ThuderBird更新了3.0版本，升级后发现他的界面越发与Firefox相似，很是喜欢。该邮件客户端软件支持安装插件、主题。估计是因为使用者不多的原因，Mozilla插件页面中罗列的插件不是很多，只有10多个。<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/thunderbird-screenshot.jpg" alt="" title="thunderbird-screenshot" width="297" height="228" class="aligncenter size-full wp-image-1019" /></p>
<p class="demo-down-bar"><a href="http://download.mozilla.org/?product=thunderbird-3.0&#038;os=win&#038;lang=zh-CN" class="download" rel="external" title="ThuderBird下载">download</a></p>
<h3>二、日历软件</h3>
<p><a href="http://www.mozilla.org/projects/calendar/sunbird/" rel="external">SunBird</a>是Mozilla公司开发的一款开源免费的独立日历、任务管理客户端。SunBird同样也支持安装插件、主题。<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/sunbird-screenshot.jpg" alt="" title="sunbird-screenshot" width="298" height="230" class="aligncenter size-full wp-image-1018" /></p>
<p class="demo-down-bar"><a href="http://download.mozilla.org/?product=sunbird-0.9&#038;os=win&#038;lang=zh-CN" class="download" rel="external" title="SunBird下载">download</a></p>
<p>SunBird也有一个基于ThuderBird邮件客户端的插件版，叫做<a href="http://www.mozilla.org/projects/calendar/lightning/" rel="external">Lightning</a>，在ThuderBird的插件列表框中可以下载安装，也可以到<a href="https://addons.mozilla.org/en-US/thunderbird/" rel="external">Add-ons for Thunderbird</a>页面去下载。采用在ThuderBird安装Lightning日历插件的好处是可以将你的任务或者日历信息通过邮件直接发送出去，他们俩互相协作！</p>
<p class="demo-down-bar"><a href="https://addons.mozilla.org/en-US/thunderbird/downloads/latest/2313/platform:5/addon-2313-latest.xpi?src=homepagebrowse" class="download" rel="external" title="Lightning下载">download</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/mozilla-software-series-email-calendar/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>资讯:2010年01月编程语言排行榜</title>
		<link>http://www.ihiro.org/information-january-2010-programming-language-list</link>
		<comments>http://www.ihiro.org/information-january-2010-programming-language-list#comments</comments>
		<pubDate>Fri, 08 Jan 2010 15:06:19 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=1002</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/2010.01.language-logo.png" alt="" title="2010.01.language-logo" width="100" height="100" class="alignleft size-full wp-image-1003" />
<p>最近一周的时间没更新什么内容，也没怎么和左邻右里们互相来往。今天晚上在公司加班，乘着快结束的时候更新一篇文章！</p>
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站今天更新了最新10年01月份的编程语言排行榜。</p>
<p>就1月的排行榜信息，发现前20名的语言排名中，Javascript的排名下降了一位，被Perl语言所替换。并且Javascript的市场占有率有所下降。反之，PHP的势头依然强势，保持了09年12月的排名位置，而且市场占有率也有所上升。</p>]]></description>
			<content:encoded><![CDATA[<p>最近一周的时间没更新什么内容，也没怎么和左邻右里们互相来往。今天晚上在公司加班，乘着快结束的时候更新一篇文章！</p>
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站今天更新了最新10年01月份的编程语言排行榜。</p>
<p>就1月的排行榜信息，发现前20名的语言排名中，Javascript的排名下降了一位，被Perl语言所替换。并且Javascript的市场占有率有所下降。反之，PHP的势头依然强势，保持了09年12月的排名位置，而且市场占有率也有所上升。</p>
<h3>2010年01月份编程语言前20名：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/2010.01.language-no.png" alt="" title="2010.01.language-no" width="561" height="573" class="aligncenter size-full wp-image-1004" /></p>
<h3>2010年01月份编程语言前10名的走势图：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/01/2010.01.language-trend.png" alt="" title="2010.01.language-trend" width="633" height="479" class="aligncenter size-full wp-image-1005" /></p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/information-january-2010-programming-language-list/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>电影:迈克尔.杰克逊&#8211;《This is it》</title>
		<link>http://www.ihiro.org/michael-jackson-this-is-it</link>
		<comments>http://www.ihiro.org/michael-jackson-this-is-it#comments</comments>
		<pubDate>Sun, 27 Dec 2009 10:00:19 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[Michael. Jackson]]></category>
		<category><![CDATA[传记片]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=977</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/this-is-it.jpg" alt="this-is-it" title="this-is-it" width="100" height="113" class="alignleft size-full wp-image-980" />
<p>《This is it》是一部为了纪念伟大的传奇人物迈克尔.杰克逊而制作的一部传记片，影片的内容采用了迈克尔.杰克逊在2009年为谢幕演唱会而彩排的视频剪切而成。可以理解为一部演唱会幕后花絮的电影！</p>
<p>通过该电影让我更加认识了迈克尔，以及对待朋友和同事的那份亲切和温和。让我觉得他就是音乐、就是舞蹈的化身。唯一的可惜时，整部电影中没有出现太空步。</p>
<p>怀念迈克尔.杰克逊，采用电影中迈克尔的一句话：“God bless U!”。</p>
]]></description>
			<content:encoded><![CDATA[<p>《This is it》是一部为了纪念伟大的传奇人物迈克尔.杰克逊而制作的一部传记片，影片的内容采用了迈克尔.杰克逊在2009年为谢幕演唱会而彩排的视频剪切而成。可以理解为一部演唱会幕后花絮的电影！</p>
<p>《This is it》在今年的10月份就已经在全球上映了，但我一直没有机会去看。知道前段时间VeryCD网站上除了DVD清晰版。我下了，但没看。过了几天，出了720、1080分辨率的高清版本。我便又下了720分辨率的，一部电影6.7G，非常地清晰。</p>
<p>断断续续地看完这部电影，说实话，该电影没有看迈克尔的演唱会视频那么有激情。但在我看到Earth Song那段电影时，我感动了，它使我想到了当年迈克尔为非洲穷苦儿童集资的事情。迈克尔想通过这首《地球之歌》呼吁世界人民要爱护我们生活的地球，相应的MV则采用了一个小女孩在一片美丽的亚马逊森林的美景的快活生活，到最后森林被砍伐，小女孩为了挽救森林中的一株小草而牺牲了的情节，非常地感人。</p>
<p>通过该电影让我更加认识了迈克尔，以及对待朋友和同事的那份亲切和温和。让我觉得他就是音乐、就是舞蹈的化身。唯一的可惜时，整部电影中没有出现太空步。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/the-king-of-pop.jpg" alt="the-king-of-pop" title="the-king-of-pop" width="636" height="358" class="aligncenter size-full wp-image-979" /></p>
<p>怀念迈克尔.杰克逊，采用电影中迈克尔的一句话：“God bless U!”。</p>
<h3>影片下载及《地球之歌》MV下载</h3>
<p><a href="ed2k://|file|%5B%E8%BF%88%E5%85%8B%E5%B0%94%C2%B7%E6%9D%B0%E5%85%8B%E9%80%8A%EF%BC%9A%E5%B0%B1%E6%98%AF%E8%BF%99%E6%A0%B7%5D.This.Is.It.2009.720p.BluRay.x264.DTS-WiKi.mkv|7044203586|d3ec51ee0b3a0dcc5bf5b7068bf3c6e5|h=7e22e3ged4cfr333lfjbjyknbnetbspq|/" rel="external">720高清版下载</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E8%BF%88%E5%85%8B%E5%B0%94%C2%B7%E6%9D%B0%E5%85%8B%E9%80%8A%EF%BC%9A%E5%B0%B1%E6%98%AF%E8%BF%99%E6%A0%B7%5D.This.Is.It.2009.720p.BluRay.x264.DTS-WiKi.chs.srt|93506|8a443d24254efbcc41e37b2186f3d74e|s=http://subs.verycd.com/8a443d24254efbcc41e37b2186f3d74e93506/subtitles.srt|/" rel="external">影片字幕下载</a></p>
<p><a href="ed2k://|file|Michael.Jackson.-.Number.Ones.-.13.-.Earth.Song.mkv|114701779|06b68b654db50ef9035a02d1fa13203c|/" rel="external">《地球之歌》MV下载</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/michael-jackson-this-is-it/feed</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>软件:查看页面的http请求软件HttpWatch</title>
		<link>http://www.ihiro.org/httpwatch-for-viewing-the-http-requests</link>
		<comments>http://www.ihiro.org/httpwatch-for-viewing-the-http-requests#comments</comments>
		<pubDate>Fri, 25 Dec 2009 14:14:31 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[软件下载]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[软件]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=964</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/httpwatch-logo.png" alt="httpwatch-logo" title="httpwatch-logo" width="100" height="100" class="alignleft size-full wp-image-966" />
<p>今天在网上无意中搜索到这一软件，觉得对开发人员来说是一个相当不错的软件，便写下该文与大家分享。</p>
<p>HttpWatch是一个整合在IE和Firefox浏览器中的HTTP浏览器和调试器，无需离开浏览器窗口就可以检测到详细HTTP信息和HTTPS请求。</p>
<p>HttpWatch有两个版本的安装文件，分别是Basic版和Professional版。其中Basic版是免费下载使用，而Professional版需要购买license。HttpWatch的还有一个特点是兼容IE6-IE8，火狐浏览器，貌似暂不支持其他类型的浏览器。</p>]]></description>
			<content:encoded><![CDATA[<p>今天在网上无意中搜索到这一软件，觉得对开发人员来说是一个相当不错的软件，便写下该文与大家分享。</p>
<p>
<blockquote><span>HttpWatch是一个整合在IE和Firefox浏览器中的HTTP浏览器和调试器，无需离开浏览器窗口就可以检测到详细HTTP信息和HTTPS请求。</span></p></blockquote>
<h3>HttpWatch软件特性：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/httpwatch-name.png" alt="httpwatch-name" title="httpwatch-name" width="169" height="64" class="alignright size-full wp-image-967" /><br />
1.HttpWatch是一款IE和Firefox浏览器的HTTP查看器插件；<br />
2.可以监控到headers, cookies, caching and POST的数据信息；<br />
3.支持HTTPS、压缩、重定向和分块编码；<br />
4.实时地显示网页中请求级别、顺序以及花费时间等信息图表&#8230;</p>
<p>HttpWatch有两个版本的安装文件，分别是Basic版和Professional版。其中Basic版是免费下载使用，而Professional版需要购买license。HttpWatch的还有一个特点是兼容IE6-IE8，火狐浏览器，貌似暂不支持其他类型的浏览器。</p>
<p class="demo-down-bar"><a href="http://download.httpwatch.com/httpwatch.exe" rel="external" class="download"></a></p>
<h3>效果截图：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/httpwatch-screenshot.jpg" alt="httpwatch-screenshot" title="httpwatch-screenshot" width="640" height="289" class="aligncenter size-full wp-image-974" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/httpwatch-for-viewing-the-http-requests/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>生活:请假返苏，一天的感慨</title>
		<link>http://www.ihiro.org/back-to-suzhou</link>
		<comments>http://www.ihiro.org/back-to-suzhou#comments</comments>
		<pubDate>Tue, 22 Dec 2009 10:31:05 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[生活感悟]]></category>
		<category><![CDATA[情感]]></category>
		<category><![CDATA[生活]]></category>
		<category><![CDATA[都市]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=954</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/suzhou_logo.png" alt="suzhou_logo" title="suzhou_logo" width="100" height="100" class="alignleft size-full wp-image-953" />
<p>今天请了一天的假回苏州学校办理户口迁移及档案等事宜。正赶上今日是冬至，老多的上海人去苏州上坟啊！</p>
<p>说说我今天一天的感慨吧，说出来不为别的，就是“抒发抒发”情感。</p>
<p><strong>1.上海售票员与苏州售票员；2.苏州的公交车；3.必胜客餐厅。</strong></p>]]></description>
			<content:encoded><![CDATA[<p>今天请了一天的假回苏州学校办理户口迁移及档案等事宜。正赶上今日是冬至，老多的上海人去苏州上坟啊！</p>
<p>说说我今天一天的感慨吧：</p>
<h3>1.上海售票员与苏州售票员</h3>
<p>一直都知道上海的人们有点排外，今天也算见识到了。因我上周就计划了今天去苏州，便在周末时在火车票售票点买了去程的车票。今早去火车站到的比较早，便去售票大厅买返程的票。我要买3：30的返程，一问，售票员说没有，最早要到5点的，而且只有站票，说完把我的钱甩给了我，接着补充说：“今天是冬至”。大家想想，就算没有3：30的票，你难道不会问我要不要5点的吗（服务态度啊）？最后补充的那句我开始没怎么在意，权当是因为冬至扫墓的人多，票买完了也正常。既然没有，那我就先去苏州回来再想办法吧。</p>
<p>到了苏州下了火车，我就去了售票处一问3：30的票又不？售票员说：有的。我一喜：“难道我运气好？”。结果旁边的一位买票的也问要买3：30去上海的票，也买到了。</p>
<p>上面两者比较一下，大家可以看出什么端倪了吧！你上海售票员为了让你的老乡可以回上海，难道就不让我们这些上海建设者也回上海吗？</p>
<h3>2.苏州的公交车</h3>
<p>因学校的地理位置“优越”，从火车站出发的公交车只有一条，结果我今天还没找到。于是我先乘了一辆，然后换乘。在换乘站我等了半个小时才有一辆该线公交车珊珊而来。而就在我等待的半小时内，一条“游5”线已经过去了4辆了。去路线牌上一看，白底黑字地写着：高峰10分，平峰15分。。。</p>
<h3>3.必胜客餐厅</h3>
<p>相信大家对必胜客餐厅都已知晓，而我之前虽然知道，也路过，但一次也没去过。今天请好友吃饭便破天荒地第一次去了。12：20进去的，观前街玄妙观对面的那家。服务人员挺多，顾客几桌；服务员招呼入座之后，没有送水；好友点了一杯奶茶，端上来是冰的，让加热后端上来后勺子不见了；我点了一个法式红酒蜗牛，上菜后没有专用的勺子(而上海的莎丽亚意式餐厅确是有专用来舀蜗牛的勺子)，而且这道菜是6个蜗牛，却只有2片面包（而莎丽亚确是6个蜗牛、6片面包），试问必胜客的老总啊，我剩下的4个蜗牛用什么来盛呢；接着上意面了，配有一个勺子，此时我又要问必胜客老总了，你吃面是用勺子舀的吃的吗？</p>
<p>好，吃完饭后却没人来结帐，我就好心跑到柜台结帐。没人在，叫了人来，拿了我的钱后，却跑到厨房门前那去结帐了，而柜台处分明有结帐机嘛。结果我在柜台前等了5分钟有余，才算了结。</p>
<p>这顿必胜客“大餐”后我的感觉是：批萨一般，意面太淡，汤味道不错，服务一般，价格稍高，综合评分一般。于是便做了一个决定：这是我第一次来必胜客吃饭，也是最后一次了。以后还是去吃莎丽亚吧！</p>
<p>上面就是我今天一天的感概，说出来不为别的，就是“抒发抒发”情感。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/back-to-suzhou/feed</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>电影:《世界上最伟大的父亲》观后感</title>
		<link>http://www.ihiro.org/film-the-worlds-greatest-father</link>
		<comments>http://www.ihiro.org/film-the-worlds-greatest-father#comments</comments>
		<pubDate>Sat, 19 Dec 2009 17:58:05 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[剧情片]]></category>
		<category><![CDATA[影评]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=945</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/Worlds-Greatest-Dad-thum.jpg" alt="World&#039;s Greatest Dad-thum" title="World&#039;s Greatest Dad-thum" width="100" height="100" class="alignleft size-full wp-image-946" />
<p>已经有相当长的时间没有分享影视观感了，深夜时刻，看完这部《世界上最伟大的父亲》后，觉得很是印象深刻。便写下了下面的文字，与大家一起分享我的感受。</p>
<p>该片被定义为喜剧片，但我看完后更觉得是一部剧情片，因为它让你笑不起来。</p>
<p>影片讲述了一位预想成名的作家父亲兰斯，一直给出版社投稿却不得志。而他的儿子Kyle处在青春年华时代，是一个十足的小混蛋。在一次意外的“事故”...</p>]]></description>
			<content:encoded><![CDATA[<p>已经有相当长的时间没有分享影视观感了，深夜时刻，看完这部《世界上最伟大的父亲》后，觉得很是印象深刻。便写下了下面的文字，与大家一起分享我的感受。</p>
<p>该片被定义为喜剧片，但我看完后更觉得是一部剧情片，因为它让你笑不起来。</p>
<h3>故事概要：</h3>
<p>影片讲述了一位预想成名的作家父亲兰斯，一直给出版社投稿却不得志。而他的儿子Kyle处在青春年华时代，是一个十足的小混蛋。在一次意外的“事故”(该事故不便说明，预知请看电影)后不幸死去。兰斯为了不将儿子Kyle的“丑事”被大家发现，便制造了Kyle自杀的迹象：为儿子写了一段深刻的遗书，并且伪造撰写了儿子的日记。没想到这份遗书被公告在了报纸上，学校的同学和老师们纷纷阅读，给大家带去了鼓励和勇气。后来在学校校医的帮助下将撰写的日志印刷成小册子，分发给学生和老师阅读，影响广泛。电视台、出版商纷纷找到兰斯，让他上电视、出版该日志。兰斯终于风光了，也成名了。</p>
<p>但风光的背后，兰斯发现自己并不快乐。他背负着太多的压力，俗话说：一个谎言是需要千万个谎言来装饰的。终于在学校一儿子Kyle之名捐赠图书馆时，兰斯说出了真相。</p>
<h3>影片经典：</h3>
<p>在兰斯说出真相后，同学和老师都对兰斯报以仇视，而兰斯仿佛解决了一般。他一边跑出教室，一边脱光了自己的衣服，来到学校游泳馆时，全身脱得只剩下了袜子。没错，他从高台上跳下了游泳池，一个漂亮的动作，以及之后的付出水面。这一段是采用的慢播的方式进行播放的，它的意思非凡啊。一种心情吧，或许你看完了也会有一个别样的心情吧。</p>
<h3>影片下载：(来自<a href="http://www.verycd.com/topics/2782890/" rel="external">VeryCD</a>)</h3>
<p><a href="ed2k://|file|%5B%E4%B8%96%E7%95%8C%E4%B8%8A%E6%9C%80%E4%BC%9F%E5%A4%A7%E7%9A%84%E7%88%B6%E4%BA%B2%5D.Worlds.Greatest.Dad.2009.LIMITED.DVDRip.XviD-AMIABLE.avi|733999104|2205579454047928ad0d9ea1b1d8d325|h=klba4eupv2el4pecbpyh3ro4abk2yssv|/"  rel="external">下载链接</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E4%B8%96%E7%95%8C%E4%B8%8A%E6%9C%80%E4%BC%9F%E5%A4%A7%E7%9A%84%E7%88%B6%E4%BA%B2%5D.Worlds.Greatest.Dad.2009.LIMITED.DVDRip.XviD-AMIABLE.chs.srt|104575|7bab60708c6d55ddc04aad6657110c10|s=http://subs.verycd.com/7bab60708c6d55ddc04aad6657110c10104575/subtitles.srt|/" rel="external">字幕下载</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/film-the-worlds-greatest-father/feed</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>Javascript:10个Javscript编程的技巧</title>
		<link>http://www.ihiro.org/10-javascript-tips</link>
		<comments>http://www.ihiro.org/10-javascript-tips#comments</comments>
		<pubDate>Fri, 18 Dec 2009 09:45:50 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[译文]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=941</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/javascript-tips.png" alt="javascript-tips" title="javascript-tips" width="100" height="100" class="alignleft size-full wp-image-951" />
<p>今天在<a href="http://www.impressivewebs.com/" rel="external">Blog：Impressive Webs</a>上看到这篇总结了10个Javascript技巧的文章。觉得比较受用，便简约地理解后翻译了给需要的朋友学习学习。</p>
<p>文章中的10条小技巧或许对大家来说已经是了然于胸了，但有时候编程晕头晕脑的，不经意间就会忘记。所以在平时的编程过程中养成一个良好的编程习惯是一个程序员最基础的素质要求。只要多练、多看、多学习，我们的编程技术就会越来越高明的！</p>
<p>该文整理来自：<a href="http://www.impressivewebs.com/10-javascript-quick-tips-and-best-practices/" rel="external">Impressive Webs:10 JavaScript Quick Tips and Best Practices</a></p>]]></description>
			<content:encoded><![CDATA[<p>今天在<a href="http://www.impressivewebs.com/" rel="external">Blog：Impressive Webs</a>上看到这篇总结了10个Javascript技巧的文章。觉得比较受用，便简约地理解后翻译了给需要的朋友学习学习。</p>
<h3>1.外部引入js文件时，使用defer属性供IE浏览器解析</h3>
<p>这个属性可加可不加，不管添加defer属性是不是一个好的编程技巧，但该属性在适当的时候会派上用场的。它的使用方法如下：</p>

<div class="wp_codebox"><table><tr id="p94143"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p941code43"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span> defer<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;defer&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>添加defer属性的目的是在引入外部js文件时告诉Ie浏览器，只有在等页面加载完成后才执行引入的js文件中的js代码。当然这也可以通过一些比较好的代码实现，这些好的代码可以避免页面在没有加载完DOM就执行外部引入的js代码的问题。</p>
<p>注：defer属性只有IE浏览器才会支持。</p>
<h3>2.使用一个CDATA区域来避免XHTML Strict文件验证的错误</h3>
<p>XHTML Strict文件对页面中的标签和代码要求甚高，而js代码中常常出现运算符，而W3C验证XHTML Strict文件时，会认为页面js代码中的&#8221;< "、">&#8220;等运算符为一个标签的开始和结束，这样就会出现验证错误。</p>
<p>所以比较好的XHTML Strict文件中js编程习惯时给js代码外围加上一个CDATA区域，以达到该段js可以通过W3C验证。效果如下：</p>

<div class="wp_codebox"><table><tr id="p94144"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p941code44"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #006600; font-style: italic;">//&lt; ![CDATA[</span>
<span style="color: #003366; font-weight: bold;">var</span> my_variable <span style="color: #339933;">=</span> <span style="color: #CC0000;">100</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>my_variable <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// do something here...</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">//]]&gt;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

</p>
<h3>3.避免使用Javascript的关键字来自定义变量</h3>
<p>每一种编程语言都有默认的一些关键字，在日常的代码编写过程中都因避免使用关键字作为自定义变量名。Javascript中的关键字有:</p>

<div class="wp_codebox"><table><tr id="p94145"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="code" id="p941code45"><pre class="html" style="font-family:monospace;">break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with</pre></td></tr></table></div>

</p>
<h3>4.避免使用Javascript的保留字来自定义变量</h3>
<p>同样每一种编程语言都有一定量的保留字，在自定义变量时也因避免使用这些保留字作为自定义变量名。Javascript的保留字有:</p>

<div class="wp_codebox"><table><tr id="p94146"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
</pre></td><td class="code" id="p941code46"><pre class="html" style="font-family:monospace;">abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile</pre></td></tr></table></div>

</p>
<h3>5.在自定义一个变量并赋予相应的类型后，在之后的代码中避免改变该变量的类型</h3>
<p>在Javascript编程中，如下的写法是不太理想的：</p>

<div class="wp_codebox"><table><tr id="p94147"><td class="line_numbers"><pre>1
2
</pre></td><td class="code" id="p941code47"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> my_variable <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;This is a String&quot;</span><span style="color: #339933;">;</span>
my_variable <span style="color: #339933;">=</span> <span style="color: #CC0000;">50</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>在第一行给my_variable变量赋予了一个String的类型，而在第二行却改变为了Integer类型，这样写是一个不好的习惯，应该避免这种情况的发生。
</p>
<h3>6.不要使用全局变量</h3>
<p>
为了防止可能发生的冲突，99％的情况下，使用var关键字最初声明变量和赋予该变量值。这将确保您的变量是局部的，而不是声明它们的功能函数之外。这样的话，在两个不同的函数体内使用相同的变量名就不会发生变量的冲突。而这里在函数体内定义的变量在函数执行完成后就会被取消，从而节省了命名空间。
</p>
<h3>7.Javascript对大小写敏感</h3>
<p>看下面的两个自定义变量，它们代表了两个不同的变量：</p>

<div class="wp_codebox"><table><tr id="p94148"><td class="line_numbers"><pre>1
2
</pre></td><td class="code" id="p941code48"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myVariable <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;data&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> myvariable <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;more data&quot;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>所以，在日常的编写代码时，养成一个好的编程习惯，不要无意间因大小写的问题而定义了两个变量，其实你需要的只是一个变量。
</p>
<h3>8.使用switch声明来处理多种条件判断</h3>
<p>在多个条件判断代码的编写时，不要如下编写代码：</p>

<div class="wp_codebox"><table><tr id="p94149"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code" id="p941code49"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>example_variable <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;cyan&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// do something here...</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>example_variable <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;magenta&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// do something here...</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>example_variable <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;yellow&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// do something here...</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>example_variable <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;black&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// do something here...</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// do something here...</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>而是应该这样使用：</p>

<div class="wp_codebox"><table><tr id="p94150"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code" id="p941code50"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">switch</span> <span style="color: #009900;">&#40;</span>example_variable<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">&quot;cyan&quot;</span><span style="color: #339933;">:</span>
		<span style="color: #006600; font-style: italic;">// do something here...</span>
		<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">&quot;magenta&quot;</span><span style="color: #339933;">:</span>
		<span style="color: #006600; font-style: italic;">// do something here...</span>
		<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">&quot;yellow&quot;</span><span style="color: #339933;">:</span>
		<span style="color: #006600; font-style: italic;">// do something here...</span>
		<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">&quot;black&quot;</span><span style="color: #339933;">:</span>
		<span style="color: #006600; font-style: italic;">// do something here...</span>
		<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">default</span><span style="color: #339933;">:</span>
		<span style="color: #006600; font-style: italic;">// do something here...</span>
		<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>上面的两端代码执行的结果是一样的，但第二种使用swicth编写的代码便于阅读、管理和修改。
</p>
<h3>9.使用try-catch，以防止向用户显示错误</h3>
<p>将需要执行的代码包含在try-catch中，这样用户就永远看不多Javascript的报错信息。如下：</p>

<div class="wp_codebox"><table><tr id="p94151"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p941code51"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
	nonExistentFunction<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>error<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;An error has occured.&quot;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>在上面的代码中我试图去调用一个实际不存在的函数来产生一个错误。而浏览器则不会显示“not an object” 或者 “object expected”错误，而是现实了我在catch体内自定义的错误信息。当然你也可以在catch体内不懈任何代码，这样什么错误信息都不会输出。或者也可以在catch体内调用一个自定义的捕获错误的函数，以便调试其中的错误。
</p>
<p>当然，错误也有可能来自开发人员本身代码的错误，所以在代码中加上适当的注释信息是必不可少的。</p>
<h3>10.使用简约的多行注释对代码进行说明</h3>
<p>在Javascript中，注释有单行注释和多行注释之分。而有时候的注释文字很长时，良好的习惯是将注释文字放在多行中，以便于阅读。</p>

<div class="wp_codebox"><table><tr id="p94152"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p941code52"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*
 * 我是多行注释 ...
 * 注释..
 * 注释...
 * 注释...
 * 注释...
 */</span></pre></td></tr></table></div>

</p>
<p><strong>总结：</strong>上面的10条小技巧或许对大家来说已经是了然于胸了，但有时候编程晕头晕脑的，不经意间就会忘记。所以在平时的编程过程中养成一个良好的编程习惯是一个程序员最基础的素质要求。只要多练、多看、多学习，我们的编程技术就会越来越高明的！</p>
<p>该文整理来自：<a href="http://www.impressivewebs.com/10-javascript-quick-tips-and-best-practices/" rel="external">Impressive Webs:10 JavaScript Quick Tips and Best Practices</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/10-javascript-tips/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>jQuery:通过事件委派一次绑定多种事件，以减少事件冗余</title>
		<link>http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy</link>
		<comments>http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy#comments</comments>
		<pubDate>Wed, 16 Dec 2009 03:42:39 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=932</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/tooltips-logo.png" alt="tooltips-logo" title="tooltips-logo" width="100" height="100" class="alignleft size-full wp-image-938" />
<p>jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。</p>
<h3>1.事件冗余：多个事件方法中多次调用相同的代码</h3>
<h3>2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作</h3>]]></description>
			<content:encoded><![CDATA[<p>jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。</p>
<h3>1.事件冗余：多个事件方法中多次调用相同的代码</h3>
<p>下面的代码是一个事件方法连缀的写法：</p>

<div class="wp_codebox"><table><tr id="p93253"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</pre></td><td class="code" id="p932code53"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div id=&quot;livetip&quot;&gt;&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> tipTitle <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#mytable'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mouseover'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> $link <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">closest</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$link.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> link <span style="color: #339933;">=</span> $link<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
			tipTitle <span style="color: #339933;">=</span> link.<span style="color: #660066;">title</span><span style="color: #339933;">;</span>
			link.<span style="color: #660066;">title</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#livetip'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				top<span style="color: #339933;">:</span> event.<span style="color: #660066;">pageY</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">12</span><span style="color: #339933;">,</span>
				left<span style="color: #339933;">:</span> event.<span style="color: #660066;">pageX</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">12</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div&gt;'</span> <span style="color: #339933;">+</span> tipTitle <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/div&gt;&lt;div&gt;'</span> <span style="color: #339933;">+</span> link.<span style="color: #660066;">href</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mouseout'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> $link <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">closest</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$link.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$link.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'title'</span><span style="color: #339933;">,</span> tipTitle<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#livetip'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mousemove'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> $link <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">closest</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> $link.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#livetip'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				top<span style="color: #339933;">:</span> event.<span style="color: #660066;">pageY</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">12</span><span style="color: #339933;">,</span>
				left<span style="color: #339933;">:</span> event.<span style="color: #660066;">pageX</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">12</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>其中第5|6行、第18|19行、第24|25行多次地使用了同样的一段代码去判断事件对象是否存在。这不管是从代码效率还是代码文件大小的方面来说都是不合理的方法。
</p>
<h3>2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作</h3>
<p>为了更好地优化上面的代码，可以通过事件委派来修改代码，修改后的代码如下：</p>

<div class="wp_codebox"><table><tr id="p93254"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
</pre></td><td class="code" id="p932code54"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> $liveTip <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div id=&quot;livetip&quot;&gt;&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> tipTitle <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#mytable'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mouseover mouseout mousemove'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	  <span style="color: #003366; font-weight: bold;">var</span> $link <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">closest</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>$link.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
	  <span style="color: #003366; font-weight: bold;">var</span> link <span style="color: #339933;">=</span> $link<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">type</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'mouseover'</span> <span style="color: #339933;">||</span> event.<span style="color: #660066;">type</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'mousemove'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$liveTip.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		  top<span style="color: #339933;">:</span> event.<span style="color: #660066;">pageY</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">12</span><span style="color: #339933;">,</span>
		  left<span style="color: #339933;">:</span> event.<span style="color: #660066;">pageX</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">12</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	  <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
	  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">type</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'mouseover'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		tipTitle <span style="color: #339933;">=</span> link.<span style="color: #660066;">title</span><span style="color: #339933;">;</span>
		link.<span style="color: #660066;">title</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
		$liveTip.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div&gt;'</span> <span style="color: #339933;">+</span> tipTitle <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/div&gt;&lt;div&gt;'</span> <span style="color: #339933;">+</span> link.<span style="color: #660066;">href</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	  <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
	  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">type</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'mouseout'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$liveTip.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>tipTitle<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			link.<span style="color: #660066;">title</span> <span style="color: #339933;">=</span> tipTitle<span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	  <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>该段代码中一次性地将多个事件绑定到一个待处理的DOM对象之上，在代码的内部通过判断事件的类别来委派不同的处理代码。这样可以避免代码的重复定义，以达到避免时间冗余的效果。
</p>
<p>以上两种代码的执行后的效果是完全一样的，相信大家一眼就可以看中哪一种代码的执行效率更加的快速吧！</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/event_delegation/event_delegation.rar" class="download">download</a><a href="http://www.ihiro.org/cases/event_delegation/" rel="external" class="demo">demo</a></p>
<p><strong style="color:#090;">以上的代码来自：<a href="http://www.learningjquery.com/2009/12/binding-multiple-events-to-reduce-redundancy-with-event-delegation-tooltips" rel="external">Learning jQuery:Binding Multiple Events to Reduce Redundancy with Event-Delegation Tooltips</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>PHP:pathinfo()获得文件的路径、名称等信息</title>
		<link>http://www.ihiro.org/pathinfo-to-obtain-filepath-and-filename</link>
		<comments>http://www.ihiro.org/pathinfo-to-obtain-filepath-and-filename#comments</comments>
		<pubDate>Fri, 11 Dec 2009 07:15:58 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[后台编程]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=926</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/path-logo.png" alt="path-logo" title="path-logo" width="100" height="100" class="alignleft size-full wp-image-929" />
<p>最近试图着去阅读一些PHP编程的资料，希望通过学习可以掌握好这门开源的后台编程语言。函数是编程语言的主要组成，所以多熟悉PHP语言内部函数的应用和意义，对我以后的PHP编程意义重大。</p>
<p>近两个月来我的js编程有了很大的提高，在借助与jQuery库的帮助下，着实写出了一些很多行实用的代码，运用到了项目中。所以我有了一个想法，我想我的下一个WP主题要使用大量的js来是想效果，运用一些Ajax的特性，使得我的博客更加地人性化。但因PHP编程不熟的原因所以只能推迟。</p>
<p>在PHP中，若想通过函数获得一个文件的路径、名称，或者是扩展名等，是非常容易的一件事。可以使用dirname()、basename()、pathinfo()等多种途径获得相应的信息。</p>
<p style="color:#f00;">该文内容为个人学习之用，不关心的朋友可以不做理会！</p>]]></description>
			<content:encoded><![CDATA[<p>最近试图着去阅读一些PHP编程的资料，希望通过学习可以掌握好这门开源的后台编程语言。函数是编程语言的主要组成，所以多熟悉PHP语言内部函数的应用和意义，对我以后的PHP编程意义重大。</p>
<p>近两个月来我的js编程有了很大的提高，在借助与jQuery库的帮助下，着实写出了一些很多行实用的代码，运用到了项目中。所以我有了一个想法，我想我的下一个WP主题要使用大量的js来是想效果，运用一些Ajax的特性，使得我的博客更加地人性化。但因PHP编程不熟的原因所以只能推迟。</p>
<p>废话不说了，进入主题。</p>
<p>在PHP中，若想通过函数获得一个文件的路径、名称，或者是扩展名等，是非常容易的一件事。可以使用dirname()、basename()、pathinfo()等多种途径获得相应的信息。假设现在有一个图片文件，它的服务器端路径为：</p>

<div class="wp_codebox"><table><tr id="p92655"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p926code55"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$path</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;/www/mywebsite/images/myphoto.jpg&quot;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>1.pathinfo()函数</h3>
<p>pathinfo()函数返回的是一个包含了文件信息的数组，数组中有四个元素，分别是dirname、basename、extension、filename。打印数组的代码：</p>

<div class="wp_codebox"><table><tr id="p92656"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p926code56"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$fileArr</span> <span style="color: #339933;">=</span> <span style="color: #990000;">pathinfo</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$path</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">print_r</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$fileArr</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//输出结果：Array ( [dirname] =&gt; /www/mywebsite/images [basename] =&gt; myphoto.jpg [extension] =&gt; jpg [filename] =&gt; myphoto )</span></pre></td></tr></table></div>

<p>这样我们只需根据数组的键名就可以获得对应的键值：</p>

<div class="wp_codebox"><table><tr id="p92657"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p926code57"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> <span style="color: #000088;">$fileArr</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'filename'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//输出结果：myphoto  </span>
<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$fileArr</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'extension'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//输出结果：jpg</span>
<span style="color: #666666; font-style: italic;">//...</span></pre></td></tr></table></div>

</p>
<h3>2.dirname()函数</h3>
<p>dirname()函数给出一个包含有指向一个文件的全路径的字符串，它返回的值去掉文件名后的目录名，可以认为是对pathinfo()函数的扩展：</p>

<div class="wp_codebox"><table><tr id="p92658"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p926code58"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> <span style="color: #990000;">dirname</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$path</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//输出结果：/www/mywebsite/images</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//或者</span>
<span style="color: #b1b100;">echo</span> <span style="color: #990000;">dirname</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/www/mywebsite/images/&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
<span style="color: #b1b100;">echo</span> <span style="color: #990000;">dirname</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/www/mywebsite/images&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//输出的结果都为：/www/mywebsite</span></pre></td></tr></table></div>

<p>所以可以理解为返回的值为路径的上一层目录地址名。
</p>
<h3>3.basename()函数</h3>
<p>basename()函数给出一个包含有指向一个文件的全路径的字符串，他返回的值为基本的文件名，同样可以认为是对pathinfo()函数的扩展：</p>

<div class="wp_codebox"><table><tr id="p92659"><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code" id="p926code59"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> <span style="color: #990000;">basename</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$path</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//输出结果：myphoto.jpg</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//或者</span>
<span style="color: #990000;">basename</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/www/mywebsite/images/&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//输出结果：images</span></pre></td></tr></table></div>

<p>所以可以理解为返回的值为路径的当前目录的名称。
</p>
<p style="color:#f00;">该文内容为个人学习之用，不关心的朋友可以不做理会！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/pathinfo-to-obtain-filepath-and-filename/feed</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>资讯:2009年12月编程语言排行榜</title>
		<link>http://www.ihiro.org/information-december-2009-programming-language-list</link>
		<comments>http://www.ihiro.org/information-december-2009-programming-language-list#comments</comments>
		<pubDate>Sun, 06 Dec 2009 13:41:02 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=890</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/2009.12.language-logo.gif" alt="2009.12.language-logo" title="2009.12.language-logo" width="100" height="100" class="alignleft size-full wp-image-891" />
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站更新了最新09年12月份的编程语言排行榜。</p>
<p>就这次的编程语言排行，我非常开心地看到了Javascript的提升，从11月的第9名上升到了第8名，而且市场占有率升了0.6%多，从11月的2.916%升到了3.515%。值得庆贺啊！另外貌似PHP的占有率也在持续上升，而Java的占有率则持续下降，都快被C语言给赶超了，真是有点失望啊。</p>
<p>近期工作比较不忙了，在研究一些jQuery插件和试着编写一些使用的插件。另外准备重新去学习PHP，毕竟我还是觉得PHP比较有前景。</p>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站更新了最新09年12月份的编程语言排行榜。</p>
<p>就这次的编程语言排行，我非常开心地看到了Javascript的提升，从11月的第9名上升到了第8名，而且市场占有率升了0.6%多，从11月的2.916%升到了3.515%。值得庆贺啊！另外貌似PHP的占有率也在持续上升，而Java的占有率则持续下降，都快被C语言给赶超了，真是有点失望啊。</p>
<p>近期工作比较不忙了，在研究一些jQuery插件和试着编写一些使用的插件。另外准备重新去学习PHP，毕竟我还是觉得PHP比较有前景。</p>
<h3>2009年12月份编程语言前20名：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/2009.12.language-no.gif" alt="2009.12.language-no" title="2009.12.language-no" width="560" height="573" class="aligncenter size-full wp-image-892" /></p>
<h3>2009年12月份编程语言前10名的走势图：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/2009.12.language-trend.gif" alt="2009.12.language-trend" title="2009.12.language-trend" width="638" height="479" class="aligncenter size-full wp-image-893" /></p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/information-december-2009-programming-language-list/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>DNS:Wopus服务器迁移，停博一天终恢复</title>
		<link>http://www.ihiro.org/wopus-server-migration-blog-stop-for-one-day</link>
		<comments>http://www.ihiro.org/wopus-server-migration-blog-stop-for-one-day#comments</comments>
		<pubDate>Fri, 04 Dec 2009 15:25:51 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[虚拟主机]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=884</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/dns-logo.gif" alt="dns-logo" title="dns-logo" width="100" height="100" class="alignleft size-full wp-image-885" />
<p>终于啊，我的博客在停博一天后终于恢复了。因事先并不知道Wopus服务器迁移的通知，导致当我发现博客不能访问时大大地担心了一场。就在刚刚，终于域名解析完成，我的博客又回来了。</p>
<p>这次由中国移动“引领”的全国大量服务器被封、被迁移的IT运动，着实让我这样的民工们“享受”了一回。移动赚着广大民众的RMB去做那些不合法的勾当，确实不应该啊。最终还牵连到我们这些无辜的人们，移动需要谴责。</p>
<p>我可上线半年以来还没有一次当机事件，这次的当机一天导致的结果是我一天的访问量全无。也给一些博友们带去了不便，这里给大家<strong style="color:#f00;">道歉</strong>了。但这些也不是我们这些小人物可以控制的了的，没办法啊！</p>]]></description>
			<content:encoded><![CDATA[<p>终于啊，我的博客在停博一天后终于恢复了。因事先并不知道Wopus服务器迁移的通知，导致当我发现博客不能访问时大大地担心了一场。就在刚刚，终于域名解析完成，我的博客又回来了。</p>
<p>这次由中国移动“引领”的全国大量服务器被封、被迁移的IT运动，着实让我这样的民工们“享受”了一回。移动赚着广大民众的RMB去做那些不合法的勾当，确实不应该啊。最终还牵连到我们这些无辜的人们，移动需要谴责。</p>
<p>我可上线半年以来还没有一次当机事件，这次的当机一天导致的结果是我一天的访问量全无。也给一些博友们带去了不便，这里给大家<strong style="color:#f00;">道歉</strong>了。但这些也不是我们这些小人物可以控制的了的，没办法啊！</p>
<p>希望我们国家的工信部啊，可以安定点。别没事搞个大迁移，没事搞个封网站什么的，就说Google Doc吧。已经一个多星期不能访问了，导致的结果是我一个星期的工作报道都没写（我是写好了共享给我的领导的）。唉，不说了，还是做好自己的份内之事吧。希望没有备案的博友们赶紧去备案吧，别过几天就被关了！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/wopus-server-migration-blog-stop-for-one-day/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>jQuery:如何在页面和插件代码中自定义别名</title>
		<link>http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code</link>
		<comments>http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code#comments</comments>
		<pubDate>Tue, 01 Dec 2009 14:03:47 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=860</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/12/jquery-plugins.gif" alt="jquery-plugins" title="jquery-plugins" width="100" height="100" class="alignleft size-full wp-image-868" />
<p>众所周知，jQuery是采用$符号作为库的别名，但若是和其他类型的库一直使用是，其他库也有用$符号作为别名的，这样就会引起函数的冲突。所以更多的时间是建议大家使用jQuery来做为别名，或者自定义别名。该片文章重点地讲述了如何在页面代码和插件代码中自定义别名，以便于其他库的兼容，为之后的插件开发之旅铺垫道路！</p>
<h3>1.在页面使用代码中如何自定义别名；</h3>
<h3>2.在插件代码中如何自定义别名。</h3>]]></description>
			<content:encoded><![CDATA[<p>众所周知，jQuery是采用$符号作为库的别名，但若是和其他类型的库一直使用是，其他库也有用$符号作为别名的，这样就会引起函数的冲突。所以更多的时间是建议大家使用jQuery来做为别名，或者自定义别名。该片文章重点地讲述了如何在页面代码和插件代码中自定义别名，以便于其他库的兼容，为之后的插件开发之旅铺垫道路！</p>
<h3>1.在页面使用代码中如何自定义别名</h3>
<p>通常，我们是这样开始jQuery库的使用的：</p>

<div class="wp_codebox"><table><tr id="p86060"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p860code60"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//一些代码</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//或者是简写的方式：</span>
$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//一些代码</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>但是，若遇到了使用其他非jQuery库的情况，就需要对上面的代码进行改动了，所以兼容性不够好。比较好的方法是将$符号写全（jQuery）：</p>

<div class="wp_codebox"><table><tr id="p86061"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p860code61"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//一些代码</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>但是大家或许发现了，这样写的话，以后查找dom、或调用jQuery库中的函数，都需要写jQuery(&#8216;p&#8217;)、jQuery.trim()。是否觉得比较麻烦，还是觉得$符号好用呢？
</p>
<p>那么为你来介绍如何在页面代码中自定义别名的方法吧。格式如下：</p>

<div class="wp_codebox"><table><tr id="p86062"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p860code62"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>hiro<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//在内部我就可以这样使用,来弹出我当前使用浏览器的版本号</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>hiro.<span style="color: #660066;">browser</span>.<span style="color: #660066;">version</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>只需要在function中传入一个自定义的参数，该参数就是你的自定义别名了。该别名可以随意地自定义，当然可以使用$符号来自定义了，格式如下：</p>

<div class="wp_codebox"><table><tr id="p86063"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p860code63"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//在内部我就可以这样使用,来弹出我当前使用浏览器的版本号</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">browser</span>.<span style="color: #660066;">version</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这样使用的好处是，即使你在引入新的库后，也不会和新库产生冲突。
</p>
<h3>2.在插件代码中如何自定义别名</h3>
<p>插件的实现原理就是将所有的插件代码都写在一个方法体内，然后执行即可。就像这样：</p>

<div class="wp_codebox"><table><tr id="p86064"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p860code64"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// 这里可以写插件的代码</span>
  <span style="color: #003366; font-weight: bold;">var</span> xyz<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// xyz 不是一个全局变量，他只在该方法体内可以获得</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// 该方法会立即执行（这里用到了匿名函数的概念）</span></pre></td></tr></table></div>

<p>这里多余的括号是必须的，因为你若不加括号的话，匿名函数就得不到执行。
</p>
<p>那么在插件中自定义别名就很简单了，和在页面中自定义别名类似，格式如下：</p>

<div class="wp_codebox"><table><tr id="p86065"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p860code65"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// 这里可以写插件的代码</span>
  <span style="color: #003366; font-weight: bold;">var</span> xyz<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// xyz 不是一个全局变量，他只在该方法体内可以获得</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>在上面的我给方法传入一个jQuery的参数，是因为该方法是对jQuery库的扩展，那么在该方法体内就可以调用jQuery库中的函数；若不传入，则无法调用jQuery库
</p>
<h3>一个小的插件编写技巧：</h3>
<p>在我阅读国外的开发人员编写的插件时，发现很多的插件都会在代码的开始部分加上一个分号，格式如下：</p>

<div class="wp_codebox"><table><tr id="p86066"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p860code66"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">;</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// 这里可以写插件的代码</span>
  <span style="color: #003366; font-weight: bold;">var</span> xyz<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// xyz 不是一个全局变量，他只在该方法体内可以获得</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>我猜测这是因为很多的插件在代码的最前面会加上一些版权信息和使用方法的注释信息，加一个分号是为了防止注释结束遗忘吧，也告示着插件代码的开始！(<strong style="color:#f60;">个人猜测，仅供参考！</strong>)
</p>
<p>具体的代码实现格式和运用可以阅读<a href="http://www.ihiro.org/cases/js/jquery-tooltip/jquery.tooltip.js" rel="external">jQuery.tooltips.js</a>的源代码，他的编写方式比较“正统”！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>HTML:编写干净的且富有语义的html代码</title>
		<link>http://www.ihiro.org/coding-clean-and-rich-semantic-html</link>
		<comments>http://www.ihiro.org/coding-clean-and-rich-semantic-html#comments</comments>
		<pubDate>Mon, 30 Nov 2009 03:44:08 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[译文]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=845</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/cleaner-coding.gif" alt="cleaner-coding" title="cleaner-coding" width="100" height="100" class="alignleft size-full wp-image-855" />
<p>如果你是一个使用div标签做任何事的家伙，那么这篇文章将对你十分有益。该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。你是否曾经也试图去修改别人的一些html模板，那么你一定会被代码里那些肮脏的标签所抓狂。编写干净的html代码，不仅对你自己有益，而且对你的团队也有益。他将大大地节约了你的开发与错误调试时间（特别是比较大的一些项目）。</p>
<p>1.尽可能少地使用div标签；<br />
2.使用div标签来控制页面的整体布局，如头部，内容部，侧边栏，底部等；<br />
3.内容必须包含在对应的语义标签内，而不是包含在div内；<br />
4.格式化你的源代码并且在结束标签处给出对应的注释语言。</p>
<p>该文翻译自：<a href="http://www.webdesignerwall.com/tutorials/coding-clean-and-semantic-templates/" rel="external">WebDesignWall: Coding Clean and Semantic Templates</a></p>]]></description>
			<content:encoded><![CDATA[<p>如果你是一个使用div标签做任何事的家伙，那么这篇文章将对你十分有益。该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。你是否曾经也试图去修改别人的一些html模板，那么你一定会被代码里那些肮脏的标签所抓狂。编写干净的html代码，不仅对你自己有益，而且对你的团队也有益。他将大大地节约了你的开发与错误调试时间（特别是比较大的一些项目）。</p>
<h3>1.去除不必要的div标签：</h3>
<p>我曾经看到好多的人将form和ul标签都包含在了div标签内。为什么要写一个不必要的标签呢。你可以给适当的选择器赋予css规则，这样也可以达到同样的效果。</p>
<h4>例子一：</h4>
<p>下面的列子将展示给你如何删除多余的div标签，而将css规则声明给内部的form标签。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/clean_html_01_div-form.gif" alt="clean_html_01_div-form" title="clean_html_01_div-form" width="470" height="259" class="aligncenter size-full wp-image-846" /></p>
<h4>例子二：</h4>
<p>有时侯我们会将一些内容用额外的div标签包含起来，其目的是为了严格地控制布局的空隙。在这个例子的左边使用了一个&lt;div class=&#8221;box&#8221;&gt;来控制两个box之间的外边距margin。但如果每个box内都有一个标题h4，那么我们可以通过h4标签来控制外间距margin，从而可以删除掉多余的&lt;div class=&#8221;box&#8221;&gt;标签。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/clean_html_02_div-sidebox.gif" alt="clean_html_02_div-sidebox" title="clean_html_02_div-sidebox" width="470" height="267" class="aligncenter size-full wp-image-847" /></p>
<h3>2.使用富有语义的标记：</h3>
<p>你必须时刻都使用富有语义的标记来编写html代码（如：h1用作标题，p用作文章段落，ul则用于列表项）。那么，即使你的css文件没有引入或者没有被支持，你的html文档看起来也是富有意义的。</p>
<h4>例子：</h4>
<p>下面的一张图片比较了使用div标记和使用富有语义的标记编写的一段html代码（没有css代码的支持）在浏览器中编译后的效果。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/clean_html_03_semantic-markups.gif" alt="clean_html_03_semantic-markups" title="clean_html_03_semantic-markups" width="470" height="482" class="aligncenter size-full wp-image-848" /></p>
<h3>3.尽可能地使用div标签：</h3>
<p>你是否看到过一些到处都是div的html文档，它是否让你非常地抓狂？是否你曾忘记关闭一个&lt;/div&gt;或者无意添加了一个打开的&lt;div&gt;标签呢？我确定绝大多数的开发者都曾有过这样的经验。所以你需要尽可能少地使用div标签。这样以后的调试和改错的过程就会变得更加容易。</p>
<h4>例子一：</h4>
<p>用p标签来替代div标签去包含一个面包屑导航。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/clean_html_04_div-breadcrumb.gif" alt="clean_html_04_div-breadcrumb" title="clean_html_04_div-breadcrumb" width="470" height="130" class="aligncenter size-full wp-image-849" /></p>
<h4>例子二：</h4>
<p>下面的例子展示了如何通过css规则来将两个div标签替换成一个span标签。这两种写法得到的结果是完全一致的。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/clean_html_05_div-date.gif" alt="clean_html_05_div-date" title="clean_html_05_div-date" width="470" height="500" class="aligncenter size-full wp-image-850" /></p>
<h3>4.格式化（缩进）你的代码：</h3>
<p>你在开发的过程中始终要格式化你的源代码（如缩进嵌套的标签），这样的可以方便以后的阅读和错误调试。如果你使用Adobe Dreamweaver的话，那么你可以很简单地去格式化源代码。方法：点击“命令”菜单下的“应用源代码”选项即可。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/clean_html_06_format-code.gif" alt="clean_html_06_format-code" title="clean_html_06_format-code" width="470" height="203" class="aligncenter size-full wp-image-851" /></p>
<h3>5.在&lt;/div&gt;结束处给出相应的注释：</h3>
<p>当你编写一个平台模板(如：Wordpress主题)代码时，这些模板文件会被分割成多个不同的文件：如：index.php, header.php, sidebar.php, 和 footer.php。因此，你必须在&lt;/div&gt;结束处给出相应的注释。比如：当我看到&lt;/div&gt;&lt;!&#8211; /wrapper &#8211;&gt;时，我就知道这里是&lt;div id=&#8221;wrapper&#8221;&gt;标签的结束处。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/clean_html_07_comment-code.gif" alt="clean_html_07_comment-code" title="clean_html_07_comment-code" width="470" height="122" class="aligncenter size-full wp-image-852" /></p>
<h3>总结：</h3>
<p>1.尽可能少地使用div标签；<br />
2.使用div标签来控制页面的整体布局，如头部，内容部，侧边栏，底部等；<br />
3.内容必须包含在对应的语义标签内，而不是包含在div内；<br />
4.格式化你的源代码并且在结束标签处给出对应的注释语言。</p>
<p>该文翻译自：<a href="http://www.webdesignerwall.com/tutorials/coding-clean-and-semantic-templates/" rel="external">WebDesignWall: Coding Clean and Semantic Templates</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/coding-clean-and-rich-semantic-html/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>jQuery:增强型走马灯公告栏，可以抛弃marquee标签了</title>
		<link>http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board</link>
		<comments>http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board#comments</comments>
		<pubDate>Thu, 26 Nov 2009 15:30:43 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=835</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/noticeBox-thum.gif" alt="noticeBox-thum" title="noticeBox-thum" width="100" height="100" class="alignleft size-full wp-image-837" />
<p>昨天晚上收到<label style="color:#090; font-weight:bold;">随风同学</label>的求助邮件，说因上级的要求需要制作一个走马灯效果的公告栏，希望我可以帮助他解决。因看到邮件的时候都快要睡觉了，所以并没有立即处理。</p>
<p>今天早上到了公司，放开手边的工作，花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他，但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候，该同学又发来了邮件，说我的公告栏的效果有点欠缺，现在的效果和marquee标签<label style="color:#f60;">(该标签不符合W3C标准)</label>的效果一样，需要等内容上移完成后才会重复滚动，如果可以连续滚动的话那就完美了。</p>
<p>于是就在刚刚的时间我有花了几分钟的时间给他解决了，mail给他。不知道他是否还会有什么新的要求呢，期待啊！毕竟这对我来说也是一个挑战嘛，同时也帮助到了别人，何乐而不为呢！</p>]]></description>
			<content:encoded><![CDATA[<p>昨天晚上收到<label style="color:#090; font-weight:bold;">随风同学</label>的求助邮件，说因上级的要求需要制作一个走马灯效果的公告栏，希望我可以帮助他解决。因看到邮件的时候都快要睡觉了，所以并没有立即处理。</p>
<p>今天早上到了公司，放开手边的工作，花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他，但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候，该同学又发来了邮件，说我的公告栏的效果有点欠缺，现在的效果和marquee标签<label style="color:#f60;">(该标签不符合W3C标准)</label>的效果一样，需要等内容上移完成后才会重复滚动，如果可以连续滚动的话那就完美了。</p>
<p>于是就在刚刚的时间我有花了几分钟的时间给他解决了，mail给他。不知道他是否还会有什么新的要求呢，期待啊！毕竟这对我来说也是一个挑战嘛，同时也帮助到了别人，何乐而不为呢！</p>
<p>因为觉得功能差不多都实现了，所以也共享出来与大家分享，或许会对你有所帮助呢。</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/noticeBox/noticeBox.rar" class="download">download</a><a href="http://www.ihiro.org/cases/noticeBox/" rel="external" class="demo">demo</a></p>
<h3>1.Html代码：</h3>

<div class="wp_codebox"><table><tr id="p83567"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code" id="p835code67"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;container&quot;&gt;
    &lt;ul class=&quot;noticeList&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/wordpress-the-article-automatically-appear-as-two&quot; title=&quot;Wordpress:将文章自动显示为两列&quot;&gt;Wordpress:将文章自动显示为两列&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/film-2012-really-have-that-day-discovery-channel-expose-for-you&quot; title=&quot;电影:《2012》真的有那一天吗？探索频道为你揭露&quot;&gt;电影:《2012》真的有那一天吗？探索频道为你揭露&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/information-november-2009-programming-language-list&quot; title=&quot;资讯:2009年11月编程语言排行榜&quot;&gt;资讯:2009年11月编程语言排行榜&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/a-busy-week-for-rent-a-house-was-finally-gaoding&quot; title=&quot;租房:忙碌一周，房子终于搞定&quot;&gt;租房:忙碌一周，房子终于搞定&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/my-third-theme-innernews&quot; title=&quot;主题:我的第三个主题innerNews提供下载&quot;&gt;主题:我的第三个主题innerNews提供下载&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/my-first-plugin-scrolltop&quot; title=&quot;插件:我的第一个插件–简约的scrollTop滑动插件&quot;&gt;插件:我的第一个插件–简约的scrollTop滑动插件&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/celebrate-my-blog-pr-catapulted-3&quot; title=&quot;PageRank:庆贺我的博客PR连升3级&quot;&gt;PageRank:庆贺我的博客PR连升3级&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/myeclipse-8-and-registration-number&quot; title=&quot;软件:MyEclipse 8.0发布，附注册码&quot;&gt;软件:MyEclipse 8.0发布，附注册码&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/tv-leng-jian&quot; title=&quot;电视:《冷箭》，让我“失眠”的谍战片&quot;&gt;电视:《冷箭》，让我“失眠”的谍战片&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/hd-is-an-attitude&quot; title=&quot;下载:高清，是一种态度！&quot;&gt;下载:高清，是一种态度！&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</pre></td></tr></table></div>

<h3>2.CSS代码：</h3>

<div class="wp_codebox"><table><tr id="p83568"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p835code68"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span> Verdana<span style="color: #00AA00;">,</span> Geneva<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#container</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">180px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">30px</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">250px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #6666ff;">.noticeList</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">180px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">inside</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">270px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #6666ff;">.noticeList</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #6666ff;">.noticeList</span> li a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#606060</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #6666ff;">.noticeList</span> li a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#09F</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<h3>3.JS代码：（备了部分注释，不懂的可以留言询问。）</h3>

<div class="wp_codebox"><table><tr id="p83569"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
</pre></td><td class="code" id="p835code69"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">function</span> ScrollAction<span style="color: #009900;">&#40;</span>listObj<span style="color: #339933;">,</span> listElem<span style="color: #339933;">,</span> speed<span style="color: #339933;">,</span> isSeries<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>	<span style="color: #006600; font-style: italic;">//listObj为需要滚动的列表，  speed为滚动速度</span>
		<span style="color: #003366; font-weight: bold;">var</span> pos<span style="color: #339933;">,</span> top<span style="color: #339933;">,</span> aniTop<span style="color: #339933;">,</span> height<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> id <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">//记录setInterval的标记id</span>
&nbsp;
		pos <span style="color: #339933;">=</span> listObj.<span style="color: #660066;">position</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
		top <span style="color: #339933;">=</span> pos.<span style="color: #660066;">top</span><span style="color: #339933;">;</span>			<span style="color: #006600; font-style: italic;">//列表的top</span>
		aniTop <span style="color: #339933;">=</span> top<span style="color: #339933;">;</span>				<span style="color: #006600; font-style: italic;">//记录当前运动时的top</span>
		height <span style="color: #339933;">=</span> listObj.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	<span style="color: #006600; font-style: italic;">//列表的高度</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> scrollUp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			aniTop<span style="color: #339933;">--;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>isSeries<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>	<span style="color: #006600; font-style: italic;">//isSeries变量控制是否连续滚动，false不连续，true连续</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>aniTop <span style="color: #339933;">==</span> <span style="color: #339933;">-</span>height<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>	<span style="color: #006600; font-style: italic;">//不连续，滚动玩重新滚动</span>
					listObj.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'top'</span><span style="color: #339933;">:</span> top<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					aniTop <span style="color: #339933;">=</span> top<span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>aniTop <span style="color: #339933;">==</span> <span style="color: #339933;">-</span>listObj.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>	<span style="color: #006600; font-style: italic;">//连续滚动</span>
					<span style="color: #003366; font-weight: bold;">var</span> firstItem <span style="color: #339933;">=</span> <span style="color: #3366CC;">'&lt; '</span> <span style="color: #339933;">+</span> listElem <span style="color: #339933;">+</span><span style="color: #3366CC;">'&gt;'</span> <span style="color: #339933;">+</span> listObj.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt; /'</span> <span style="color: #339933;">+</span> listElem <span style="color: #339933;">+</span><span style="color: #3366CC;">'&gt;'</span><span style="color: #339933;">;</span>
					listObj.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					listObj.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>firstItem<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					aniTop <span style="color: #339933;">=</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
			listObj.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'top'</span><span style="color: #339933;">:</span> aniTop <span style="color: #339933;">+</span> <span style="color: #3366CC;">'px'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> hover <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			listObj.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				clearInterval<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				id <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span>scrollUp<span style="color: #339933;">,</span> speed<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">start</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			id <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span>scrollUp<span style="color: #339933;">,</span> speed<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			hover<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> sa <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ScrollAction<span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.noticeList'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'li'</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">30</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	sa.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p style="color:#f00;">使用时别忘了引入jQuery库哦，也希望大家给我提出意见，或功能扩充等要求。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Wordpress:将文章自动显示为两列</title>
		<link>http://www.ihiro.org/wordpress-the-article-automatically-appear-as-two</link>
		<comments>http://www.ihiro.org/wordpress-the-article-automatically-appear-as-two#comments</comments>
		<pubDate>Wed, 25 Nov 2009 15:53:26 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=823</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/two-columns.gif" alt="two-columns" title="two-columns" width="100" height="100" class="alignleft size-full wp-image-813" />
<p>很多博客都有一行显示多个post文章的样式，他的原理其实非常简单，今天找到一段php代码，只需在functions.php文件中添加上，那么你的文章也会多列显示，非常实用！</p>
<p>1.打开functions.php文件，添加相应的php代码，通过判断是否是第二次输出来给出左右浮动的div标签。</p>
<p>2.完成在functions.php文件中添加好上面的代码后，记得打开style.css文件，添加上样式代码。</p>
<p>那么同理，我们可以根据判断$i变量来输出3列、4列等。<label style="color:#e40488;">只要想的到，就能做得到！</label></p>]]></description>
			<content:encoded><![CDATA[<p>很多博客都有一行显示多个post文章的样式，他的原理其实非常简单，今天找到一段php代码，只需在functions.php文件中添加上，那么你的文章也会多列显示，非常实用！</p>
<h3>1.PHP代码：</h3>
<p>打开functions.php文件，添加如下的php代码，通过判断是否是第二次输出来给出左右浮动的div标签。</p>

<div class="wp_codebox"><table><tr id="p82370"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</pre></td><td class="code" id="p823code70"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php 
<span style="color: #000000; font-weight: bold;">function</span> my_multi_col<span style="color: #009900;">&#40;</span><span style="color: #000088;">$content</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$columns</span> <span style="color: #339933;">=</span> <span style="color: #990000;">explode</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&lt;h2&gt;&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$i</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$columns</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$column</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$i</span> <span style="color: #339933;">%</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000088;">$return</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'&lt;div class=&quot;content_left&quot;&gt;'</span><span style="color: #339933;">;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$i</span> <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000088;">$return</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot;&lt;h2&gt;&quot;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000088;">$return</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'&lt;div class=&quot;content_right&quot;&gt;&lt;h2&gt;'</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000088;">$return</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$column</span><span style="color: #339933;">;</span>
			<span style="color: #000088;">$return</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot;&lt;/h2&gt;&lt;/div&gt;&quot;</span><span style="color: #339933;">;</span>
			<span style="color: #000088;">$i</span><span style="color: #339933;">++;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">isset</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$columns</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000088;">$content</span> <span style="color: #339933;">=</span> wpautop<span style="color: #009900;">&#40;</span><span style="color: #000088;">$return</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #b1b100;">else</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000088;">$content</span> <span style="color: #339933;">=</span> wpautop<span style="color: #009900;">&#40;</span><span style="color: #000088;">$content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$content</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'the_content'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_multi_col'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #339933;">&lt;/</span>h2<span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>代码中的h2是你的每个文章标题所包含的标签。</p>
<h3>2.CSS代码：</h3>
<p>完成在functions.php文件中添加好上面的代码后，记得打开style.css文件，添加上样式代码。</p>

<div class="wp_codebox"><table><tr id="p82371"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code" id="p823code71"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.content_right</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.content_left</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">45%</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.content_left</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.content_right</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>那么同理，我们可以根据判断$i变量来输出3列、4列等。<label style="color:#e40488;">只要想的到，就能做得到！</label></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/wordpress-the-article-automatically-appear-as-two/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>电影:《2012》真的有那一天吗？探索频道为你揭露</title>
		<link>http://www.ihiro.org/film-2012-really-have-that-day-discovery-channel-expose-for-you</link>
		<comments>http://www.ihiro.org/film-2012-really-have-that-day-discovery-channel-expose-for-you#comments</comments>
		<pubDate>Fri, 20 Nov 2009 16:24:57 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[灾难片]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=795</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/2012-logo.jpg" alt="2012-logo" title="2012-logo" width="100" height="100" class="alignleft size-full wp-image-796" />
<p>周二的晚上去电影院看了灾难片《2012》，场景很宏伟，CG特效制作很完美。故事情节很紧凑，让人的心一直悬着。但是，说实话，从头看到完，我的心情一直很平静，没有一点点心跳的感觉。或许是觉得这样的事情是不可能发生的吧！</p>
<p>《2012》的热映才刚刚开始，美国的探索频道就为该影片专门制作了一期节目：《2012启示录.世界末日》。为我们揭秘玛雅语言，揭秘电影，让我们更加深入地了解影片的背景信息。</p>
<p style="color:#090; font-weight:bold;">2012的那一天真的会到来吗？谁知道呢，担心未来，还不如现在珍惜我们的地球...</p>]]></description>
			<content:encoded><![CDATA[<p>周二的晚上去电影院看了灾难片《2012》，场景很宏伟，CG特效制作很完美。故事情节很紧凑，让人的心一直悬着。但是，说实话，从头看到完，我的心情一直很平静，没有一点点心跳的感觉。或许是觉得这样的事情是不可能发生的吧！</p>
<p>《2012》的热映才刚刚开始，美国的探索频道就为该影片专门制作了一期节目：《2012启示录.世界末日》。为我们揭秘玛雅语言，揭秘电影，让我们更加深入地了解影片的背景信息。</p>
<h3>节目内容简介（转载于<a href="www.verycd.com" rel="external">VeryCD.com</a>）：</h3>
<p>玛雅日历转盘曾预测在公元2012年12月21号，将有一颗外太空流行撞击地球毁灭世界，同时世界各地核子发生爆炸，地球将陷入灭顶之灾。</p>
<p>2012世界某日同时被宗教领域、科学领域以及预言界预测过。一些伟大的预言学者，宗教典籍和科学证据都纷纷不约而同的指向2012可能得世界某日这一点上。</p>
<p>在这里我们将分析2012世界末日这个理论和预言，看看究竟是谁或者哪种组织将会潜在的造成全球的毁灭战争？自然界的哪种行为将会导致末日的到来？末日来临之前究竟有何迹象？</p>
<p>我们的古代预言家们也曾写下过不少记录。我们将对引用如下资料进行解读，诸如： 诺斯特拉达穆斯(法国星相学家) ，圣经，玛雅文明史以及其他关于有关2012年的书籍。</p>
<p>但是究竟是谁或者什么事情会导致末日来临呢？火山大爆发？瘟疫还是疾病？行星撞击地球？彗星大毁灭？魔鬼？全球变暖？还是核子战争呢？</p>
<p>世界末日在那天真的来临么，discovery探索频道专门专门为此做了一期节目，敬请收看。</p>
<h3>节目在线观看：</h3>
<p style="text-align:center;"><embed src="http://player.youku.com/player.php/sid/XMTMyMTU3MTAw/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed></p>
<h3>节目下载(1280&#215;720格式)：</h3>
<p><a href="ed2k://|file|%5B09.11.08%5D%5B%E6%8E%A2%E7%B4%A2%E9%A2%91%E9%81%93%5D%5B2012%E5%90%AF%E7%A4%BA%E5%BD%95.%E4%B8%96%E7%95%8C%E6%9C%AB%E6%97%A5%5D.2012.Apocalypse.end.of.the.world.720p-dhd.mkv|1173182613|f00402bf2db569ca4fbcfc16bdae125d|h=wiplxjze3fevuvntire3yyz3ooh3hqzb|/" rel="external">探索频道:2012启示录.世界末日&nbsp;下载</a></p>
<h3>附上：《2012》原声大碟下载：</h3>
<p><a href="ed2k://|file|Harald.Kloser%26Thomas.Wander.-.%5B2012%E4%B8%96%E7%95%8C%E6%9C%AB%E6%97%A5.-.2012%5D.%E4%B8%93%E8%BE%91.%28AAC%29.rar|130391082|2519a4d7f4f14a531d68e7abb8c98f42|h=xd7vadqrkkgbnncy3b7xoh6eqytza7ja|/“ rel="external">Harald Kloser&#038;Thomas Wander -《2012.世界末日》原声大碟</a></p>
<p style="color:#090; font-weight:bold;">2012的那一天真的会到来吗？谁知道呢，担心未来，还不如现在珍惜我们的地球&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/film-2012-really-have-that-day-discovery-channel-expose-for-you/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>资讯:2009年11月编程语言排行榜</title>
		<link>http://www.ihiro.org/information-november-2009-programming-language-list</link>
		<comments>http://www.ihiro.org/information-november-2009-programming-language-list#comments</comments>
		<pubDate>Wed, 18 Nov 2009 04:50:36 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=789</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/2009.11.language-logo.png" alt="2009.11.language-logo" title="2009.11.language-logo" width="100" height="100" class="alignleft size-full wp-image-790" />
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站更新了最新09年11月份的编程语言排行榜，该月的更新比之前来的要晚了很多，所以我的博客相应地语言排行榜一文也就推到今日更新。</p>
<p>相比<a href="http://www.ihiro.org/information-october-2009-programming-language-list" rel="external">十月份的编程语言排行榜</a>的图表看来，Java、C、PHP、Javascript语言的排名保持了上月的位置，而位置变化最为明显的是Perl语言，从上月的第6位下降到了第8位，该语言不是我所关注的，所以不做更多的评论。</p>
<p>现在的我Javascript语言使用的最多，或者说是jQuery库用的比较多吧。所以我希望Javascript语言可以一直保持他的位置，或者可以更往前提升位置。期待吧...</p>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站更新了最新09年11月份的编程语言排行榜，该月的更新比之前来的要晚了很多，所以我的博客相应地语言排行榜一文也就推到今日更新。</p>
<p>相比<a href="http://www.ihiro.org/information-october-2009-programming-language-list" rel="external">十月份的编程语言排行榜</a>的图表看来，Java、C、PHP、Javascript语言的排名保持了上月的位置，而位置变化最为明显的是Perl语言，从上月的第6位下降到了第8位，该语言不是我所关注的，所以不做更多的评论。</p>
<p>现在的我Javascript语言使用的最多，或者说是jQuery库用的比较多吧。所以我希望Javascript语言可以一直保持他的位置，或者可以更往前提升位置。期待吧&#8230;</p>
<h3>2009年11月份编程语言前20名：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/2009.11.language-no.png" alt="2009.11.language-no" title="2009.11.language-no" width="562" height="551" class="aligncenter size-full wp-image-791" /></p>
<h3>2009年11月份编程语言前10名的走势图：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/2009.11.language-trends.png" alt="2009.11.language-trends" title="2009.11.language-trends" width="636" height="478" class="aligncenter size-full wp-image-792" /></p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/information-november-2009-programming-language-list/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>租房:忙碌一周，房子终于搞定</title>
		<link>http://www.ihiro.org/a-busy-week-for-rent-a-house-was-finally-gaoding</link>
		<comments>http://www.ihiro.org/a-busy-week-for-rent-a-house-was-finally-gaoding#comments</comments>
		<pubDate>Sun, 15 Nov 2009 15:46:23 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[生活感悟]]></category>
		<category><![CDATA[生活]]></category>
		<category><![CDATA[租房]]></category>
		<category><![CDATA[都市]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=782</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/house.gif" alt="house" title="house" width="100" height="100" class="alignleft size-full wp-image-783" />
<p>忙忙碌碌的一周就快要过去了，每天下班后到处去看房子，否定了一家又一家，终于在今晚的9点敲定了一家房子。比较满意、也比较干净。同时也预示着我的合租生活即将开始。</p>
<p>我想每一个刚从学校没毕业多久的人都有过这样的经历吧。从最初的工作不稳定时的群租，到工作变动期的借住，再到合租，然后到独住，最后到买房和老婆住。(单身ing...)</p>
<p>我将住房分为了这五个阶段，而自己已经到了合租的阶段。说明自己对工作的稳定性有了一定的认识，也对自己的职业目标有了明确的定位，会朝着自己的目标努力前行吧！我要争取明年的这个时候要独住，呵呵。</p>]]></description>
			<content:encoded><![CDATA[<p>忙忙碌碌的一周就快要过去了，每天下班后到处去看房子，否定了一家又一家，终于在今晚的9点敲定了一家房子。比较满意、也比较干净。同时也预示着我的合租生活即将开始。</p>
<p>我想每一个刚从学校没毕业多久的人都有过这样的经历吧。从最初的工作不稳定时的群租，到工作变动期的借住，再到合租，然后到独住，最后到买房和老婆住。(单身ing&#8230;)</p>
<p>我将住房分为了这五个阶段，而自己已经到了合租的阶段。说明自己对工作的稳定性有了一定的认识，也对自己的职业目标有了明确的定位，会朝着自己的目标努力前行吧！我要争取明年的这个时候要独住，呵呵。</p>
<p>下周六搬家，东西不多，但也是挺费神的。呵呵，加油吧！搬完后犒劳一下自己&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/a-busy-week-for-rent-a-house-was-finally-gaoding/feed</wfw:commentRss>
		<slash:comments>28</slash:comments>
		</item>
		<item>
		<title>主题:我的第三个主题innerNews提供下载</title>
		<link>http://www.ihiro.org/my-third-theme-innernews</link>
		<comments>http://www.ihiro.org/my-third-theme-innernews#comments</comments>
		<pubDate>Sun, 08 Nov 2009 04:38:32 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[theme]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=765</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/inner-logo.gif" alt="inner-logo" title="inner-logo" width="100" height="100" class="alignleft size-full wp-image-778" />
<p>在之前的文章（<a href="http://www.ihiro.org/a-new-job" rel="external">工作:辞去旧的工作，迎来新的工作</a>）曾说将共享内部新闻的主题，今天得闲终于可以实现了。之所以说是第三个主题，是因为根据时间来决定的。第一个主题在（<a href="http://www.ihiro.org/my-first-theme-for-download" ） rel="external">主题：我的第一个主题ihiro提供下载了</a>)一文中已经共享给大家，而第二个主题则是我现在用的（暂不共享）。</p>
<p>今天共享的该主题非常简约，是我在前一家留学公司时为公司内部新闻发布而制作的主题。既然是内部新闻，所以是一定要登录了才可以查看的。整个主题文件夹非常精简，总大小13.6k，包括主要的文件index.php、style.css外，只有两个用户分隔的背景图。因为只是用于发表内部新闻的缘故，没有添加评论功能。</p>
<p>介绍函数：<label style="color:#06C;">wp_loginout()</label>和<label style="color:#06C;">wp_logout_url($_SERVER['REQUEST_URI'])</label>的区别</p>
<p style="color:#f00;">该主题因需要登录，所以有点局限性，适合公司内部使用。也可以去掉相应的判断代码即可无需登录了。</p>]]></description>
			<content:encoded><![CDATA[<p>在之前的文章（<a href="http://www.ihiro.org/a-new-job" rel="external">工作:辞去旧的工作，迎来新的工作</a>）曾说将共享内部新闻的主题，今天得闲终于可以实现了。之所以说是第三个主题，是因为根据时间来决定的。第一个主题在（<a href="http://www.ihiro.org/my-first-theme-for-download" ） rel="external">主题：我的第一个主题ihiro提供下载了</a>)一文中已经共享给大家，而第二个主题则是我现在用的（暂不共享）。</p>
<p>今天共享的该主题非常简约，是我在前一家留学公司时为公司内部新闻发布而制作的主题。既然是内部新闻，所以是一定要登录了才可以查看的。整个主题文件夹非常精简，总大小13.6k，包括主要的文件index.php、style.css外，只有两个用户分隔的背景图。因为只是用于发表内部新闻的缘故，没有添加评论功能。</p>
<p>该主题的登录页面的配色是根据我博客当前主题的配色设计，而登录后的配色则是根据Decilicous网站的配色设计。（具体可见附图）</p>
<p class="demo-down-bar"><a href="downloads/themes/innerNews.rar" rel="external" class="download">download</a></p>
<h3>一、登录界面：</h3>
<p>你在输入了网址后，首先看到的是登录页面。该功能主要是根据Wordpress的条件判断标签：is_user_logged_in()，只有登录的用户才可以查看博客的内容，否则只会看到登录界面。</p>
<p>在此还要介绍两个函数的作用：<br />
1.<label style="color:#06C;">wp_loginout()</label>:该函数是大多的主要用来退出登录状态的链接函数，但退出后博客会自动跳转到Wordpress后台登录的界面；该函数使用后产生的是一个a标签包含的链接，并且包含了链接的文字“退出”，使用该函数不可更改退出这两个字。</p>
<p>2.<label style="color:#06C;">wp_logout_url($_SERVER['REQUEST_URI'])</label>：该函数也可以实现退出功能，但他使用后只是生成一个链接地址，而没有被a标签包含。所以需要自己使用a标签，将该删除写在a标签的href属性里，那么这样我们可以自定义a标签的链接文字了。并且该链接点击后不会跳转到任何其他页面，仍显示当前的页面（有点Ajax的味道！）。</p>
<p>登录界面的截图：<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/preview-00.JPG" alt="preview-00" title="preview-00" width="445" height="254" class="aligncenter size-full wp-image-768" /></p>
<h3>二、登录后的主界面：</h3>
<p>主界面是采用的两栏布局，左窄右宽。配色采用Delicious风格，用了一个x轴重复的背景图来分隔左边的板块，永了一个长的突变来分隔右边的每个post，这样便于阅读。截图（点击看全图）：<br />
<a href="http://www.ihiro.org/blog/wp-content/uploads/2009/11/preview-01.png" rel="external"><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/preview-01-thum.jpg" alt="preview-01-thum" title="preview-01-thum" width="501" height="286" class="aligncenter size-full wp-image-771" /></a></p>
<h3>三、单个Post的界面：</h3>
<p>单个post的界面只是将文章内容全部显示，将文章链接去除，在这用到is_single()判断函数，在此函数下不使用a标签即可。截图（点击看全图）：<br />
<a href="http://www.ihiro.org/blog/wp-content/uploads/2009/11/preview-02.png" rel="external"><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/preview-02-thum.jpg" alt="preview-02-thum" title="preview-02-thum" width="499" height="274" class="aligncenter size-full wp-image-774" /></a></p>
<h3>总结:</h3>
<p>最近没什么时间做新的主题，该主题中的有些函数应用还是不错的，若你研究的话可以发现如何使用条件判断实现将多个文件集合在一个index.php文件中（在第一个主题中也得以体现了）。该主题因需要登录，所以有点局限性，适合公司内部使用。淡然你若喜欢该风格的主界面，也可以去掉相应的判断代码即可无需登录了。</p>
<p>希望大家继续支持我，有空我会在做一些实用的主题的。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/my-third-theme-innernews/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>插件:我的第一个插件&#8211;简约的scrollTop滑动插件</title>
		<link>http://www.ihiro.org/my-first-plugin-scrolltop</link>
		<comments>http://www.ihiro.org/my-first-plugin-scrolltop#comments</comments>
		<pubDate>Mon, 02 Nov 2009 14:04:09 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[Hiro的项目]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=750</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/11/hiro-scrollTop-plugins.jpg" alt="hiro-scrollTop-plugins" title="hiro-scrollTop-plugins" width="100" height="100" class="alignleft size-full wp-image-754" />
<p>周末无事，便写了一个简约的scrollTop插件。在前面的文章（<a href="http://www.ihiro.org/jquery-scrolltop-plugins" rel="external">jQuery:Scrolltop滑动插件推荐（修正注释版）</a>）中，我曾介绍过一款我在网络收集的相关插件。但发现该作者的代码确实很繁琐，不是很优雅。而我的该scrollTop插件代码就那么十多行，代码非常简单，也非常实用，适合大众使用！</p>
<p>这也是算是我的jQuery插件开发之旅的开端吧，以后一有机会我就会陆续开发一些自己的插件，也尽量写一些简约的插件与大家分享。也希望有这方面的朋友可以多多交流。话不多说，上插件！</p>
<p style="color:#f00;">该插件的好处是无需在html源文件的头部添加任何标签，只需调用方法即可实现效果！</p>]]></description>
			<content:encoded><![CDATA[<p>周末无事，便写了一个简约的scrollTop插件。在前面的文章（<a href="http://www.ihiro.org/jquery-scrolltop-plugins" rel="external">jQuery:Scrolltop滑动插件推荐（修正注释版）</a>）中，我曾介绍过一款我在网络收集的相关插件。但发现该作者的代码确实很繁琐，不是很优雅。而我的该scrollTop插件代码就那么十多行，代码非常简单，也非常实用，适合大众使用！</p>
<p>这也是算是我的jQuery插件开发之旅的开端吧，以后一有机会我就会陆续开发一些自己的插件，也尽量写一些简约的插件与大家分享。也希望有这方面的朋友可以多多交流。话不多说，上插件！</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/downloads/PersonalPlugins/scrollTop/scrollTop.rar" class="download">download</a><a href="http://www.ihiro.org/downloads/PersonalPlugins/scrollTop/"  rel="external" class="demo">demo</a></p>
<h3>插件代码：</h3>

<div class="wp_codebox"><table><tr id="p75072"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code" id="p750code72"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
&nbsp;
	scrollTop<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>params<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// 给出默认的参数值</span>
		<span style="color: #006600; font-style: italic;">// 默认情况下，不传参数，没有滑动效果：scrollAnimation = false</span>
		<span style="color: #006600; font-style: italic;">// 若只传一个参数scrollAnimation: true,则默认的速度是500</span>
		<span style="color: #003366; font-weight: bold;">var</span> scrollAnimation <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> speed <span style="color: #339933;">=</span> <span style="color: #CC0000;">500</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>params <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			scrollAnimation <span style="color: #339933;">=</span> params.<span style="color: #660066;">scrollAnimation</span><span style="color: #339933;">;</span>
			speed <span style="color: #339933;">=</span> params.<span style="color: #660066;">speed</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>speed <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">null</span> <span style="color: #339933;">||</span> speed <span style="color: #339933;">==</span> <span style="color: #3366CC;">'normal'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				speed <span style="color: #339933;">=</span> <span style="color: #CC0000;">500</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>speed <span style="color: #339933;">==</span> <span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				speed <span style="color: #339933;">=</span> <span style="color: #CC0000;">200</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>speed <span style="color: #339933;">==</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				speed <span style="color: #339933;">=</span> <span style="color: #CC0000;">2000</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>scrollAnimation<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				window.<span style="color: #660066;">scrollTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html, body'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>scrollTop<span style="color: #339933;">:</span> <span style="color: #3366CC;">'0'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> speed<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<h3>参数说明：</h3>
<p>1. scrollAnimation 为布尔型， 控制是否需要动态滑动， 可选值：ture、false<br />
2. speed 控制滑动速度，只有scrollAnimation设置为true时才起到作用， 可选值：slow、normal、fast、任意数字</p>
<h3>使用方法：(假设有html文档中一个class为top的标签)</h3>
<p>1. 直接跳到顶部: <br />
 $(&#8216;.top&#8217;).scrollTop();</p>
<p>2. 以默认的速度滑行到顶部:	<br />
$(&#8216;.top&#8217;).scrollTop({&#8217;scrollAnimation&#8217;: &#8216;true&#8217;});<br />
或 $(&#8216;.top&#8217;).scrollTop({&#8217;scrollAnimation&#8217;: &#8216;true&#8217;, &#8217;speed&#8217;: &#8216;normal&#8217;});</p>
<p>3. 自定义速度滑行到顶部：可选值：slow、fast、任意数字<br />
$(&#8216;.top&#8217;).scrollTop({&#8217;scrollAnimation&#8217;: &#8216;true&#8217;, &#8217;speed&#8217;: &#8217;slow&#8217;});  移动到顶部的时间为2000毫秒<br />
$(&#8216;.top&#8217;).scrollTop({&#8217;scrollAnimation&#8217;: &#8216;true&#8217;, &#8217;speed&#8217;: &#8216;fast&#8217;});  移动到顶部的时间为200毫秒<br />
$(&#8216;.top&#8217;).scrollTop({&#8217;scrollAnimation&#8217;: &#8216;true&#8217;, &#8217;speed&#8217;: &#8216;1000&#8242;});  移动到顶部的时间为1000毫秒</p>
<h3>总结：</h3>
<p style="color:#f00;">该插件的好处是无需在html源文件的头部添加任何标签，只需调用方法即可实现效果！</p>
<p style="color:#f00;">另外，jQuery库请使用者自行根据路径添加&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/my-first-plugin-scrolltop/feed</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>PageRank:庆贺我的博客PR连升3级</title>
		<link>http://www.ihiro.org/celebrate-my-blog-pr-catapulted-3</link>
		<comments>http://www.ihiro.org/celebrate-my-blog-pr-catapulted-3#comments</comments>
		<pubDate>Fri, 30 Oct 2009 18:39:01 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[统计收录]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=738</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/pagerank-3.gif" alt="pagerank-3" title="pagerank-3" width="100" height="100" class="alignleft size-full wp-image-739" />
<p>深夜两点，未睡！看完了最新的《火影》剧集，无事，便访问我的博客，看是否有留言。最近一个月因换工作的缘故（或许大家都知道了），很少更新博客。只是每日早晨到了公司，乘没上班前登陆了查看是否有新留言。</p>
<p>博客主页在缓慢加载的过程中，猛然发现浏览器的右下角变绿了（因我火狐装有SearchStatus插件，可以实时地查看PR和Alexa排名）。鼠标移上去一看，发现我的PR从0直接升到了3，着实让我在这深夜时刻有点亢奋啊！</p>]]></description>
			<content:encoded><![CDATA[<p>深夜两点，未睡！看完了最新的《火影》剧集，无事，便访问我的博客，看是否有留言。最近一个月因换工作的缘故（或许大家都知道了），很少更新博客。只是每日早晨到了公司，乘没上班前登陆了查看是否有新留言。</p>
<p>博客主页在缓慢加载的过程中，猛然发现浏览器的右下角变绿了（因我火狐装有SearchStatus插件，可以实时地查看PR和Alexa排名）。鼠标移上去一看，发现我的PR从0直接升到了3，着实让我在这深夜时刻有点亢奋啊！</p>
<p>我的博客从今年的6月19日上线以来，据我所知，到现在PR更新了3次（加上今天更新的一次）。唯独今天PR升了，很是开心，由此可见我这几个月来的辛勤维护得到了回报。等过段时间工作稳定下来的我会继续做好博客。也准备在做一个新的主题，因为最近的前端开发中积累了一些jQuery的应用，准备在下一个主题中体现出来！</p>
<h3>附上一张统计表：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/pagerank-static.jpg" alt="pagerank-static" title="pagerank-static" width="639" height="82" class="aligncenter size-full wp-image-740" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/celebrate-my-blog-pr-catapulted-3/feed</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>软件:MyEclipse 8.0发布，附注册码</title>
		<link>http://www.ihiro.org/myeclipse-8-and-registration-number</link>
		<comments>http://www.ihiro.org/myeclipse-8-and-registration-number#comments</comments>
		<pubDate>Wed, 21 Oct 2009 13:28:16 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[软件下载]]></category>
		<category><![CDATA[开发工具]]></category>
		<category><![CDATA[软件]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=726</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/myeclipse-8.0.jpg" alt="myeclipse-8.0" title="myeclipse-8.0" width="100" height="100" class="alignleft size-full wp-image-727" />
<p>MyEclipse我一直都没怎么用，但系统中一直都安装着，主要是因为之前有学着用Java开发的原因，加上MyEclipse的功能确实强大。所以若有新版本的更新，我都会下载了后安装。</p>
<p>我是从MyEclipse 6.5版本开始使用的，相继更新了7.1、7.5，直到现在的8.0版本。MyEclipse的启动图片和桌面图标也都有相应的更新，是越来越精细了吧！</p>
<p>MyEclipse 8.0是9月24日更新的，而我确实到了10月的时候才在网上发现，当然第一时间下载了。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/myeclipse-8.0-M1.jpg" alt="myeclipse-8.0-M1" title="myeclipse-8.0-M1" width="420" height="200" class="aligncenter size-full wp-image-736" />MyEclipse我一直都没怎么用，但系统中一直都安装着，主要是因为之前有学着用Java开发的原因，加上MyEclipse的功能确实强大。所以若有新版本的更新，我都会下载了后安装。</p>
<p>我是从MyEclipse 6.5版本开始使用的，相继更新了7.1、7.5，直到现在的8.0版本。MyEclipse的启动图片和桌面图标也都有相应的更新，是越来越精细了吧！</p>
<p>MyEclipse 8.0是9月24日更新的，而我确实到了10月的时候才在网上发现，当然第一时间下载了。</p>
<p>现在的工作有时候会用到MyEclipse，所以它对我的作用还是挺重要的。</p>
<h3>下载地址：</h3>
<p>电驴、迅雷下载：<a href="ed2k://|file|%5BMyEclipse.8.0.M1.%28Standard.and.Pro.Editions%29%5D.%5BMyEclipse.8.0.M1.%28Standard.and.Pro.Editions%29%5D.%5BMyEclipse.8.0.M1.%28Standard.and.Pro.Editions%29%5D.%5BMyEclipse.8.0.M1.%28Standard.and.Pro.Editions%29%5D.myeclipse-8.0M1-win32.exe|809784316|ea33784c00e94dbdeb7623c7417d64ac|h=rbhsuoq5mu2wbrcudbszuarf2zq4hg3q|/" rel="external">MyEclipse 8.0下载</a><br />
官方下载地址：<a href="http://downloads.myeclipseide.com/downloads/products/eworkbench/galileo/myeclipse-8.0M1-win32.exe" rel="external">http://downloads.myeclipseide.com/downloads/products/eworkbench/galileo/myeclipse-8.0M1-win32.exe</a></p>
<h3>注册码：</h3>
<p>Subscriber:MaYong<br />
Subscription Code:ZLR8ZO-655444-54678656985359684 </p>
<p>Subscriber:LauCheng<br />
Subscription   Code:YLR8ZC-855550-6765665204902409</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/myeclipse-8-and-registration-number/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>电视:《冷箭》，让我“失眠”的谍战片</title>
		<link>http://www.ihiro.org/tv-leng-jian</link>
		<comments>http://www.ihiro.org/tv-leng-jian#comments</comments>
		<pubDate>Sat, 17 Oct 2009 14:48:25 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[电视剧]]></category>
		<category><![CDATA[谍战片]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=715</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/冷箭.gif" alt="冷箭" title="冷箭" width="100" height="100" class="alignleft size-full wp-image-720" />
<p>在写该电视剧的观后感之前，先说说我最新的一些情况。因为最近新工作的原因，在做新的项目，所以没有太多的时间去访问博友们的博客了，也没有太多的时间来更新博客，更没有多少的时间来写一些技术类的文章了。所以就写一些生活类的文章吧。</p>
<p>最近看到了这部谍战片，之所以说让我“失眠”，并不是真的失眠。而是因为他的播放时间太晚了，CCTV1套的晚上10：30。每天两集看完也都一点多了，而且前两天连续都是三集连播，看完都凌晨1点了。而每天早上7：30起床，睡眠实在有点少，所以才说让我失眠。好在该片昨晚终于大结局了，给我松了一口气，而让我可以好好地周末睡个懒觉了，呵呵！</p>]]></description>
			<content:encoded><![CDATA[<p>在写该电视剧的观后感之前，先说说我最新的一些情况。因为最近新工作的原因，在做新的项目，所以没有太多的时间去访问博友们的博客了，也没有太多的时间来更新博客，更没有多少的时间来写一些技术类的文章了。所以就写一些生活类的文章吧。</p>
<h3>我的话：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/1.jpg" alt="刘前进" title="刘前进" width="520" height="190" class="aligncenter size-full wp-image-717" />最近看到了这部谍战片，之所以说让我“失眠”，并不是真的失眠。而是因为他的播放时间太晚了，CCTV1套的晚上10：30。每天两集看完也都一点多了，而且前两天连续都是三集连播，看完都凌晨1点了。而每天早上7：30起床，睡眠实在有点少，所以才说让我失眠。好在该片昨晚终于大结局了，给我松了一口气，而让我可以好好地周末睡个懒觉了，呵呵！</p>
<p>该片吸引我的原因有三：1.该片是为了庆贺祖国60岁生日的片子；2.该片的故事情节确实是很复杂，很有悬念，很是吸引人想一下子就全看完，想早点知道答案；3.该片不想很多的谍战片那样，话语严肃，氛围紧张，而该片的话语比较幽默，有时候还有很多的笑料，这也是吸引我的原因吧！</p>
<p>就演员阵容来讲，刚开始我就只认识周圆的扮演者（王力可），因为在学校时看过《血色浪漫》认识了她吧。而男一号后来才知道在《人间正道是沧桑》中饰演过，很可惜我对《人间》不是很感兴趣，所以没看过。而唐司令的扮演者（刘琳）貌似在电影《沂蒙六姐妹》中有饰演其中的一个姐妹，我对该电影还是比较期待的，所以也算后来认识了她吧！</p>
<h3>剧情简介：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/2.jpg" alt="周圆" title="周圆" width="520" height="190" class="aligncenter size-full wp-image-718" />冷箭是一部极具商业色彩的主旋律正剧，讲述了一段鲜为世人所知的共和国往事。</p>
<p>1952年，全国开展镇压反革命运动，西南地区各地监狱人满为患。为保卫胜利果实，捍卫新中国，为缓解当地政府压力，一支堪称中国第一支劳改公安部队的特殊部队，在没有高墙电网、警力和装备都极有限的条件下，押解数万囚犯西进雷马屏;又在荒无人烟的雷马屏建起监狱农场。在艰苦卓绝的押解途中和女性建设雷马屏监狱的过程里，我方既要保护和教育改造这些囚犯，又要时刻防范国民党残余和土匪武装的偷袭、劫狱。内鬼外敌频频勾结、密谋策划，随时随地准备越狱、暴狱。剧中，既有我中有敌，敌中有我的扑朔迷离，又有暴狱和反暴狱斗争的残酷和惨烈。贯穿始终、充满诡谲色彩的无间道人物和特殊背景下奇异的剿匪情节，紧密地缠绕在暴狱和反暴狱的主干链条上，使这个同样是讲述囚徒、监狱和匪事的故事显得新鲜而又与众不同。</p>
<h3>下载地址：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/3.jpg" alt="唐静音" title="唐静音" width="520" height="190" class="aligncenter size-full wp-image-719" />电驴网站下载页面：<a href="http://www.verycd.com/topics/2772363/" rel="external">http://www.verycd.com/topics/2772363/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/tv-leng-jian/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>下载:高清，是一种态度！</title>
		<link>http://www.ihiro.org/hd-is-an-attitude</link>
		<comments>http://www.ihiro.org/hd-is-an-attitude#comments</comments>
		<pubDate>Sun, 11 Oct 2009 15:10:11 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[生活感悟]]></category>
		<category><![CDATA[电影]]></category>
		<category><![CDATA[纪实片]]></category>
		<category><![CDATA[高清]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=710</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/FullHD-logo.gif" alt="FullHD-logo" title="FullHD-logo" width="100" height="100" class="alignleft size-full wp-image-713" />
<p>近年来高清炒的很火热啊，什么蓝光啊、什么Full HD啊、什么蓝光播放器啊！火热的关键字！</p>
<p>现在的高清主要有两种格式：1280x720、1920x1080。这两种格式的我都有下过，前者正常1个小时的要2G的空间，而后者差不多要5G左右。当然这些都是有压缩过的，若完全没压缩版的，1小时的电影怎么也有个10G多吧！</p>
<p>看高清就是要一个清晰，看的舒服！但是用笔记本看这个高清的电影、纪录片实在没什么感觉，最好使用高清电视机看那才有感觉！可惜现在还没有这样的条件啊，只能等以后有条件了再去享受吧！不过用笔记本过过干瘾还是可以的。</p><p>现在我主要是下载一个高清的纪录片、MV等，主要是1920x1080格式的。而电影最多下载到1280x720格式的，因为很多电影需要看过了后在知道好坏，只有好的电影才需要下高清的来收藏！</p>
<p>高清，是一种态度！我会继续关注高清的，毕竟以后将是高清的天下了！</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/FullHD-inner-logo.gif" alt="FullHD-inner-logo" title="FullHD-inner-logo" width="149" height="139" class="alignleft size-full wp-image-711" />近年来高清炒的很火热啊，什么蓝光啊、什么Full HD啊、什么蓝光播放器啊！火热的关键字！</p>
<p>我接触高清也就最近的几个月，在此之前我看电影都是能看清楚就可以了，或者是下载那些700M多点的电影，也算是比较清晰的。当在之前的住处的一个室友是一个高清迷，他下电视、电影都是下载高清的。一部83版的《射雕英雄传》下了100G的空间、一部《铁齿铜牙纪晓岚4》下了25G，更有胜者，一部《赤壁2》下了40G。牛人啊！他买了一个320G的2.5寸移动硬盘、一个1T的3.5寸的移动一盘，再加上个笔记本的硬盘250G。空间狂多啊，我是小巫见大巫了啊。我只有一个120G的移动硬盘和笔记本的120G空间，所以最近筹划着买一个500G的2.5寸移动硬盘。</p>
<p>现在的高清主要有两种格式：1280&#215;720、1920&#215;1080。这两种格式的我都有下过，前者正常1个小时的要2G的空间，而后者差不多要5G左右。当然这些都是有压缩过的，若完全没压缩版的，1小时的电影怎么也有个10G多吧！</p>
<p>看高清就是要一个清晰，看的舒服！但是用笔记本看这个高清的电影、纪录片实在没什么感觉，最好使用高清电视机看那才有感觉！可惜现在还没有这样的条件啊，只能等以后有条件了再去享受吧！不过用笔记本过过干瘾还是可以的。</p>
<p>现在我主要是下载一个高清的纪录片、MV等，主要是1920&#215;1080格式的。而电影最多下载到1280&#215;720格式的，因为很多电影需要看过了后在知道好坏，只有好的电影才需要下高清的来收藏！</p>
<p>高清，是一种态度！我会继续关注高清的，毕竟以后将是高清的天下了！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/hd-is-an-attitude/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>资讯:2009年10月编程语言排行榜</title>
		<link>http://www.ihiro.org/information-october-2009-programming-language-list</link>
		<comments>http://www.ihiro.org/information-october-2009-programming-language-list#comments</comments>
		<pubDate>Tue, 06 Oct 2009 15:38:45 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=703</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/2009.10.language-logo.gif" alt="2009.10.language-logo" title="2009.10.language-logo" class="alignleft size-full wp-image-706" />
<p>相比<a href="http://www.ihiro.org/information-september-2009-programming-language-list" rel="external">九月份的编程语言排行榜</a>的图表看来，PHP的排名继续上升，已经从上月第四位的位置上升到第三位的位置上，而把比较强劲的C++语言从第三位上拉了下来。由此可见PHP的使用是越来越广泛了啊，这是我不得不感慨的啊！</p>
<p>另外，Javascript编程语言保持了第九的位置，因为我的新工作会大量地与它接触的原因吧！我会对Javascript关注会越来越多。也希望它的排名在以后的发展中也可以同PHP一样继续高升。</p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站更新了最新09年10月份的编程语言排行榜。</p>
<p>相比<a href="http://www.ihiro.org/information-september-2009-programming-language-list" rel="external">九月份的编程语言排行榜</a>的图表看来，PHP的排名继续上升，已经从上月第四位的位置上升到第三位的位置上，而把比较强劲的C++语言从第三位上拉了下来。由此可见PHP的使用是越来越广泛了啊，这是我不得不感慨的啊！</p>
<p>另外，Javascript编程语言保持了第九的位置。因为我的新工作会大量地与它接触的原因吧，我会对Javascript关注会越来越多。也希望它的排名在以后的发展中也可以同PHP一样继续高升。</p>
<h3>2009年10月份编程语言前20名：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/2009.10.language-no.jpg" alt="2009.10.language-no" title="2009.10.language-no" width="566" height="550" class="aligncenter size-full wp-image-704" /></p>
<h3>2009年10月份编程语言前10名的走势图：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/10/2009.10.language-trends.jpg" alt="2009.10.language-trends" title="2009.10.language-trends" width="636" height="483" class="aligncenter size-full wp-image-705" /></p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/information-october-2009-programming-language-list/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>工作:辞去旧的工作，迎来新的工作</title>
		<link>http://www.ihiro.org/a-new-job</link>
		<comments>http://www.ihiro.org/a-new-job#comments</comments>
		<pubDate>Wed, 30 Sep 2009 12:55:02 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[生活感悟]]></category>
		<category><![CDATA[工作]]></category>
		<category><![CDATA[生活]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=696</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/new-job.jpg" alt="new-job" title="new-job" width="101" height="101" class="alignleft size-full wp-image-698" />
<h3>旧的工作：网络工程师</h3>
<p>在任职网络工程师期间，我完成了一个繁体版网站(英国留学)、一个简体版网站(英国留学)以及一个基于wordpress制作的公司内部新闻发布系统（<span style="color:#f00;">该模板我会尽快整理修改了共享给大家</span>）。</p>
<h3>新的工作：前端开发工程师</h3>
<p>新公司是一家咨询公司，旗下拥有两个网站：1. <a href="http://www.51point.com/" title="51point调查积分网" rel="external">51point</a>：一个专业网络调查问卷的系统；2.<a href="http://www.wanyan.com/" title="中国民意调查第一站" rel="external">万言网</a>：一个中国民意调查的系统。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/job-banner.jpg" alt="job-banner" title="job-banner" width="641" height="209" class="aligncenter size-full wp-image-697" /></p>
<h3>旧的工作：网络工程师</h3>
<p>今天的晚上6点，我告别了我步入社会后的第一份正式工作：网络工程师。在该英国留学机构里就职了7个半月的时间。和同事们相处的很开心，工作也相对轻松。但我的心不轻松！我不是一个甘于平静生活的人，总是在追求着自己喜欢的生活方式。所以在9月1日那天我提出了离职。老板和同事都很舍不得我走，因为我确实是表现优异。</p>
<p>在任职网络工程师期间，我完成了一个繁体版网站(英国留学)、一个简体版网站(英国留学)以及一个基于wordpress制作的公司内部新闻发布系统（<span style="color:#f00;">该模板我会尽快整理修改了共享给大家</span>）。其他的工作就是公司的局域网、办公设备和同事写作的工作。因公司性质的特点，公司除了我和老板外，其他的同事都是女同事，所以没有大多的压力，相处的很融洽。</p>
<h3>新的工作：前端开发工程师</h3>
<p>就在9月24日那天我找到了我的新的工作：前端开发工程师。公司很规范，我23日面试，24日小谈后和我签署了聘用函。新公司是一家咨询公司，旗下拥有两个网站：1. <a href="http://www.51point.com/" title="51point调查积分网" rel="external">51point</a>：一个专业网络调查问卷的系统；2.<a href="http://www.wanyan.com/" title="中国民意调查第一站" rel="external">万言网</a>：一个中国民意调查的系统。</p>
<p>对于这份新的工作职位我是很期待的，因为我可以专一地去做前端开发的工作，而不用考虑其他额外的事情。虽然具体的工作内容还不得而知，但我相信一定可以让我学到很多有用的东西。另外：公司的地理位置很好，环境也不错，是我喜欢的那种工作环境。</p>
<p>下个月的9日，国庆后的首个上班日，我将去新的公司报到。大家祝福我吧，祝福我学到更多的东西，然后可以分享更多的知识给大家。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/a-new-job/feed</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>运动:第一次打保龄，赢了一局</title>
		<link>http://www.ihiro.org/bowling-for-the-first-time-and-won-a-board</link>
		<comments>http://www.ihiro.org/bowling-for-the-first-time-and-won-a-board#comments</comments>
		<pubDate>Sun, 27 Sep 2009 15:26:32 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[生活感悟]]></category>
		<category><![CDATA[生活]]></category>
		<category><![CDATA[运动]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=688</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/bowling.gif" alt="bowling" title="bowling" width="101" height="101" class="alignleft size-full wp-image-689" />
<p>今日应该是大家上班的日子，我们公司却特殊。因为老板说：“我们上班，人家英国都不上班，那我们上班也没啥意思。”。所以在上个星期的时候就定好了今天公司集体活动，然后去聚餐，然后就下午就放假。</p>
<p>公司的活动是到衡山路保龄球馆去打保龄，开始的时候我还挺忐忑不安的。因为我从来没打过保龄球，我平时只打打乒乓和桌球，保龄是一次也没接触过啊！不过去了才知道，原来大家都不是很会打，也有的和我一样也是第一次打保龄。因为早上老板到的迟的原因，所以保龄球就只买了2局。我和另外两个女同事一起（不要羡慕哦，因为我们公司除了我和老板，全是女同事）...</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/bowling.jpg" alt="bowling" title="bowling" width="600" height="277" class="aligncenter size-full wp-image-691" />今日应该是大家上班的日子，我们公司却特殊。因为老板说：“我们上班，人家英国都不上班，那我们上班也没啥意思。”。所以在上个星期的时候就定好了今天公司集体活动，然后去聚餐，然后就下午就放假。</p>
<p>公司的活动是到衡山路保龄球馆去打保龄，开始的时候我还挺忐忑不安的。因为我从来没打过保龄球，我平时只打打乒乓和桌球，保龄是一次也没接触过啊！不过去了才知道，原来大家都不是很会打，也有的和我一样也是第一次打保龄。因为早上老板到的迟的原因，所以保龄球就只买了2局。我和另外两个女同事一起（不要羡慕哦，因为我们公司除了我和老板，全是女同事）。</p>
<p>开始的第一局不熟悉，十轮下来我才的了50分。不过也正是这一局的基础，我掌握了保龄的要领。在第二局中我几乎没有失球。还打了一个2把10分和一个1把清台的好球，迎来阵阵掌声啊，哈哈！也是这第二局我一路领先，最后以94分胜出。我们老板第一句打了120多分，第二局只打了93分。</p>
<p>保龄球完了打车去澳门路的红子鸡聚餐，菜挺多的，有海鲜、有甜点，还有其他的，吃的挺开心的。</p>
<p>这是我进这家公司的第一次集体活动，也是最后一次了。因为我到月底就不在该公司就职了，重新找了一个专注前端开发的工作，在南京西路那，新公司挺好的。在24号的时候在新公司签了录用函，过完国庆后到新公司报到。希望在新公司可以得到更好的发展（其实该公司的该职位是很有发展前途的，呵呵）。</p>
<p>大家祝福我吧！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/bowling-for-the-first-time-and-won-a-board/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>Ajax:当前页面更改内容，前端实现</title>
		<link>http://www.ihiro.org/ajax-editing-in-placing</link>
		<comments>http://www.ihiro.org/ajax-editing-in-placing#comments</comments>
		<pubDate>Wed, 23 Sep 2009 04:26:22 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=677</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/Ajax-Editing-150x150.jpg" alt="Ajax-Editing" title="Ajax-Editing" width="100" height="100" class="alignleft wp-image-682" />
<p>相信大家有用过Google Doc或Flickr，或者一些SNS社区的图片添加描述信息的效果，他们是在点击了一段文字后出现一个输入框，在输入框内输入你要填写的内容，点击“确认”或者“发表”即可立即显示出来。</p>
<p>今天做的这个效果呢，就是其中的截取版本。为什么这么说呢，因为我的效果只实现了前端的更改后立即发布的效果，而没有实际的与服务器端交互，也没有将输入的内容添加到数据库中，主要是为大家介绍一下实现原理。</p>
<p class="color-red">注意：源代码中没有jQuery库文件，请下载查看代码的朋友根据源代码路径自行添加。</p>]]></description>
			<content:encoded><![CDATA[<p>相信大家有用过Google Doc或Flickr，或者一些SNS社区的图片添加描述信息的效果，他们是在点击了一段文字后出现一个输入框，在输入框内输入你要填写的内容，点击“确认”或者“发表”即可立即显示出来。</p>
<p>今天做的这个效果呢，就是其中的截取版本。为什么这么说呢，因为我的效果只实现了前端的更改后立即发布的效果，而没有实际的与服务器端交互，也没有将输入的内容添加到数据库中，主要是为大家介绍一下实现原理。</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/AjaxEditing/AjaxEditing.rar" class="download">download</a><a href="http://www.ihiro.org/cases/AjaxEditing/" class="demo">demo</a></p>
<h3>1.HTML代码：</h3>
<p>
<div class="wp_codebox"><table><tr id="p67773"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
</pre></td><td class="code" id="p677code73"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;container&quot;&gt;
  &lt;h1&gt;Ajax Editing&lt;/h1&gt;
  &lt;p&gt;鼠标移动到列表上，双击即可以进行编辑！&lt;/p&gt;
  &lt;div class=&quot;block&quot;&gt;
    &lt;h2&gt;一、电影列表&lt;/h2&gt;
    &lt;ul class=&quot;editable&quot;&gt;
      &lt;li&gt;《建国大业》，&lt;span class=&quot;color_red&quot;&gt;更新中...&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/film-eternal-beloved&quot;&gt;《爱有来生》&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/movie-coco-chanel&quot;&gt;《COCO Chanel》&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/one-night-in-supermarket&quot;&gt;《夜店》&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/the-legend-of-1900&quot;&gt;《海上钢琴师–1900的传说》&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/film-xinsushijian-feedback&quot;&gt;《新宿事件》&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;block&quot;&gt;
    &lt;h2&gt;二、书籍列表&lt;/h2&gt;
    &lt;ul class=&quot;editable&quot;&gt;
      &lt;li&gt;《精通Javascript》&lt;/li&gt;
      &lt;li&gt;《jQuery基础教程》&lt;/li&gt;
      &lt;li&gt;《Flex入门到精通》&lt;/li&gt;
      &lt;li&gt;《PHP与MySQL Web开发》&lt;/li&gt;
      &lt;li&gt;《Google，你可以做什么》&lt;/li&gt;
      &lt;li&gt;《不抱怨的世界》&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre></td></tr></table></div>

</p>
<h3></h3>
<p>
<div class="wp_codebox"><table><tr id="p67774"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre></td><td class="code" id="p677code74"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span>/<span style="color: #933;">20px</span> Georgia<span style="color: #00AA00;">,</span> <span style="color: #ff0000;">&quot;Times New Roman&quot;</span><span style="color: #00AA00;">,</span> Times<span style="color: #00AA00;">,</span> <span style="color: #993333;">serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#404040</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">24px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.color_red</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#F00</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#container</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">400px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">30px</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">1%</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #808080; font-style: italic;">/* 标题样式 */</span>
	<span style="color: #cc00cc;">#container</span> h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">32px</span> <span style="color: #ff0000;">&quot;Lucida Sans Unicode&quot;</span><span style="color: #00AA00;">,</span> <span style="color: #ff0000;">&quot;Lucida Grande&quot;</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	.<span style="color: #993333;">block</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">180px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">30px</span> <span style="color: #933;">20px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #808080; font-style: italic;">/* 列表li的样式 */</span>
	ul<span style="color: #6666ff;">.editable</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #808080; font-style: italic;">/* 高亮当前编辑的列表li */</span>
	<span style="color: #6666ff;">.hover</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#E8F3FF</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #808080; font-style: italic;">/* 高亮当前的input输入框 */</span>
	<span style="color: #6666ff;">.editInput</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">160px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#E8F3FF</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
&nbsp;
	<span style="color: #808080; font-style: italic;">/* save和cancel按钮的效果，鼠标移动到上面的效果 */</span>
	<span style="color: #6666ff;">.btnSave</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.btnCancel</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#09F</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#36F</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #6666ff;">.btnSave</span><span style="color: #3333ff;">:hover</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.btnCancel</span><span style="color: #3333ff;">:hover  </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#36F</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#39F</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<h3>3. jQuery代码：</h3>
<p>
<div class="wp_codebox"><table><tr id="p67775"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
</pre></td><td class="code" id="p677code75"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> oldText<span style="color: #339933;">,</span> newText<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//鼠标移动到列表li上后，添加一个高亮的背景</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.editable li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'hover'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'hover'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dblclick'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//获得列表li中原先的html代码</span>
		oldText <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&quot;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&amp;quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//将原先的html代码放在一个input中，并追加save和cancel按钮后插入到列表li中</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;input type=&quot;text&quot; class=&quot;editInput&quot; value=&quot;'</span> <span style="color: #339933;">+</span> oldText <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; /&gt;&lt;a href=&quot;#&quot; class=&quot;btnSave&quot;&gt;save&lt;/a&gt;&lt;a href=&quot;#&quot; class=&quot;btnCancel&quot;&gt;cancel&lt;/a&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'target'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'_blank'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	<span style="color: #006600; font-style: italic;">//链接在新窗口中打开</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//点击save按钮，将新的值插入在列表li中</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.btnSave'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		newText <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">siblings</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&quot;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&amp;quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>newText<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//设置超链接a的跳转为否</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//若点击cancel按钮，则将最初的html代码插入在列表li中</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.btnCancel'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>oldText<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//设置超链接a的跳转为否</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>双击列表li后，将原先列表li中的html源码保存在oldText变量中，并且在列表li标签内插入一个input输入框和两个链接作为按钮save和cancel之用；<br />
点击save按钮后，将input中的新的html源码保存在newText变量中，重新插入到列表li中，从而覆盖了列表里中的input源码；<br />
点击cancel按钮，浙江原先的html代码oldText重新插入到列表li中，覆盖掉因双击插入的input输入框和两个链接按钮。
</p>
<p class="color-red">注意：源代码中没有jQuery库文件，请下载查看代码的朋友根据源代码路径自行添加。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/ajax-editing-in-placing/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>XPath:语法及示例，前端学习收集</title>
		<link>http://www.ihiro.org/xpath-syntax-and-example</link>
		<comments>http://www.ihiro.org/xpath-syntax-and-example#comments</comments>
		<pubDate>Mon, 21 Sep 2009 03:33:02 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[xml]]></category>
		<category><![CDATA[xpath]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=652</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/xpath.gif" alt="xpath" title="xpath" width="100" height="100" class="alignleft wp-image-655" />
<p>昨晚在看《精通Javascript》这本书时，看到XPath的部分内容，觉得学到的不是很多。在之前我就只知道Xpath是Xml相关的，Xpath在xml中的作用就像css中的选择器一样的作用，但具体的语法什么的都没有去关注过。于是今天一早在<a href="http://www.w3school.com.cn/" rel="external">W3C School</a>看收集了一些XPath相关的知识，与大家分享一下！</p>
<p>“XPath 使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。”</p>
<p>更多的XPath资料请访问:<a href="http://www.w3school.com.cn/xpath/index.asp" rel="external">http://www.w3school.com.cn/xpath/index.asp</a></p>]]></description>
			<content:encoded><![CDATA[<p>昨晚在看《精通Javascript》这本书时，看到XPath的部分内容，觉得学到的不是很多。在之前我就只知道Xpath是Xml相关的，Xpath在xml中的作用就像css中的选择器一样的作用，但具体的语法什么的都没有去关注过。于是今天一早在<a href="http://www.w3school.com.cn/" rel="external">W3C School</a>看收集了一些XPath相关的知识，与大家分享一下！</p>
<p>
<blockquote><span>XPath 使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。</span></p></blockquote>
<h3>XML 实例文档</h3>
<p>将在下面的例子中使用这个 XML 文档。</p>

<div class="wp_codebox"><table><tr id="p65276"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code" id="p652code76"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;">&lt; ?xml <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;ISO-8859-1&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;bookstore<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;book<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;title</span> <span style="color: #000066;">lang</span>=<span style="color: #ff0000;">&quot;eng&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Harry Potter<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/title<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;price<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>29.99<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/price<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/book<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;book<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;title</span> <span style="color: #000066;">lang</span>=<span style="color: #ff0000;">&quot;eng&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Learning XML<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/title<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;price<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>39.95<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/price<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/book<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/bookstore<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

</p>
<h3>一、选取节点</h3>
<p>XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step 来选取的。<br />
<strong>下面列出了最有用的路径表达式：</strong><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/XPath-01.jpg" alt="XPath-01" title="XPath-01" width="464" height="177" class="aligncenter size-full wp-image-656" /><br />
<strong>实例</strong><br />
在下面的表格中，我们已列出了一些路径表达式以及表达式的结果：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/XPath-02.jpg" alt="XPath-02" title="XPath-02" width="594" height="218" class="aligncenter size-full wp-image-657" />
</p>
<h3>二、谓语（Predicates）</h3>
<p>谓语用来查找某个特定的节点或者包含某个指定的值的节点。谓语被嵌在方括号中。<br />
<strong>实例</strong><br />
在下面的表格中，我们列出了带有谓语的一些路径表达式，以及表达式的结果：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/XPath-03.jpg" alt="XPath-03" title="XPath-03" width="589" height="258" class="aligncenter size-full wp-image-658" />
</p>
<h3>三、选取未知节点</h3>
<p>XPath 通配符可用来选取未知的 XML 元素。<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/XPath-04.jpg" alt="XPath-04" title="XPath-04" width="321" height="100" class="aligncenter size-full wp-image-659" /><br />
<strong>实例</strong><br />
在下面的表格中，我们列出了一些路径表达式，以及这些表达式的结果：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/XPath-05.jpg" alt="XPath-05" title="XPath-05" width="378" height="100" class="aligncenter size-full wp-image-660" /></p>
<h3>四、选取若干路径</h3>
<p>通过在路径表达式中使用“|”运算符，您可以选取若干个路径。<br />
<strong>实例</strong><br />
在下面的表格中，我们列出了一些路径表达式，以及这些表达式的结果：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/XPath-06.jpg" alt="XPath-06" title="XPath-06" width="568" height="115" class="aligncenter size-full wp-image-661" />
</p>
<h3>五、XPath 轴</h3>
<p>轴可定义某个相对于当前节点的节点集。<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/XPath-07.jpg" alt="XPath-07" title="XPath-07" width="506" height="332" class="aligncenter size-full wp-image-666" />
</p>
<h3>六、位置路径表达式</h3>
<p>位置路径可以是绝对的，也可以是相对的。<br />
绝对路径起始于正斜杠( / )，而相对路径不会这样。在两种情况中，位置路径均包括一个或多个步，每个步均被斜杠分割：</p>
<p>绝对位置路径：/step/step/&#8230;<br />
相对位置路径：step/step/&#8230;<br />
每个步均根据当前节点集之中的节点来进行计算。</p>
<p>步（step）包括：<br />
轴（axis）:    定义所选节点与当前节点之间的树关系<br />
节点测试（node-test）:    识别某个轴内部的节点<br />
零个或者更多谓语（predicate）:    更深入地提炼所选的节点集</p>
<p>步的语法：轴名称::节点测试[谓语]<br />
<strong>实例</strong><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/XPath-08.jpg" alt="XPath-08" title="XPath-08" width="565" height="280" class="aligncenter size-full wp-image-665" />
</p>
<p style="color:#f00">该文来自网络收集，仅供学习之用！更多的XPath资料请访问:<a href="http://www.w3school.com.cn/xpath/index.asp" rel="external">http://www.w3school.com.cn/xpath/index.asp</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/xpath-syntax-and-example/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>电影:《爱有来生》，凄美的人鬼情</title>
		<link>http://www.ihiro.org/film-eternal-beloved</link>
		<comments>http://www.ihiro.org/film-eternal-beloved#comments</comments>
		<pubDate>Sat, 19 Sep 2009 16:10:33 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[爱情片]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=607</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/爱有来生.jpg" alt="爱有来生" title="爱有来生" width="100" height="100" class="alignleft size-full wp-image-608" />
<p>就在发布该文章之前才看完了该不电影，之所以说"才"，是因为我该片下载了有3、4日有余，一直都没看。因为我对片中的两位主角都不是很熟，只是在《中国电影报道》节目中看到介绍过。在节目中介绍了该片的拍摄花絮和简要的故事情节，只是大概地知道是一个现代的中国版《人鬼情未了》。</p>
<p>该片是有段奕宏和俞飞鸿主演，就在刚刚我看完该片后，就一个词的感慨：“凄美”。很久很久了吧，没有看过这种情绪的情节和对白。让我想起了《东邪西毒》中的对白，话语不多，经常使用一种旁白的述说。很是温馨，很是情绪。</p>
<p>还有就是我在看电影的前奏介绍主演、制片和导演时，发现女主角俞飞鸿，即是女主演，也是制片人之一，更加是编剧和导演。又是一个才华横溢的女子。而在看片尾时，发现感谢人之一为徐克导演。这才让我明白了为什么该片有了一点《东邪西毒》的味道。我想该片的拍摄一定是有着徐克的指导，毕竟该片是俞飞鸿的首部导演作品吧。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/爱有来生剧照.jpg" alt="爱有来生剧照" title="爱有来生剧照" class="alignright size-full wp-image-609" />就在发布该文章之前才看完了该不电影，之所以说&#8221;才&#8221;，是因为我该片下载了有3、4日有余，一直都没看。因为我对片中的两位主角都不是很熟，只是在《中国电影报道》节目中看到介绍过。在节目中介绍了该片的拍摄花絮和简要的故事情节，只是大概地知道是一个现代的中国版《人鬼情未了》。</p>
<p>该片是有段奕宏和俞飞鸿主演，就在刚刚我看完该片后，就一个词的感慨：“凄美”。很久很久了吧，没有看过这种情绪的情节和对白。让我想起了《东邪西毒》中的对白，话语不多，经常使用一种旁白的述说。很是温馨，很是情绪。</p>
<p>还有就是我在看电影的前奏介绍主演、制片和导演时，发现女主角俞飞鸿，即是女主演，也是制片人之一，更加是编剧和导演。又是一个才华横溢的女子。而在看片尾时，发现感谢人之一为徐克导演。这才让我明白了为什么该片有了一点《东邪西毒》的味道。我想该片的拍摄一定是有着徐克的指导，毕竟该片是俞飞鸿的首部导演作品吧。</p>
<h3>故事介绍：</h3>
<p>《爱有来生》围绕着一棵银杏树，讲述了一段人鬼情未了的故事。段奕宏扮演的男主角在片中变身为一个痴情之鬼，前世深刻爱上了俞飞鸿扮演的孤女阿九，但因为两个家族的火并，二人生死离别。段奕宏死后，成孤魂一缕，在一棵银杏树下，深情等待已经投胎转世的前世爱人50年。此鬼情到深处无怨尤，在银杏树下倏忽而来，倏忽而去，银杏树叶纷纷抖动坠落，带出一股惊悚之气，鬼气满满的充盈在整座小院子中。每天做鬼的段奕宏都会与今生的俞飞鸿在银杏树下展开一番对话，所有的前世记忆，都在段奕宏的讲述中重现，直至夜半茶凉……</p>
<p>故事讲述前世的阿九和阿明因为两家的仇恨而不能相爱，阿明出家当了和尚，但也没有逃脱最终被杀的结局。阿九和阿明在最后的仇杀中双双死去，死在了一颗千年的银杏树下。阿九临死前跟阿明相约来生再会，来生，她会再到这颗银杏树下来找他，不管大家变成了什么样子，他们都要重新相聚一起，那时，他们便没有了所有仇恨的牵扯……他们要全心全意地重新相爱……</p>
<p>阿九死后就急着去投了胎……而阿明怕阿九随时会来到这银杏树下找他，便一步也不敢离开，错过了投胎的时机，只能作为一个幽灵徘徊在轮回道间，等待着今生的阿九再次出现……可是，他在这轮回道上也只能停留五十年……五十年过去了，可阿九仍然没有来……阿明的时限也到了……</p>
<p>就在阿明快要离去的时候，阿九终于出现了……她终于来到了这颗银杏树下……可是，今生的阿九已经不再是前世的阿九，在今生，她是一个名叫小玉的年轻少妇，她不仅已经把前世的记忆全部忘却，而且，她还有着一个幸福美满的家庭和一个很爱她也让她深爱的丈夫……阿明在他离去前，会跟她说什么呢？还该不该跟她相认呢？今生的小玉还能想起前世的承诺吗？……前世未完的爱情，还可以在今生延续吗？</p>
<h3>电影预告：</h3>
<p class="aligncenter"><embed src="http://player.youku.com/player.php/sid/XMTEzNzQyMjI4/v.swf" quality="high" width="480" height="400" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed></p>
<p><h3>影片下载：</h3>
</p>
<p><a href="ed2k://|file|%5B%E7%88%B1%E6%9C%89%E6%9D%A5%E7%94%9F%5D.Eternal.Beloved.2009.CN.DVDRip.XviD-XTM.avi|731830272|b33e03021a83123492e6f0ef8ead112b|h=5a7w74i4pha4jcyzudtjx6x5bm5rohn7|/" rel="external">下载地址</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/film-eternal-beloved/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>电影:《香奈儿》，伟大的时尚家</title>
		<link>http://www.ihiro.org/movie-coco-chanel</link>
		<comments>http://www.ihiro.org/movie-coco-chanel#comments</comments>
		<pubDate>Fri, 18 Sep 2009 07:01:24 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[传记片]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=597</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/coco-chanel.jpg" alt="coco-chanel" title="coco-chanel" width="100" height="100" class="alignleft size-full wp-image-595" />
<p>其实在上周末的时候我就看完了这部人物传记片，一直没空更新到博客中。今日恰巧空闲，便来写一写这观后感。</p>
<p>该部电影在2008年的时候就拍摄完成，直到2009年我才看到这部片子。我不敢说该电影拍摄的怎么样，但我觉得她的故事是感动人的。对自我也是一个人生的激励，所以我与大家分享她，希望她也可以给你们带去一些鼓励。</p>
<p>本片讲述传奇时尚设计师可可．香奈儿的生平，通过插叙的手法表现她的奋斗和感情经历，让世人了解这位独一无二的大师是如何倾注自己的心血和价值于其产品上。</p>]]></description>
			<content:encoded><![CDATA[<h3>我的话语：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/coco-chanel-index.jpg" alt="coco-chanel-index" title="coco-chanel-index" width="150" height="222" class="alignright size-full wp-image-744" /><br />
其实在上周末的时候我就看完了这部人物传记片，一直没空更新到博客中。今日恰巧空闲，便来写一写这观后感。</p>
<p>该部电影在2008年的时候就拍摄完成，直到2009年我才看到这部片子。我不敢说该电影拍摄的怎么样，但我觉得她的故事是感动人的。对自我也是一个人生的激励，所以我与大家分享她，希望她也可以给你们带去一些鼓励。</p>
<h3>影片简介：</h3>
<p>本片讲述传奇时尚设计师可可．香奈儿的生平，通过插叙的手法表现她的奋斗和感情经历，让世人了解这位独一无二的大师是如何倾注自己的心血和价值于其产品上。</p>
<p>电影也简介的反映了欧洲社会的变革。香奈儿的品牌价值和其吸引人之处将透过本片得到更好的解读&#8211;性格决定作品。</p>
<h3>人物介绍：</h3>
<p>可可．香奈儿(1883-1971)原名「Gabrielle Bonheur Chanel」，孤儿出身的她是20世纪时尚界最重要的人物，她以先锋的理念改变了上个世纪女性的衣着。在《时代》(TIME)杂志评选的「20世纪最具影响力的100人」当中她是唯一上榜的时装设计师。</p>
<h3>品牌介绍：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/Chanel_logo.jpg" alt="Chanel_logo" title="Chanel_logo" width="220" height="143" class="alignright size-full wp-image-603" /><strong>香奈尔（法文：Chanel）</strong>，是由可可·香奈尔（Gabrielle Bonheur &#8220;Coco&#8221; Chanel）在1909年创办的巴黎女装店。这家小商店开始只卖女士的头饰，而在一年内搬迁至康邦街（Rue Cambon）。小店的辉煌来自于它的旗帜香奈尔五号香水（1921年五月，当香水创作师Ernest Beaux呈现给香奈尔多重的香水选择，香奈尔几乎毫无犹豫地选出了第五款，之后成为香奈尔五号香水。），以及广受欢迎的香奈尔套装——一个优雅的设计，包括齐膝短裙和干练的短上装，传统上用毛线织成，黑色裁边和金色纽扣，配穿大串珍珠项链。</p>
<h3>品牌历史：</h3>
<p>1910年，香奈尔替原本穿着裙子打球的女人们设计了运动的裤装，之后又抛弃束腹，设计了以男性服装为元素的宽松上衣。这些特立独行的行径使这位离经叛道却热爱山茶花的夫人，成为当时女性主义启蒙的重要起源。</p>
<p>自从香奈尔五号于（Chanel N°5）1923年面世以来，可可·香奈尔的时尚风靡伦敦和巴黎的社交圈，购买者趋之若鹜。香奈尔选择住进了丽兹宾馆，而她所居住的套间至今仍称为“可可·香奈尔套房”。</p>
<p>1971年香奈尔逝世。德国设计师卡尔·拉格斐（Karl Lagerfeld）在1986年才开始接任Chanel设计大权。</p>
<p>年轻的拉格斐在第一季时就剪破Chanel雪纺长裙的裙摆，搭配Chanel外套，再加上鲜艳夸张的假珠宝饰品，让习惯Chanel优雅传统的时尚界非常震惊，后来事实才证明拉格斐叛逆的天才与特出就与年轻时的香奈尔同出一辙，并将Chanel王国领向另一个颠峰。 不论是正式的TWEED套装、休闲的CRUISE WEAR甚至是礼服，Chanel一眼看来并不突出的剪裁，实际上对身材有非常精致的修饰效果。</p>
<p>饰品部分，Chanel是第一个打破“珠宝迷思”的品牌，提倡将真假珠宝搭配在一起。因为香奈尔的喜爱，“山茶花”便成为Chanel饰品中最主要的造型。以闪亮金链与双C标志吸引了全球女士爱慕的Chanel皮件，搭配时非必要与套装整体搭配， 其实只要发挥个人搭配巧思，Chanel可以展现出过人的优雅，并展露属于个人的风格。</p>
<h3>影片下载地址：</h3>
<p><a href="ed2k://|file|%5B%E9%A6%99%E5%A5%88%E5%84%BF%5D.Coco.Chanel.2008.DVDRip.XviD-VoMiT-cd1.avi|733763584|a95ed1b32f77f71be1ea8bcb2f04f48f|h=eonk2sdoincb5tchkcrcewob7xv3uzul|/" rel="external">CD01</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E9%A6%99%E5%A5%88%E5%84%BF%5D.Coco.Chanel.2008.DVDRip.XviD-VoMiT-cd1.chs.srt|46489|f132f7fd1b8093b4121101b0d6221f33|s=http://subs.verycd.com/f132f7fd1b8093b4121101b0d6221f3346489/subtitles.srt|/" rel="external">CD01字幕</a></p>
<p><a href="ed2k://|file|%5B%E9%A6%99%E5%A5%88%E5%84%BF%5D.Coco.Chanel.2008.DVDRip.XviD-VoMiT-cd2.avi|733198336|56586f27781b4b2d83a723984b0026c6|h=sfkjqgwv3tcbhypqpkl7ahhdufvfjyh2|/" rel="external">CD02</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E9%A6%99%E5%A5%88%E5%84%BF%5D.Coco.Chanel.2008.DVDRip.XviD-VoMiT-cd2.chs.srt|41439|ff01271ee11495989c0a48dd69240587|s=http://subs.verycd.com/ff01271ee11495989c0a48dd6924058741439/subtitles.srt|/" rel="external">CD02字幕</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/movie-coco-chanel/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Wordpress:正确地引入comment-reply.js文件</title>
		<link>http://www.ihiro.org/including-wordpress-comment-reply-js</link>
		<comments>http://www.ihiro.org/including-wordpress-comment-reply-js#comments</comments>
		<pubDate>Wed, 16 Sep 2009 05:33:25 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[技巧]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=590</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/comment.jpg" alt="comment" title="comment" width="100" height="100" class="alignleft wp-image-592" />
<p>评论回复功能是自Wordpress2.7版本后就有了的功能，它的实现原理是通过引入了一个js文件（也就是我今天讲到的js文件）。不过现在更多的博主们选择了分层留言的插件，这些插件其实也继承了该js文件的功能。而就我个人的博客来说，评论回复分层我是通过引入comment-reply.js文件实现的，没有使用评论插件，所以也没有一些附加的功能。</p>
<p>引入comment-reply.js的方法有三种：</p>
<p><strong>1.根据判断条件加载；&#160;&#160;&#160;&#160;2.更加健壮的判断条件；&#160;&#160;&#160;&#160;3.在function.php中添加action。</strong></p>]]></description>
			<content:encoded><![CDATA[<p>评论回复功能是自Wordpress2.7版本后就有了的功能，它的实现原理是通过引入了一个js文件（也就是我今天讲到的js文件）。不过现在更多的博主们选择了分层留言的插件，这些插件其实也继承了该js文件的功能。而就我个人的博客来说，评论回复分层我是通过引入comment-reply.js文件实现的，没有使用评论插件，所以也没有一些附加的功能。</p>
<p>引入comment-reply.js的方法有三种：</p>
<h3>1.方法一:根据判断条件加载</h3>
<p>在header.php文件的head标签内添加如下代码：</p>

<div class="wp_codebox"><table><tr id="p59077"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p590code77"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> is_singular<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> wp_enqueue_script<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'comment-reply'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>其中的 is_singular() 是集合了is_single()和is_page()两个判断的功能，根据此判断条件判断后只有在但页面时才会加载comment-reply.js文件。
</p>
<h3>2.方法二:更加健壮的判断条件</h3>
<p>同样在header.php文件的head标签内添加代码：</p>

<div class="wp_codebox"><table><tr id="p59078"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p590code78"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> is_singular<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> AND comments_open<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> AND <span style="color: #009900;">&#40;</span>get_option<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thread_comments'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
  wp_enqueue_script<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'comment-reply'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>该段代码的好处是判断条件的增多，使得代码更加健壮。</p>
<h3>3.方法三:在function.php中添加action</h3>
<p>在function.php文件中添加如下代码：</p>

<div class="wp_codebox"><table><tr id="p59079"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code" id="p590code79"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #000000; font-weight: bold;">function</span> theme_queue_js<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>is_admin<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> is_singular<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> AND comments_open<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> AND <span style="color: #009900;">&#40;</span>get_option<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thread_comments'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
      wp_enqueue_script<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'comment-reply'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'get_header'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'theme_queue_js'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>主要是通过添加一个action实现过滤加载。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/including-wordpress-comment-reply-js/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Wordpress:2.9版本&#8211;新的特性</title>
		<link>http://www.ihiro.org/wordpress-2-9-version-new-features</link>
		<comments>http://www.ihiro.org/wordpress-2-9-version-new-features#comments</comments>
		<pubDate>Sun, 13 Sep 2009 04:07:07 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=580</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/wordpress-2.9-logo.jpg" alt="wordpress-2.9-logo" title="wordpress-2.9-logo" width="100" height="100" class="alignleft wp-image-581" />
<p>最近从网络上了解了一些关于Wordpress的下一个版本2.9的一些新特性，总结了几个与大家分享分享，也好让大家对新的版本的到来更加充满期待。</p>
<h3>特性一：图像编辑器</h3>
<h3>特性二： excerpt过滤器</h3>
<h3>特性三：评论垃圾回收站</h3>
<p>另附上最新的Wordpress的Cheat Sheet文档：<a href="http://www.ihiro.org/downloads/Wordpress-Cheat-Sheet.pdf" rel="external">下载地址</a></p>]]></description>
			<content:encoded><![CDATA[<p>最近从网络上了解了一些关于Wordpress的下一个版本2.9的一些新特性，总结了几个与大家分享分享，也好让大家对新的版本的到来更加充满期待。</p>
<h3>特性一：图像编辑器</h3>
<p>貌似网络上是有这样的插件存在，但在wordpress2.9版本中，该特性不再是一个插件，而是wordpress的一个后台部分，可以通过该特性在博客的后台对图像进行一些编辑，以满足网页布局的需要。<br />
特性截图：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/wp-image-edit1.png" alt="wp-image-edit1" title="wp-image-edit1" width="421" height="202" class="aligncenter size-full wp-image-582" /><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/wp-image-edit2.png" alt="wp-image-edit2" title="wp-image-edit2" width="503" height="650" class="aligncenter size-full wp-image-583" /><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/wp-image-edit3.png" alt="wp-image-edit3" title="wp-image-edit3" width="442" height="720" class="aligncenter size-full wp-image-584" /></p>
<h3>特性二： excerpt过滤器</h3>
<p>在wordpress2.9版本中新增加了两个过滤器来调整excerpt(the_excerpt())摘要部分，通过修改返回值的方式达到调整摘要字符串长度和more链接的文字。只需在function.php文件中添加如下代码即可(版本2.9可用):</p>

<div class="wp_codebox"><table><tr id="p58080"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code" id="p580code80"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// 更改excerpt()摘要的字符长度，可以通过修改返回值实现</span>
<span style="color: #000000; font-weight: bold;">function</span> new_excerpt_length<span style="color: #009900;">&#40;</span><span style="color: #000088;">$length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">40</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'excerpt_length'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'new_excerpt_length'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// 修改excerpt()的more链接的文字，同样可以通过修改返回值实现</span>
<span style="color: #000000; font-weight: bold;">function</span> new_excerpt_more<span style="color: #009900;">&#40;</span><span style="color: #000088;">$more</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #0000ff;">'...'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'excerpt_more'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'new_excerpt_more'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>特性三：评论垃圾回收站</h3>
<p>在wordpress2.9版本中将添加评论垃圾回收站的功能，你可以将一些无用的评论删除，而这些被删除的评论就暂时保存在回收站中，直到过期，你可以在wp_config.php文件中定义过期的时间长度，代码如下：</p>

<div class="wp_codebox"><table><tr id="p58081"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p580code81"><pre class="php" style="font-family:monospace;"><span style="color: #990000;">define</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'EMPTY_TRASH_DAYS'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">30</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>特性截图：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/trash-comment1.png" alt="trash-comment1" title="trash-comment1" width="436" height="182" class="aligncenter size-full wp-image-585" /><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/trash-comment2.png" alt="trash-comment2" title="trash-comment2" width="351" height="145" class="aligncenter size-full wp-image-586" /></p>
<p>另附上最新的Wordpress的Cheat Sheet文档：<a href="http://www.ihiro.org/downloads/Wordpress-Cheat-Sheet.pdf" rel="external">下载地址</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/wordpress-2-9-version-new-features/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>游戏:3D动作冒险类游戏《迷你忍者》</title>
		<link>http://www.ihiro.org/3d-action-adventure-game-mini-ninja</link>
		<comments>http://www.ihiro.org/3d-action-adventure-game-mini-ninja#comments</comments>
		<pubDate>Fri, 11 Sep 2009 03:18:24 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[软件下载]]></category>
		<category><![CDATA[游戏]]></category>
		<category><![CDATA[软件]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=565</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/mini-ninjas.jpg" alt="mini-ninjas" title="mini-ninjas" width="100" height="100" class="alignleft size-full wp-image-566" />
<p>大家看到这个标题一定很奇怪吧，我这个技术博客怎么发表游戏的文章呢。呵呵，其实主要的原因是该游戏的主角小忍者的名字就叫Hiro,另一方面该游戏的画面确实很不错，确实是迷你啊。我正在下载，准备工作之余偶尔休闲一下，毕竟很久没有玩过游戏了。</p>
<p>因为该游戏是9月份才正式发布的，所以暂时只有英文版的。</p>
<p>十分感谢驴友<a href="http://verycd.com/members/@u1015652/" rel="external">renchongyi</a>的分享。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://image-7.verycd.com/7b9a89d808b9395c7dd1d2547368b5d1311025(600x)/thumb.jpg" width="30%" height="30%" class="alignright" />大家看到这个标题一定很奇怪吧，我这个技术博客怎么发表游戏的文章呢。呵呵，其实主要的原因是该游戏的主角小忍者的名字就叫Hiro,另一方面该游戏的画面确实很不错，确实是迷你啊。我正在下载，准备工作之余偶尔休闲一下，毕竟很久没有玩过游戏了。</p>
<h3>游戏介绍：</h3>
<p>《迷你忍者》由Elo Interactive工作室所开发，这款游戏相当独特，不管是角色的艺术风格，到游戏的深度，《迷你忍者》都拥有其独特的魅力，相信对于老少玩家都能够具有娱乐性。Elo Interactive以前的作品都是以18禁暴力为主，本次转型之作开始强调超级可爱的卡通风格，不能不说是争取更大年龄范围玩家的一个好办法。</p>
<p>玩家将会在游戏中扮演一个忍者小英雄Hiro, 在游戏中将通过一连串忍者的训练，磨练个人的技能来对抗邪恶武士，当玩家在危险世界中冒险，终于要揭开邪恶武士军的真面目、展开最终决战时，学会驾驭九印魔法的力量，并与其他忍者伙伴合作使出特殊技能，将可助玩家迈向成功之路。玩家最终凭借自己出色的战斗技巧和忍术到达命运城堡，击败邪恶的督军来解救这个世界。</p>
<p style="color:#f00;">因为该游戏是9月份才正式发布的，所以暂时只有英文版的。</p>
<h3>游戏动画：</h3>
<p style="text-align:center;"><embed src="http://player.youku.com/player.php/sid/XMTA2MTc0NTc2/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed></p>
<h3>游戏图片：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/mini-ninjas-01.jpg" alt="mini-ninjas-01" title="mini-ninjas-01" width="600" height="337" class="aligncenter size-full wp-image-567" /><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/mini-ninjas-02.jpg" alt="mini-ninjas-02" title="mini-ninjas-01" width="600" height="337" class="aligncenter size-full wp-image-567" /><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/mini-ninjas-03.jpg" alt="mini-ninjas-03" title="mini-ninjas-01" width="600" height="337" class="aligncenter size-full wp-image-567" /><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/mini-ninjas-04.jpg" alt="mini-ninjas-04" title="mini-ninjas-01" width="600" height="337" class="aligncenter size-full wp-image-567" /><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/mini-ninjas-05.jpg" alt="mini-ninjas-05" title="mini-ninjas-01" width="600" height="337" class="aligncenter size-full wp-image-567" />
</p>
<h3>下载地址：</h3>
<p><strong>1. 硬盘版</strong><br />安装包：<a href="ed2k://|file|%5B%E8%BF%B7%E4%BD%A0%E5%BF%8D%E8%80%85%5D.Mini.Ninjas.ENG.rip.rar|2204108342|7b677f14e5b29e04fdca2f6c746943a0|h=m3ukgn3iboghnjsxzheh5d3ufv2xlhlq|/" rel="external">下载地址</a><br />动画添加包：<a href="ed2k://|file|%5B%E8%BF%B7%E4%BD%A0%E5%BF%8D%E8%80%85%5D.Mini.Ninjas.Movies.addon.rar|2043721566|e8fdf7b1e39ba2856e5ce4398e18248b|h=yujdgqdgkt7xuooqx2cc2grsb7vygigw|/" rel="external">下载地址</a><br />游戏声音小软件(不安装的话游戏会没有声音)：<a href="ed2k://|file|%5B%E5%BF%85%E8%A3%85%E8%BD%AF%E4%BB%B6%5D.openal.exe|809496|36d1355ff159f46bd0fa69fa0506070c|h=samxrkuxmqbh2d2lrqcb6eol5qahvmpf|/" rel="external">下载地址</a></p>
<p><strong>2.克隆版</strong><br />镜像MDF文件：<a href="ed2k://|file|%5B%E8%BF%B7%E4%BD%A0%E5%BF%8D%E8%80%85%5D.Mini.Ninjas.EMUDVD-Unleashed.mdf|6248202240|e266c36edc02b6899652d915e96b86ea|h=fygsg6acpagjgwobpjox27faoqhew5c7|/" rel="external">下载地址</a><br />
MD5文件：<a href="ed2k://|file|%5B%E8%BF%B7%E4%BD%A0%E5%BF%8D%E8%80%85%5D.Mini.Ninjas.EMUDVD-Unleashed.mds|56120|89a559753eeb27b64615db4160bd08fa|h=qzypswlog6itubfaeza3z72sqe2b2ggx|/" rel="external">下载地址</a></p>
<p><strong>3.破解版</strong><br />镜像ISO文件：<a hred="ed2k://|file|%5B%E8%BF%B7%E4%BD%A0%E5%BF%8D%E8%80%85%5D.Mini.Ninjas-RELOADED.iso|6253807616|173f44f0853829059e7ce7b58834a478|h=utvgxmwcqwipoyrquelbkd7fskhtd2yt|/" rel="external">下载地址</a></p>
<p style="color:#f00;">最后十分感谢驴友<a href="http://verycd.com/members/@u1015652/" rel="external">renchongyi</a>的分享。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/3d-action-adventure-game-mini-ninja/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Javascript:面向对象之静态、公有、私有、特权对象</title>
		<link>http://www.ihiro.org/javascript-oop</link>
		<comments>http://www.ihiro.org/javascript-oop#comments</comments>
		<pubDate>Thu, 10 Sep 2009 01:39:35 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=556</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/javascript-objects.gif" alt="javascript-objects" title="javascript-objects" class="alignleft size-full wp-image-557" />
<p>虽然我对jQuery库的应用比较熟悉，但对他的内部实现机制还是有许多懵懂之处。于是乎，近日开始学习Javascript面向对象编程。在此学习过程中，会整理一些笔记发布在我的博客上，也提供给和我一样不理解Javascript面向对象编程的朋友一些小小的帮助。</p>
<p>今天就对面向对象编程的几个对象类型做一个实例总结。</p>
<p><strong>1. 静态对象；</strong>&#160;&#160;&#160;&#160;<strong>2. 公有对象；</strong>&#160;&#160;&#160;&#160;<strong>3. 私有对象、特权对象。</strong></p>]]></description>
			<content:encoded><![CDATA[<p>虽然我对jQuery库的应用比较熟悉，但对他的内部实现机制还是有许多懵懂之处。于是乎，近日开始学习Javascript面向对象编程。在此学习过程中，会整理一些笔记发布在我的博客上，也提供给和我一样不理解Javascript面向对象编程的朋友一些小小的帮助。</p>
<p>今天就对面向对象编程的几个对象类型做一个实例总结。</p>
<h3>1. 静态对象</h3>
<p>首先创建一个隐式的Function对象并赋给了myConstructor变量，在创建完对象后，通过添加静态的属性和方法来补充该myConstructor实例化后的对象，代码如下：</p>

<div class="wp_codebox"><table><tr id="p55682"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code" id="p556code82"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myConstructor <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//some code</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">// -----此处的name属性和alertName方法都属于静态对象</span>
myConstructor.<span style="color: #000066;">name</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;hiro&quot;</span><span style="color: #339933;">;</span>
myConstructor.<span style="color: #660066;">alertName</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">// -----此处的()起到了执行代码的作用</span>
myConstructor.<span style="color: #660066;">alertName</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>2. 公有对象</h3>
<p>创建一个显式的Function对象，然后实例化对象，通过向实例化后的对象中的原型prototype添加属性和方法来产生公有的属性和方法，代码如下：</p>

<div class="wp_codebox"><table><tr id="p55683"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code" id="p556code83"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> myConstructor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//some code</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> obj <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> myConstructor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>obj.<span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// -----此处通过javascript的原型prototype来添加公有对象</span>
myConstructor.<span style="color: #660066;">prototype</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;hiro&quot;</span><span style="color: #339933;">;</span>
myConstructor.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">alertName</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">// -----此处的()起到了执行代码的作用</span>
obj.<span style="color: #660066;">alertName</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>3. 私有对象、特权对象</h3>
<p>创建一个显式的Function对象，在该对象内部定义的变量或方法为私有对象，而在该兑现内部通过this.来引用的属性和方法为特权方法，之所以称为“特权”，是因为特权对象可以访问私有对象，代码如下：</p>

<div class="wp_codebox"><table><tr id="p55684"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code" id="p556code84"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span>  myConstructor<span style="color: #009900;">&#40;</span>message<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// -----此处的name和alertName为私有对象，只能在函数对象内部访问</span>
	<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">name</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;hiro&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">function</span> alertName<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// -----此处的myMessage和alertMessage为特权方法，它既可以被函数对象外部访问，也可以访问函数内部对象的私有对象</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">myMessage</span> <span style="color: #339933;">=</span> message<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">alertMessage</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">// -----此处访问了函数对象内部的name和alertName私有对象</span>
		alertName<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ihiro.org&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">myMessage</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;, &quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	alertName<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> obj <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> myConstructor<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;A object is created&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>obj.<span style="color: #660066;">myMessage</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
obj.<span style="color: #660066;">alertMessage</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>以上语言性描述纯属个人理解，有理解不到位的地方给我提示出来，谢谢！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/javascript-oop/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Wordpress:高亮管理员的留言信息</title>
		<link>http://www.ihiro.org/highlight-the-administrators-reply-message</link>
		<comments>http://www.ihiro.org/highlight-the-administrators-reply-message#comments</comments>
		<pubDate>Sun, 06 Sep 2009 05:48:21 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[技巧]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=548</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/highlight-admin-comment.jpg" alt="highlight-admin-comment" title="highlight-admin-comment" width="100" height="100" class="alignleft size-full wp-image-551" />
<p>在wp中有着管理员回复留言者的功能，但是正常的情况下，管理员和评论者的留言信息的样式是一样的，所以一眼看上去没什么区别。只能通过查看是否有admin这个人的留言信息。但是更多的博主们喜欢用自己心仪的英文名来显示，从而代替了默认的admin显示名。那么对阅读者来说，貌似留言都来自于访问者，而没有管理员的回复留言。</p>
<p>那么我总结了两个高亮管理员的留言的方法。</p>
<p><strong>方法一： 简单的固定管理员方法；方法二：自动侦测管理员邮箱。</strong></p>]]></description>
			<content:encoded><![CDATA[<p>在wp中有着管理员回复留言者的功能，但是正常的情况下，管理员和评论者的留言信息的样式是一样的，所以一眼看上去没什么区别。只能通过查看是否有admin这个人的留言信息。但是更多的博主们喜欢用自己心仪的英文名来显示，从而代替了默认的admin显示名。那么对阅读者来说，貌似留言都来自于访问者，而没有管理员的回复留言。</p>
<p>那么我总结了两个高亮管理员的留言的方法。方法如下：</p>
<h3>方法一、 简单的固定管理员方法：</h3>
<p>该方法只有当管理员的邮箱地址是固定不变的时候才可以生效，若改变的管理员的邮箱地址，那么也需要在源代码中修改相应的地址。所以该方法比较适合一个人固定邮箱地址的博客。<br />
<br />打开comments.php文件，若管理员只有一个人，添加如下代码：</p>

<div class="wp_codebox"><table><tr id="p54885"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code" id="p548code85"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
      <span style="color: #000088;">$admin_email</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;hiro.zhd@gmail.com&quot;</span><span style="color: #339933;">;</span>
&nbsp;
       <span style="color: #000088;">$admin_comment</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>   <span style="color: #666666; font-style: italic;">//设置一个布尔类型的变量来判断该留言是否为管理员的留言</span>
&nbsp;
       <span style="color: #666666; font-style: italic;">//如果该留言是管理员的留言</span>
       <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$comment</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_author_email</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$admin_email</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>  
            <span style="color: #000088;">$admin_comment</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>  
            <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>  
       <span style="color: #009900;">&#125;</span>  
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>当然若一个博客有多个管理员的话，可以使用一个数组来存放这些管理员的邮箱地址，那么该方法的源代码是：</p>

<div class="wp_codebox"><table><tr id="p54886"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</pre></td><td class="code" id="p548code86"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php  
     <span style="color: #000088;">$admin_emails</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
                                <span style="color: #0000ff;">&quot;hiro.zhd@gmail.com&quot;</span><span style="color: #339933;">,</span>
                                <span style="color: #0000ff;">&quot;hiro@ihiro.org&quot;</span><span style="color: #339933;">,</span>
                                <span style="color: #0000ff;">&quot;hiro@gmail.com&quot;</span>
                           <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>     
&nbsp;
     <span style="color: #000088;">$admin_comment</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>     <span style="color: #666666; font-style: italic;">//设置一个布尔类型的变量来判断该留言是否为管理员的留言</span>
     <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$admin_emails</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$admin_email</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>  
         <span style="color: #666666; font-style: italic;">//如果该留言是管理员的留言 </span>
         <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$comment</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_author_email</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$admin_email</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>  
             <span style="color: #000088;">$admin_comment</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>  
             <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>  
         <span style="color: #009900;">&#125;</span>  
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>  
 <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>最后在使用xhtml来控制留言列表时，只需判断$admin_comment的布尔值即可，为真则该留言是管理员的留言，为假，则是来访者的留言，xhtml源码如下：</p>

<div class="wp_codebox"><table><tr id="p54887"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p548code87"><pre class="html" style="font-family:monospace;">&lt;li class=&quot;&lt;?php if($admin_comment) echo 'admincomment'; ?&gt;&quot;&gt;  
     &lt;!-- 这里输出其他的html信息 --&gt;  
&lt;/li&gt;</pre></td></tr></table></div>

<p>最后，只需对类admincomment样式化即可突出管理员的留言(样式化的css则可以自己随意更改)，如：</p>

<div class="wp_codebox"><table><tr id="p54888"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p548code88"><pre class="css" style="font-family:monospace;">.admincomment<span style="color: #00AA00;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#191919</span><span style="color: #00AA00;">;</span> 
      <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#FFF</span><span style="color: #00AA00;">;</span> 
      <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<h3>方法二、自动侦测管理员邮箱：</h3>
<p>只需添加一些与数据库操作的php代码即可自动侦查到博客中所有管理员的邮箱地址，从而存储在一个数组中，代码如下：</p>

<div class="wp_codebox"><table><tr id="p54889"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code" id="p548code89"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php   
     <span style="color: #000088;">$user_level</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">8</span><span style="color: #339933;">;</span>   <span style="color: #666666; font-style: italic;">//默认地，wp有1-10是个数字来控制wp中用户的角色（如管理员、编辑、作者、阅读者等），而管理员的数字则是8</span>
     <span style="color: #000088;">$admin_emails</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   <span style="color: #666666; font-style: italic;">//用来存放侦查到的所有管理员邮箱地址的数组 </span>
&nbsp;
     <span style="color: #666666; font-style: italic;">//从数据库中查找做角色数字为8的所有管理员帐号</span>
     <span style="color: #000088;">$admin_accounts</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get_results</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;SELECT * FROM <span style="color: #006699; font-weight: bold;">$wpdb-&gt;usermeta</span> WHERE meta_key = 'wp_user_level' AND meta_value &gt;= <span style="color: #006699; font-weight: bold;">$user_level</span> &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
&nbsp;
     <span style="color: #666666; font-style: italic;">//获得每个管理员各自的邮箱地址</span>
     <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$admin_accounts</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$admin_account</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>  
         <span style="color: #000088;">$admin_info</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get_row</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;SELECT * FROM <span style="color: #006699; font-weight: bold;">$wpdb-&gt;users</span> WHERE ID = <span style="color: #006699; font-weight: bold;">$admin_account-&gt;user_id</span>&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
&nbsp;
         <span style="color: #666666; font-style: italic;">//将管理员的邮箱地址添加到存放的数组中 </span>
         <span style="color: #000088;">$admin_emails</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$admin_account</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">user_id</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$admin_info</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">user_email</span><span style="color: #339933;">;</span>  
     <span style="color: #009900;">&#125;</span>     
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>既然获得了所有管理员的邮箱地址，那么剩下的工作就和方法一的多个管理员判断一样了，即：</p>

<div class="wp_codebox"><table><tr id="p54890"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code" id="p548code90"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php  
     <span style="color: #000088;">$admin_comment</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>     <span style="color: #666666; font-style: italic;">//设置一个布尔类型的变量来判断该留言是否为管理员的留言</span>
     <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$admin_emails</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$admin_email</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>  
         <span style="color: #666666; font-style: italic;">//如果该留言是管理员的留言 </span>
         <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$comment</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_author_email</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$admin_email</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>  
             <span style="color: #000088;">$admin_comment</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>  
             <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>  
         <span style="color: #009900;">&#125;</span>  
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>  
 <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>然后xhtml代码：</p>

<div class="wp_codebox"><table><tr id="p54891"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p548code91"><pre class="html" style="font-family:monospace;">&lt;li class=&quot;&lt;?php if($admin_comment) echo 'admincomment'; ?&gt;&quot;&gt;  
     &lt;!-- 这里输出其他的html信息 --&gt;  
&lt;/li&gt;</pre></td></tr></table></div>

<p>css代码：</p>

<div class="wp_codebox"><table><tr id="p54892"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p548code92"><pre class="css" style="font-family:monospace;">.admincomment<span style="color: #00AA00;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#191919</span><span style="color: #00AA00;">;</span> 
      <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#FFF</span><span style="color: #00AA00;">;</span> 
      <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<p>那么到此为止，高亮管理员留言的方法介绍完毕。希望可以给大家带去点帮助！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/highlight-the-administrators-reply-message/feed</wfw:commentRss>
		<slash:comments>29</slash:comments>
		</item>
		<item>
		<title>CSS:分享一些常用的css技巧</title>
		<link>http://www.ihiro.org/share-some-common-techniques-of-css</link>
		<comments>http://www.ihiro.org/share-some-common-techniques-of-css#comments</comments>
		<pubDate>Thu, 03 Sep 2009 15:05:04 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[技巧]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=538</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/common-used-css-skills.jpg" alt="common-used-css-skills" title="common-used-css-skills" width="100" height="100" class="alignleft size-full wp-image-542" />
<p>随着近几年来Web标准的流行，css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离，使得后期的版面维护与更新工作得以更加地便捷！</p>
<p>今天与大家分享一些在网站开发过程中常用到的一些css技巧，或许会给你的编写带来一些方便之处。已经知晓这些技巧的人完全可以忽略这篇文章。</p>
<p>这些css技巧或许很简单，但我的初衷是希望可以给初学者带去一些帮助。当然css技巧远远不止这些，以后会逐渐整理了发表出来与大家分享。</p>]]></description>
			<content:encoded><![CDATA[<p>随着近几年来Web标准的流行，css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离，使得后期的版面维护与更新工作得以更加地便捷！</p>
<p>今天与大家分享一些在网站开发过程中常用到的一些css技巧，或许会给你的css编写带来一些方便之处。已经知晓这些技巧的人完全可以忽略这篇文章。</p>
<h3>1. 使用!important:</h3>
<p>!important是用来将css属性的优先权提升到之高无上的地步，任何多余的装饰在!important的面前都无用无知地。使用方法：</p>

<div class="wp_codebox"><table><tr id="p53893"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p538code93"><pre class="css" style="font-family:monospace;">.<span style="color: #993333;">text</span> <span style="color: #00AA00;">&#123;</span> 
        <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">blue</span> !important<span style="color: #00AA00;">;</span>   //只需在css属性后加上!important即可，与属性间的空格可有可无
        <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #993333;">red</span><span style="color: #00AA00;">;</span>  //尽管该css属性是写在后面，但没有起到任何的作用
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<h3>2. 使用background设置图片来替换文本：</h3>
<p>每个网站都有一个logo，如果使用a标签直接包含logo图片，这样的做法对搜索引擎不太友好。此时，我们可以用a标签包含一段文字，通过css来的background属性来隐藏文字，同时设置a标签的背景图片为logo图片，这样可以更加友好地优化了网站。</p>

<div class="wp_codebox"><table><tr id="p53894"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p538code94"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.logo</span> a <span style="color: #00AA00;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
      <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">120px</span><span style="color: #00AA00;">;</span>  //此处的宽度和高度与logo图片的宽度和高度一致即可
      <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">80px</span><span style="color: #00AA00;">;</span>  
      <span style="color: #000000; font-weight: bold;">text-indent</span><span style="color: #00AA00;">:</span><span style="color: #933;">-9999px</span><span style="color: #00AA00;">;</span>  
      <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'logo.gif'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span>   
 <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<h3>3. 清除浮动：</h3>
<p>在网站的布局设置时，经常会出现通过浮动来布局网站内容的分布。但若该元素浮动后，它就脱离了它的父亲的管束，会导致它的父亲的高度为0。为了不是父亲的后面的兄弟们的布局出现问题,此时需要对父亲清除浮动.方法有二:<br />
<br />01. 在父亲的浮动儿子后面插入一个块级元素,如div,设置该div的css为clear,编写css:</p>

<div class="wp_codebox"><table><tr id="p53895"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p538code95"><pre class="css" style="font-family:monospace;">.<span style="color: #000000; font-weight: bold;">clear</span> <span style="color: #00AA00;">&#123;</span>
       <span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #993333;">both</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>02. 使用overflow和heigth组合的方式,设置父亲father的css为:</p>

<div class="wp_codebox"><table><tr id="p53896"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p538code96"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.father</span> <span style="color: #00AA00;">&#123;</span>
       <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>  //标准浏览器中生效
       <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span>%1<span style="color: #00AA00;">;</span>    //兼容IE6
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<h3>4. 文字垂直居中</h3>
<p> 若有一个h3包含的标题，你设置了它的高度为30px，就会发现它是居上边显示的，此时你只需结合line-heigth属性即可实现居中效果：</p>

<div class="wp_codebox"><table><tr id="p53897"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p538code97"><pre class="css" style="font-family:monospace;">h3 <span style="color: #00AA00;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">30px</span><span style="color: #00AA00;">;</span>
      <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">30px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<h3>5. 网站整体内容居中</h3>
<p>大家都知道有个属性text-align:center;可以是文本居中，该属性在ie6下也可以实现将网站的整体居中显示。但在标准浏览器中，该属性是不起作用的。在标准浏览器中却可以使用margin:0 auto;属性是网站的整体内容居中，但该属性在IE6中却不能识别，所以为了兼容多浏览器，可以组合使用：</p>

<div class="wp_codebox"><table><tr id="p53898"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p538code98"><pre class="css" style="font-family:monospace;">body <span style="color: #00AA00;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>    //在body标签中设置该属性给IE6认识只用
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#wrapper</span> <span style="color: #00AA00;">&#123;</span>
       <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>   //在标准浏览器中，先须将文章的内容居左显示
       <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>    //然后使用<span style="color: #000000; font-weight: bold;">margin</span>属性将网站整体内容居中
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<p>这些css技巧或许很简单，但我的初衷是希望可以给初学者带去一些帮助。当然css技巧远远不止这些，以后会逐渐整理了发表出来与大家分享。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/share-some-common-techniques-of-css/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>资讯:2009年9月编程语言排行榜</title>
		<link>http://www.ihiro.org/information-september-2009-programming-language-list</link>
		<comments>http://www.ihiro.org/information-september-2009-programming-language-list#comments</comments>
		<pubDate>Tue, 01 Sep 2009 03:48:31 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=524</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/2009.09.language-logo.jpg" alt="2009.09.language-logo" title="2009.09.language-logo" width="100" height="100" class="alignleft size-full wp-image-526" />
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站更新了最新09年9月份的编程语言排行榜。</p>
<p>就9月的排名变化，VB的变化最大，从第三名的位置跌到了第五，而我关注的PHP和JS都升了一位，分别排在了第四和第九的位置。这说明php使用的人是越来越多了，这些或许是开源的好处所带来的吧。而因现在网络用户对用户体验的高要求，js在各大网站中的代码行数也是大大地提高啊。</p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="extrenal">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>网站更新了最新09年9月份的编程语言排行榜。</p>
<p>就9月的排名变化，VB的变化最大，从第三名的位置跌到了第五，而我关注的PHP和JS都升了一位，分别排在了第四和第九的位置。这说明php使用的人是越来越多了，这些或许是开源的好处所带来的吧。而因现在网络用户对用户体验的高要求，js在各大网站中的代码行数也是大大地提高啊。</p>
<h3>2009年9月份编程语言前20名：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/2009.09.language-no.jpg" alt="2009年9月份编程语言前20名" title="2009年9月份编程语言前20名" width="566" height="567" class="size-full aligncenter wp-image-527" /></p>
<h3>2009年9月份编程语言前10名的走势图：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/09/2009.09.language-trends1.jpg" alt="2009年9月份编程语言前10名的走势图" title="2009年9月份编程语言前10名的走势图" width="635" height="478" class="aligncenter size-full wp-image-529" /></p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="extrenal">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/information-september-2009-programming-language-list/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Wordpress:4个常见的显示博客版权的方法</title>
		<link>http://www.ihiro.org/4-ways-to-display-the-copyrights-of-blog</link>
		<comments>http://www.ihiro.org/4-ways-to-display-the-copyrights-of-blog#comments</comments>
		<pubDate>Mon, 31 Aug 2009 10:06:03 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[技巧]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=519</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/copyright-dates.jpg" alt="copyright-dates" title="copyright-dates" width="100" height="100" class="alignleft wp-image-520" />
<p>在之前的我的一篇博文：<a href="http://www.iconspedia.com/">两个wp的小技巧，非常实用哦！</a>中曾经讲到过一种动态地显示版权年限信息的方法。而今天我是总结了多个方法与大家分享。</p>
<p>1. 傻瓜式输入；<br />
2. php的date函数输出；<br />
3. 显示一段年限的版权；<br />
4. 在functions.php中添加功能函数(自动侦查式)。
</p>
<p>这四种方式是逐渐增强的，大家可以根据自己的喜好选择一种方式来显示自己的版权年限。</p>]]></description>
			<content:encoded><![CDATA[<p>在之前的我的一篇博文：<a href="http://www.iconspedia.com/">两个wp的小技巧，非常实用哦！</a>中曾经讲到过一种动态地显示版权年限信息的方法。而今天我是总结了多个方法与大家分享。</p>
<h3>1. 傻瓜式输入：</h3>
<p>看这个方法的名字就知道了，该方法纯正就是手动地输入版权信息：</p>

<div class="wp_codebox"><table><tr id="p51999"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p519code99"><pre class="html" style="font-family:monospace;"> Copyright&amp;copy; 2009. &lt;a href=&quot;www.ihiro.org&quot;&gt;Hiro's Blog&lt;/a&gt;</pre></td></tr></table></div>

<p>这样手动输入的方法好处是加载处理的速度快，缺点是每年都要手动更新一次！<br />
输出格式：Copyright © 2009 Hiro&#8217;s Blog</p>
<h3>2. php的date函数输出：</h3>
<p>
<div class="wp_codebox"><table><tr id="p519100"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p519code100"><pre class="php" style="font-family:monospace;">Copyright <span style="color: #339933;">&amp;</span>copy<span style="color: #339933;">;</span> <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">echo</span> <span style="color: #990000;">date</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Y'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">.&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;&lt;?php echo get_option('home'); ?&gt;&quot;</span><span style="color: #339933;">&gt;&lt;</span> ?php bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>该方法的好处时，每年自动更新为当年的年份，无需人为地更改。<br />
输出格式：Copyright © 2009 Hiro&#8217;s Blog
</p>
<h3>3. 显示一段年限的版权：</h3>
<p>
博客建立的时间过了一年了，那么博客的版权年限就应该更新为如：2008-2009的格式了。该方法其实很简单，就是基于第二个方法实现的。因为建博的时间是死的，所以完全可以用纯的html输入,而当年的年限则用date()函数动态地输出：</p>

<div class="wp_codebox"><table><tr id="p519101"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p519code101"><pre class="php" style="font-family:monospace;">Copyright <span style="color: #339933;">&amp;</span>copy<span style="color: #339933;">;</span> <span style="color: #cc66cc;">2008</span><span style="color: #339933;">-&lt;</span> ?php <span style="color: #b1b100;">echo</span> <span style="color: #990000;">date</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Y'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">.&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;&lt;?php echo get_option('home'); ?&gt;&quot;</span><span style="color: #339933;">&gt;&lt;</span> ?php bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>
输出格式：Copyright © 2008-2009 Hiro&#8217;s Blog
</p>
<h3>4. 在functions.php中添加功能函数(自动侦查式)：</h3>
<p>只需打开主题中的functions.php文件，添加如下代码：</p>

<div class="wp_codebox"><table><tr id="p519102"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code" id="p519code102"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php 
<span style="color: #000000; font-weight: bold;">function</span> copyrightDate<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$copyright_dates</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get_results</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;
		SELECT 
			YEAR(min(post_date_gmt)) AS firstdate, 
			YEAR(max(post_date_gmt)) AS lastdate 
		FROM 
			<span style="color: #006699; font-weight: bold;">$wpdb-&gt;posts</span>
	&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$copyright_dates</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$copyright</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;Copyright &amp;copy; &quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$copyright_dates</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">firstdate</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$copyright_dates</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">firstdate</span> <span style="color: #339933;">!=</span> <span style="color: #000088;">$copyright_dates</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">lastdate</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000088;">$copyright</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'-'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$copyright_dates</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">lastdate</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$copyright</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;&amp;nbsp;&quot;</span> <span style="color: #339933;">.</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_footer'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'copyrightDate'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>该方法可以动态地检查你的建博时间，若你的建博时间不满一年，则输出格式和第二种方法一样，即：Copyright © 2009 Hiro&#8217;s Blog<br />
若你的博客建立了超过一年的时间，则输出的格式和第三种方法一样，即：Copyright © 2009-2010 Hiro&#8217;s Blog
</p>
<h3>总结</h3>
<p>这四种方式是逐渐增强的，大家可以根据自己的喜好选择一种方式来显示自己的版权年限。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/4-ways-to-display-the-copyrights-of-blog/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>jQuery:热点图片轮换展示效果</title>
		<link>http://www.ihiro.org/jquery-hot-pictures-showing-effects-of-rotation</link>
		<comments>http://www.ihiro.org/jquery-hot-pictures-showing-effects-of-rotation#comments</comments>
		<pubDate>Fri, 28 Aug 2009 08:02:54 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[cases]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=510</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/imgPlay.jpg" alt="imgPlay" title="imgPlay" width="100" height="100" class="alignleft size-full wp-image-512" />
<p>分享一个我做的图片轮换展示效果，主要实现原理：通过设置非第一个图片的position，通过overflow:hidden属性隐藏，再使用jQuery的animate效果函数作出链性轮换的效果。</p>
<p>轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件，喜欢修改的朋友可以自行修改！另压缩包中的源码没有添加注释，不懂的请阅读本文中的注释。</p>
<p>PS：jQuery库请根据源码的路径自行加入，压缩包中不提供下载。</p>]]></description>
			<content:encoded><![CDATA[<p>分享一个我做的图片轮换展示效果，主要实现原理：通过设置非第一个图片的position，通过overflow:hidden属性隐藏，再使用jQuery的animate效果函数作出链性轮换的效果。</p>
<p>轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件，喜欢修改的朋友可以自行修改！另压缩包中的源码没有添加注释，不懂的请阅读本文中的注释。</p>
<p>PS：jQuery库请根据源码的路径自行加入，压缩包中不提供下载。</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/imgPlay/imgPlay.rar" class="download" rel="external">download</a><a href="http://www.ihiro.org/cases/imgPlay/" class="demo" rel="external">demo</a></p>
<h3>1.Html代码：</h3>
<p>
<div class="wp_codebox"><table><tr id="p510103"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="code" id="p510code103"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;imgs&quot;&gt;
        &lt;div class=&quot;top&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;mid&quot;&gt;
            &lt;ul&gt;
                &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/1.jpg&quot; alt=&quot;1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/2.jpg&quot; alt=&quot;2&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/3.jpg&quot; alt=&quot;3&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/4.jpg&quot; alt=&quot;4&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div id=&quot;img_list&quot;&gt;
            	&lt;a href=&quot;#1&quot; class=&quot;active&quot;&gt;1&lt;/a&gt;
            	&lt;a href=&quot;#2&quot;&gt;2&lt;/a&gt;
            	&lt;a href=&quot;#3&quot;&gt;3&lt;/a&gt;
            	&lt;a href=&quot;#4&quot;&gt;4&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;btm&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;</pre></td></tr></table></div>

</p>
<h3>2.Css代码：</h3>
<p>
<div class="wp_codebox"><table><tr id="p510104"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="code" id="p510code104"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">100px</span> <span style="color: #933;">200px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
ul <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#eee</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#imgs</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
.<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.btm</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/sprite.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
.<span style="color: #000000; font-weight: bold;">top</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.btm</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">-5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">7px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.mid</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">486px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/bg_img.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">repeat-y</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span> <span style="color: #933;">7px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.mid</span> ul <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">486px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">186px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.mid</span> ul li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">486px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">186px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">490px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.mid</span> ul li<span style="color: #6666ff;">.first</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#img_list</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">486px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-top</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">1%</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#img_list</span> a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">14px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">14px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-indent</span><span style="color: #00AA00;">:</span><span style="color: #933;">-9999px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/sprite.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">-13px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#img_list</span> a<span style="color: #3333ff;">:hover</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#img_list</span> a<span style="color: #6666ff;">.active</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-14px</span> <span style="color: #933;">-13px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<h3>3.jQuery代码：</h3>
<p>
<div class="wp_codebox"><table><tr id="p510105"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
</pre></td><td class="code" id="p510code105"><pre class="js" style="font-family:monospace;">/* start ----- play img*/
var curr = 0, next = 0, count = 0;
$(document).ready(function() {
        // 记录图片的数量	
	count = $('#img_list a').size();	
&nbsp;
	t = setInterval('imgPlay()', 3000);
&nbsp;
        // 鼠标移动到图片或导航上停止播放，移开后恢复播放	
	$('#imgs li, #img_list a').hover(function() {
		clearInterval(t);
	}, function() {
		t = setInterval('imgPlay()', 3000);
	});
&nbsp;
	//点击导航播放到相应的图片		
	$('#img_list a').click(function() {
                // index()函数返回当前导航的下标
		var index = $('#img_list a').index(this);
		if(curr != index) {
			play(index);
			curr = index;
		};
			return false;
		});	
	});
&nbsp;
	// 播放图片的函数
	var imgPlay = function() {
		next = curr + 1;
                // 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
		if(curr == count-1) next=0;
		play(next);
&nbsp;
		curr++;
                // 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
		if(curr &gt; count-1) { curr=0; next = curr +1; }
	};
&nbsp;
	// 控制播放效果的函数
	var play = function(next) {
                // 当前的图片滑到左边-500px，完成后返回到右边490px
                // 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
		$('#imgs li').eq(curr).css({'opacity': '0.5'}).animate({'left': '-500px', 'opacity': '1'}, 'slow', function() {
				$(this).css({'left': '490px'});
			}).end()
			.eq(next).animate({'left': '0px', 'opacity': '1'}, 'slow', function() {
				$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
			});
};
/* endof ----- play img*/</pre></td></tr></table></div>
</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/jquery-hot-pictures-showing-effects-of-rotation/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>统计:我的站点统计个人分析</title>
		<link>http://www.ihiro.org/personal-statistics</link>
		<comments>http://www.ihiro.org/personal-statistics#comments</comments>
		<pubDate>Wed, 26 Aug 2009 14:17:00 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[统计收录]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=498</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/statistics统计.jpg" alt="statistics统计" title="statistics统计" width="100" height="100" class="alignleft size-full wp-image-503" />
<p>今日无事，便对我的站点的收录、搜索信息做了点统计与分析，从统计工具上截取了统计图。</p>
<p>搜索方面：近10日来我的博客每日的谷歌搜索量平均在16次左右。最高的一次达到了27次，而其他搜索引擎的搜索量低的可怕啊！收录方面：谷歌永远是搜录最多的，而百度永远是最少的。奇怪的是雅虎的反向链接居然是那么地高，搞不懂。</p>
<p>另外奇怪的是，Alexa的排名每日竟然是上万或十几万地提升，现在已经到了50几万了，相信时间不久就可以近10万之内了啊。Page Rank还没有更新过，希望下次Google更新PR时可以有所提升吧！</p>]]></description>
			<content:encoded><![CDATA[<p>今日无事，便对我的站点的收录、搜索信息做了点统计与分析，从统计工具上截取了统计图。</p>
<p><strong>搜索方面：</strong>近10日来我的博客每日的谷歌搜索量平均在16次左右。最高的一次达到了27次，而其他搜索引擎的搜索量低的可怕啊！如图（2009年08月17日&#8211;2009年08月26日）：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/09.08.17-09.08.26.search-engine.jpg" alt="09.08.17-09.08.26.search engine" title="09.08.17-09.08.26.search engine" width="387" height="289" class="aligncenter size-full wp-image-500" /><br />
而我上线2个多月来的总共的谷歌搜索也就382次，由此可见近10日的搜索量是大大地提高啊！如图（2009年06月19日&#8211;2009年08月26日）：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/09.06.19-09.08.26.search-engine.jpg" alt="09.06.19-09.08.26.search engine" title="09.06.19-09.08.26.search engine" width="355" height="295" class="aligncenter size-full wp-image-499" />
</p>
<p><strong>收录方面</strong>：谷歌永远是搜录最多的，而百度永远是最少的。奇怪的是雅虎的反向链接居然是那么地高，搞不懂。见图：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/收录-排名.jpg" alt="收录-排名" title="收录-排名" width="600" height="97" class="aligncenter size-full wp-image-501" /><br />
另外奇怪的是，Alexa的排名每日竟然是上万或十几万地提升，现在已经到了50几万了，相信时间不久就可以近10万之内了啊。</p>
<p>Page Rank还没有更新过，希望下次Google更新PR时可以有所提升吧！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/personal-statistics/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Adwords:谷歌Adwords也做促销？（$100）</title>
		<link>http://www.ihiro.org/100-dollars-of-adwords</link>
		<comments>http://www.ihiro.org/100-dollars-of-adwords#comments</comments>
		<pubDate>Mon, 24 Aug 2009 06:20:20 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[adwords]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=487</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/adwords.jpg" alt="adwords" title="adwords" width="100" height="100" class="alignleft wp-image-491" />
<p>几个月我激活了谷歌的网站管理员工具应用，主要是用来查看我的博客被搜索的关键字比例、次数的。近段时间也没怎么上去看。今日登陆后发现了一则谷歌The Webmaster Tools Team的留言，题为“Try Google AdWords with USD$100 in free advertising”。刚看到时我还开心了一小下子，在郁闷谷歌也给我送钱做广告了？</p>
<p>于是乎，按照他的留言说明激活了Adwords的账户，设置促销码信息时，才发现这原来是一则谷歌的Adwords的促销留言。你若想用到这100美元的话，需要先缴纳50人民币的账户启动费。只有50元缴纳后，才能给你做广告呢。我想了想我的网站只是一个个人博客，无需做那些google的广告，也就没有去支付那50元的费用。</p>]]></description>
			<content:encoded><![CDATA[<p>几个月我激活了谷歌的网站管理员工具应用，主要是用来查看我的博客被搜索的关键字比例、次数的。近段时间也没怎么上去看。今日登陆后发现了一则谷歌The Webmaster Tools Team的留言，题为“Try Google AdWords with USD$100 in free advertising”。刚看到时我还开心了一小下子，在郁闷谷歌也给我送钱做广告了？</p>
<p>于是乎，按照他的留言说明激活了Adwords的账户，设置促销码信息时，才发现这原来是一则谷歌的Adwords的促销留言。你若想用到这100美元的话，需要先缴纳50人民币的账户启动费。只有50元缴纳后，才能给你做广告呢。我想了想我的网站只是一个个人博客，无需做那些google的广告，也就没有去支付那50元的费用。</p>
<p>呵呵，就是觉得挺好玩的，就发几张图给大家瞧瞧，不知道用网站管理员工具的朋友有收到这样的留言不？</p>
<h3>1.留言原稿截图：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/1.jpg" alt="1" title="1" width="604" height="638" class="aligncenter size-full wp-image-488" /></p>
<h3>2.后台要求缴纳50元钱的截图：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/2.jpg" alt="2" title="2" width="601" height="98" class="aligncenter size-full wp-image-489" /><br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/3.jpg" alt="3" title="3" width="497" height="23" class="aligncenter size-full wp-image-490" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/100-dollars-of-adwords/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>jQuery:Scrolltop滑动插件推荐（修正注释版）</title>
		<link>http://www.ihiro.org/jquery-scrolltop-plugins</link>
		<comments>http://www.ihiro.org/jquery-scrolltop-plugins#comments</comments>
		<pubDate>Fri, 21 Aug 2009 08:51:40 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=470</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/scolltotop.jpg" alt="scolltotop" title="scolltotop" width="100" height="100" class="alignleft size-full wp-image-480" />
<p>前段时间<a href="http://cxt5.cn/" rel="external">DeepBlue</a>发邮件问我，博客中的滑动到顶端的效果是如何实现的。我当时忙着做事，就简单地回复他说是用javascript实现的，但没有告诉他具体实现的办法。</p>
<p>今天在使用Google Reader时，在一篇文章里发现了这个插件，很小巧，代码也很易懂。于是乎，添加了中文注释与大家分享一下。</p>
<p>更多英文资料请阅读:<a href="http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm" rel="external">http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm</a></p>]]></description>
			<content:encoded><![CDATA[<p>前段时间<a href="http://cxt5.cn/" rel="external">DeepBlue</a>发邮件问我，博客中的滑动到顶端的效果是如何实现的。我当时忙着做事，就简单地回复他说是用javascript实现的，但没有告诉他具体实现的办法。</p>
<p>今天在使用Google Reader时，在一篇文章里发现了这个插件，很小巧，代码也很易懂。于是乎，添加了中文注释与大家分享一下。（我修复了它的一个bug）先看看效果吧：(下载包里含有插件和一个简单的效果，请自行添加jQuery库)</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/scrolltotop/scrolltotop.rar" class="download">download</a><a href="http://www.ihiro.org/cases/scrolltotop/"  rel="external" class="demo">demo</a></p>
<h3>1.html\css代码：</h3>
<p>
<div class="wp_codebox"><table><tr id="p470106"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code" id="p470code106"><pre class="html" style="font-family:monospace;">&lt; !DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;scroll-to-top&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../js/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;scrolltopcontrol.js&quot;&gt;&lt;/script&gt;
	&lt;style type=&quot;text/css&quot;&gt;
	* { margin:0; padding:0;}
	body { font:16px;}
&nbsp;
	#wrapper { width:300px; font-size:40px; margin:0 auto; height:1500px;}
&nbsp;
	#topcontrol { padding:10px 20px; background:#F90;}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;wrapper&quot;&gt;top content&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></td></tr></table></div>

<p>说明：1.先将js文件引入；<br />
2.我使用一个#wrapper的div将页面撑高；<br />
3.我将通过插件插入的#topcontrol这个div进行简单的css修饰，更加清楚地发现它的位置。</p>
<h3>2.插件javascript代码（含中文注释）：</h3>
<p>
<div class="wp_codebox"><table><tr id="p470107"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
</pre></td><td class="code" id="p470code107"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> scrolltotop<span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//startline: 鼠标向下滚动了100px后出现#topcontrol</span>
	<span style="color: #006600; font-style: italic;">//scrollto: 它的值可以是整数，也可以是一个id标记。若为整数（假设为n），则滑动到距离top的n像素处；若为id标记，则滑动到该id标记所在的同等高处</span>
	<span style="color: #006600; font-style: italic;">//scrollduration:滑动的速度</span>
	<span style="color: #006600; font-style: italic;">//fadeduration:#topcontrol这个div的淡入淡出速度，第一个参数为淡入速度，第二个参数为淡出速度</span>
	<span style="color: #006600; font-style: italic;">//controlHTML:控制向上滑动的html源码，默认为&lt;img src=&quot;up.png&quot; style=&quot;width:48px; height:48px&quot; /&gt;，可以自行更改。该处的html代码会被包含在一个id标记为#topcontrol的div中。</span>
	<span style="color: #006600; font-style: italic;">//controlattrs:控制#topcontrol这个div距离右下角的像素距离</span>
	<span style="color: #006600; font-style: italic;">//anchorkeyword:滑动到的id标签</span>
	<span style="color: #006600; font-style: italic;">/*state: isvisible:是否#topcontrol这个div为可见
			shouldvisible:是否#topcontrol这个div该出现
	*/</span>
&nbsp;
	setting<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>startline<span style="color: #339933;">:</span><span style="color: #CC0000;">100</span><span style="color: #339933;">,</span> scrollto<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> scrollduration<span style="color: #339933;">:</span><span style="color: #CC0000;">500</span><span style="color: #339933;">,</span> fadeduration<span style="color: #339933;">:</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">500</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">100</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	controlHTML<span style="color: #339933;">:</span> <span style="color: #3366CC;">'&lt;a href=&quot;#top&quot;&gt;back-to-top&lt;/a&gt;'</span><span style="color: #339933;">,</span>
	controlattrs<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>offsetx<span style="color: #339933;">:</span><span style="color: #CC0000;">5</span><span style="color: #339933;">,</span> offsety<span style="color: #339933;">:</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> 
	anchorkeyword<span style="color: #339933;">:</span> <span style="color: #3366CC;">'#top'</span><span style="color: #339933;">,</span> 
&nbsp;
	state<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>isvisible<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> shouldvisible<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	scrollup<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">cssfixedsupport</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.$control.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>opacity<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span> 
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//点击后隐藏#topcontrol这个div</span>
		<span style="color: #003366; font-weight: bold;">var</span> dest<span style="color: #339933;">=</span>isNaN<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setting</span>.<span style="color: #660066;">scrollto</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">?</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setting</span>.<span style="color: #660066;">scrollto</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setting</span>.<span style="color: #660066;">scrollto</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> dest<span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;string&quot;</span> <span style="color: #339933;">&amp;&amp;</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>dest<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">==</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">//检查若scrollto的值是一个id标记的话</span>
			dest<span style="color: #339933;">=</span>jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>dest<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">//检查若scrollto的值是一个整数</span>
			dest<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setting</span>.<span style="color: #660066;">scrollto</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.$body.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>scrollTop<span style="color: #339933;">:</span> dest<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setting</span>.<span style="color: #660066;">scrollduration</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	keepfixed<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//获得浏览器的窗口对象</span>
		<span style="color: #003366; font-weight: bold;">var</span> $window<span style="color: #339933;">=</span>jQuery<span style="color: #009900;">&#40;</span>window<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//获得#topcontrol这个div的x轴坐标</span>
		<span style="color: #003366; font-weight: bold;">var</span> controlx<span style="color: #339933;">=</span>$window.<span style="color: #660066;">scrollLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> $window.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #000066; font-weight: bold;">this</span>.$control.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">controlattrs</span>.<span style="color: #660066;">offsetx</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//获得#topcontrol这个div的y轴坐标</span>
		<span style="color: #003366; font-weight: bold;">var</span> controly<span style="color: #339933;">=</span>$window.<span style="color: #660066;">scrollTop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> $window.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #000066; font-weight: bold;">this</span>.$control.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">controlattrs</span>.<span style="color: #660066;">offsety</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//随着滑动块的滑动#topcontrol这个div跟随着滑动</span>
		<span style="color: #000066; font-weight: bold;">this</span>.$control.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>left<span style="color: #339933;">:</span>controlx<span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span><span style="color: #339933;">,</span> top<span style="color: #339933;">:</span>controly<span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	togglecontrol<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//当前窗口的滑动块的高度</span>
		<span style="color: #003366; font-weight: bold;">var</span> scrolltop<span style="color: #339933;">=</span>jQuery<span style="color: #009900;">&#40;</span>window<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">scrollTop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">cssfixedsupport</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">keepfixed</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//若设置了startline这个参数，则shouldvisible为true</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span>.<span style="color: #660066;">shouldvisible</span><span style="color: #339933;">=</span><span style="color: #009900;">&#40;</span>scrolltop<span style="color: #339933;">&gt;=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setting</span>.<span style="color: #660066;">startline</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">?</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//若shouldvisible为true，且!isvisible为true</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span>.<span style="color: #660066;">shouldvisible</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span>.<span style="color: #660066;">isvisible</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.$control.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>opacity<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setting</span>.<span style="color: #660066;">fadeduration</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span>.<span style="color: #660066;">isvisible</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #006600; font-style: italic;">//若shouldvisible为false，且isvisible为false</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span>.<span style="color: #660066;">shouldvisible</span><span style="color: #339933;">==</span><span style="color: #003366; font-weight: bold;">false</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span>.<span style="color: #660066;">isvisible</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.$control.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>opacity<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setting</span>.<span style="color: #660066;">fadeduration</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span>.<span style="color: #660066;">isvisible</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	init<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		jQuery<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> mainobj<span style="color: #339933;">=</span>scrolltotop<span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> iebrws<span style="color: #339933;">=</span>document.<span style="color: #660066;">all</span><span style="color: #339933;">;</span>
			mainobj.<span style="color: #660066;">cssfixedsupport</span><span style="color: #339933;">=!</span>iebrws <span style="color: #339933;">||</span> iebrws <span style="color: #339933;">&amp;&amp;</span> document.<span style="color: #660066;">compatMode</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;CSS1Compat&quot;</span> <span style="color: #339933;">&amp;&amp;</span> window.<span style="color: #660066;">XMLHttpRequest</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//not IE or IE7+ browsers in standards mode</span>
			mainobj.$body<span style="color: #339933;">=</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">opera</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">?</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">compatMode</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;CSS1Compat&quot;</span><span style="color: #339933;">?</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html,body'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">//包含#topcontrol这个div</span>
			mainobj.$control<span style="color: #339933;">=</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div id=&quot;topcontrol&quot;&gt;'</span><span style="color: #339933;">+</span>mainobj.<span style="color: #660066;">controlHTML</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span>
				.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>position<span style="color: #339933;">:</span>mainobj.<span style="color: #660066;">cssfixedsupport</span><span style="color: #339933;">?</span> <span style="color: #3366CC;">'fixed'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'absolute'</span><span style="color: #339933;">,</span> bottom<span style="color: #339933;">:</span>mainobj.<span style="color: #660066;">controlattrs</span>.<span style="color: #660066;">offsety</span><span style="color: #339933;">,</span> right<span style="color: #339933;">:</span>mainobj.<span style="color: #660066;">controlattrs</span>.<span style="color: #660066;">offsetx</span><span style="color: #339933;">,</span> opacity<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> cursor<span style="color: #339933;">:</span><span style="color: #3366CC;">'pointer'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
				.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>title<span style="color: #339933;">:</span><span style="color: #3366CC;">'Scroll Back to Top'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
				.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>mainobj.<span style="color: #660066;">scrollup</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
				.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">all</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span>window.<span style="color: #660066;">XMLHttpRequest</span> <span style="color: #339933;">&amp;&amp;</span> mainobj.$control.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">!=</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">//loose check for IE6 and below, plus whether control contains any text</span>
				mainobj.$control.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span>mainobj.$control.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//IE6- seems to require an explicit width on a DIV containing text</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
			mainobj.<span style="color: #660066;">togglecontrol</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">//点击控制</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a[href=&quot;'</span> <span style="color: #339933;">+</span> mainobj.<span style="color: #660066;">anchorkeyword</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot;]'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				mainobj.<span style="color: #660066;">scrollup</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			$<span style="color: #009900;">&#40;</span>window<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'scroll resize'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				mainobj.<span style="color: #660066;">togglecontrol</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
scrolltotop.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>说明：1.修复代码28行的”dest=this.setting.scrollto“;，源代码为“dest=0”；<br />
2.无须在原html代码中添加#top的标记，js会自动插入；<br />
3.可以修改顶端代码的一些参数来控制滑动速度和其他的一些效果。
</p>
<p>更多英文资料请阅读:<a href="http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm" rel="external">http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm</a></p>
<p>原始的插件代码下载地址(右键另存即可)：<a href="http://www.dynamicdrive.com/dynamicindex3/scrolltopcontrol.js">scrolltopcontrol.js</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/jquery-scrolltop-plugins/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>PHP:数组排序函数大总结</title>
		<link>http://www.ihiro.org/array-sort-function</link>
		<comments>http://www.ihiro.org/array-sort-function#comments</comments>
		<pubDate>Thu, 20 Aug 2009 10:06:16 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[后台编程]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=461</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/array.jpg" alt="array" title="array" width="100" height="100" class="alignleft wp-image-462" />
<p>上周去得到一个面试题，题目是这样的：PHP中sort()、asort()、ksort()函数之前的区别是什么，在什么情况下改用哪个函数？我当时的答案就不在这公布了，呵呵，总之不对的。</p>
<p>回来后一直在揪心啊，于是翻了一下书本查阅，给我知道了答案。为了记住它们，我决定来一个数组排序函数大总结。</p>
<p>数组排序函数大全：sort()、rsort()、asort()、arsort()、ksort()、krsort()、reverse_array()、shuffle()、usort()等</p>]]></description>
			<content:encoded><![CDATA[<p>上周去得到一个面试题，题目是这样的：PHP中sort()、asort()、ksort()函数之前的区别是什么，在什么情况下改用哪个函数？我当时的答案就不在这公布了，呵呵，总之不对的。</p>
<p>回来后一直在揪心啊，于是翻了一下书本查阅，给我知道了答案。为了记住它们，我决定来一个数组排序函数大总结。</p>
<h3>一、一维数组</h3>
<p>假设有一个一维数组，如下：</p>

<div class="wp_codebox"><table><tr id="p461108"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code108"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$sortArr</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;name&quot;</span><span style="color: #339933;">=&gt;</span><span style="color: #0000ff;">&quot;hiro&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;age&quot;</span><span style="color: #339933;">=&gt;</span><span style="color: #0000ff;">&quot;23&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;city&quot;</span><span style="color: #339933;">=&gt;</span><span style="color: #0000ff;">&quot;Shanghai&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;code&quot;</span><span style="color: #339933;">=&gt;</span><span style="color: #0000ff;">&quot;200051&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>print_r()输出的原始数组结果为：</p>

<div class="wp_codebox"><table><tr id="p461109"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code109"><pre class="html" style="font-family:monospace;">Array ( [name] =&gt; hiro [age] =&gt; 23 [city] =&gt; Shanghai [code] =&gt; 200051 )</pre></td></tr></table></div>

</p>
<p>1.<strong>sort()函数:</strong>根据数组下标进行升序排列；<br />
print_r()输出的数组结果为(输出时只有数组下标，而不是键名)：</p>

<div class="wp_codebox"><table><tr id="p461110"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code110"><pre class="html" style="font-family:monospace;">Array ( [0] =&gt; 23 [1] =&gt; 200051 [2] =&gt; Shanghai [3] =&gt; hiro )</pre></td></tr></table></div>

</p>
<p>2.<strong>rsort()函数:</strong>与sort()函数相反，根据数组下标进行降序排列；<br />
print_r()输出的数组结果为(输出时只有数组下标，而不是键名)：</p>

<div class="wp_codebox"><table><tr id="p461111"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code111"><pre class="html" style="font-family:monospace;">Array ( [0] =&gt; hiro [1] =&gt; Shanghai [2] =&gt; 200051 [3] =&gt; 23 )</pre></td></tr></table></div>

</p>
<p>3.<strong>asort()函数:</strong>根据数组的键名进行升序排列；<br />
print_r()输出的数组结果为：</p>

<div class="wp_codebox"><table><tr id="p461112"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code112"><pre class="html" style="font-family:monospace;">Array ( [age] =&gt; 23 [code] =&gt; 200051 [city] =&gt; Shanghai [name] =&gt; hiro )</pre></td></tr></table></div>

</p>
<p>4.<strong>arsort()函数:</strong>与asort()函数相反，根据数组的键名进行降序排列；<br />
print_r()输出的数组结果为：</p>

<div class="wp_codebox"><table><tr id="p461113"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code113"><pre class="html" style="font-family:monospace;">Array ( [name] =&gt; hiro [city] =&gt; Shanghai [code] =&gt; 200051 [age] =&gt; 23 )</pre></td></tr></table></div>

</p>
<p>5.<strong>ksort()函数:</strong>根据数组的键值进行升序排列；<br />
print_r()输出的数组结果为：</p>

<div class="wp_codebox"><table><tr id="p461114"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code114"><pre class="html" style="font-family:monospace;">Array ( [age] =&gt; 23 [city] =&gt; Shanghai [code] =&gt; 200051 [name] =&gt; hiro )</pre></td></tr></table></div>

</p>
<p>6.<strong>krsort()函数:</strong>与ksort()函数相反，根据数组的键值进行降序排列；<br />
print_r()输出的数组结果为：</p>

<div class="wp_codebox"><table><tr id="p461115"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code115"><pre class="html" style="font-family:monospace;">Array ( [name] =&gt; hiro [city] =&gt; Shanghai [code] =&gt; 200051 [age] =&gt; 23 )</pre></td></tr></table></div>

</p>
<p>7.<strong>reverse_array()函数:</strong>反向当前的数组排列顺序；<br />
print_r()输出的数组结果为：</p>

<div class="wp_codebox"><table><tr id="p461116"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code116"><pre class="html" style="font-family:monospace;">Array ( [name] =&gt; hiro [age] =&gt; 23 [city] =&gt; Shanghai [code] =&gt; 200051 )</pre></td></tr></table></div>

</p>
<p>8.<strong>shuffle()函数:</strong>随机地排列数组顺序（每次刷新后排列的顺序都不相同）；<br />
print_r()输出的数组结果为(只是其中一种随机排列)：</p>

<div class="wp_codebox"><table><tr id="p461117"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code117"><pre class="html" style="font-family:monospace;">Array ( [0] =&gt; 23 [1] =&gt; 200051 [2] =&gt; Shanghai [3] =&gt; hiro )</pre></td></tr></table></div>

</p>
<h3>二、二维数组</h3>
<p>假设有一个二维数组，如下：</p>

<div class="wp_codebox"><table><tr id="p461118"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p461code118"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$person</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
	<span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;hiro&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;23&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;suzhou&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;yoyo&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;25&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;shanghai&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;janstar&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;28&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;xinjiang&quot;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>print_r()输出的原始数组结果为：</p>

<div class="wp_codebox"><table><tr id="p461119"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code119"><pre class="html" style="font-family:monospace;">Array ( [0] =&gt; Array ( [0] =&gt; hiro [1] =&gt; 23 [2] =&gt; suzhou ) [1] =&gt; Array ( [0] =&gt; yoyo [1] =&gt; 25 [2] =&gt; shanghai ) [2] =&gt; Array ( [0] =&gt; janstar [1] =&gt; 28 [2] =&gt; xinjiang ) )</pre></td></tr></table></div>

</p>
<p>二维数组的排序是根据每维的键名排序的，所以需要额外地编写比较函数。先举三个例子：</p>
<p>1.按每维的第一个元素升序排列，代码如下:</p>

<div class="wp_codebox"><table><tr id="p461120"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code" id="p461code120"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> compare0<span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #339933;">,</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$t</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&lt;</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #990000;">usort</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$person</span><span style="color: #339933;">,</span> compare0<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;按第一个元素正向排序：&quot;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">print_r</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$person</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>输出的结果如下：
</pre>

<div class="wp_codebox"><table><tr id="p461121"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code121"><pre class="html" style="font-family:monospace;">按第一个元素正向排序：Array ( [0] =&gt; Array ( [0] =&gt; hiro [1] =&gt; 23 [2] =&gt; suzhou ) [1] =&gt; Array ( [0] =&gt; janstar [1] =&gt; 28 [2] =&gt; xinjiang ) [2] =&gt; Array ( [0] =&gt; yoyo [1] =&gt; 25 [2] =&gt; shanghai ) )</pre></td></tr></table></div>

</p>
<p>2.按每维的第三个元素升序排列，代码如下:</p>

<div class="wp_codebox"><table><tr id="p461122"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code" id="p461code122"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> compare2<span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #339933;">,</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$t</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&lt;</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #990000;">usort</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$person</span><span style="color: #339933;">,</span> compare2<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;按第三个元素正向排序：&quot;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">print_r</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$person</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>输出的结果如下：
</pre>

<div class="wp_codebox"><table><tr id="p461123"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code123"><pre class="html" style="font-family:monospace;">按第三个元素正向排序：Array ( [0] =&gt; Array ( [0] =&gt; yoyo [1] =&gt; 25 [2] =&gt; shanghai ) [1] =&gt; Array ( [0] =&gt; hiro [1] =&gt; 23 [2] =&gt; suzhou ) [2] =&gt; Array ( [0] =&gt; janstar [1] =&gt; 28 [2] =&gt; xinjiang ) )</pre></td></tr></table></div>

</p>
<p>3.按每维的第三个元素升序排列，代码如下:</p>

<div class="wp_codebox"><table><tr id="p461124"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code" id="p461code124"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> reverse_compare2<span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #339933;">,</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$t</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&lt;</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>	<span style="color: #666666; font-style: italic;">//改变后即可反向</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>	<span style="color: #666666; font-style: italic;">//改变后即可反向</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #990000;">usort</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$person</span><span style="color: #339933;">,</span> reverse_compare2<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;按第三个元素反向排序：&quot;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">print_r</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$person</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>输出的结果如下：
</pre>

<div class="wp_codebox"><table><tr id="p461125"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p461code125"><pre class="html" style="font-family:monospace;">按第三个元素反向排序：Array ( [0] =&gt; Array ( [0] =&gt; janstar [1] =&gt; 28 [2] =&gt; xinjiang ) [1] =&gt; Array ( [0] =&gt; hiro [1] =&gt; 23 [2] =&gt; suzhou ) [2] =&gt; Array ( [0] =&gt; yoyo [1] =&gt; 25 [2] =&gt; shanghai ) )</pre></td></tr></table></div>

</p>
<p>呵呵，是不是代码多了点，记下了以后方便查阅啊！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/array-sort-function/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>软件:用上了Zend Studio 7.0，分享序列号</title>
		<link>http://www.ihiro.org/zend-studio-7</link>
		<comments>http://www.ihiro.org/zend-studio-7#comments</comments>
		<pubDate>Tue, 18 Aug 2009 02:51:42 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[软件下载]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[zend]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=455</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/zend-studio.logo.jpg" alt="zend-studio.logo" title="zend-studio.logo" width="100" height="100" class="alignleft wp-image-457" />
<p>前段时间zend网站老是给我发送zend studio 7的推荐下载的邮件（因为我注册过zend官网的原因吧），一直没有理会。前两天无事，便去下载了最新版的zend studio 7。下载时已经是正式版了，文件不大，300多兆。在公司的机器上安装的有点慢，晚上回家安装在自己的笔记本上速度就快多了。毕竟配置不能同日而语啊！</p>
<p>在这之前我一直没用过zend的产品，最多的有一次安装过一会zend studio for eclipse，但发现这个名字太长了，不喜欢就没再用了。然后我就一直用DW和UltraEdit，但是这两个对php的支持确实不咋的，所以最近使用起来也不是很方便。便想着用用这个新版本的zend studio吧，它毕竟是基于eclipse平台开发的，eclipse用起来还是很熟悉的（而且名字也不长）。</p>]]></description>
			<content:encoded><![CDATA[<p>前段时间zend网站老是给我发送zend studio 7的推荐下载的邮件（因为我注册过zend官网的原因吧），一直没有理会。前两天无事，便去下载了最新版的zend studio 7。下载时已经是正式版了，文件不大，300多兆。在公司的机器上安装的有点慢，晚上回家安装在自己的笔记本上速度就快多了。毕竟配置不能同日而语啊！</p>
<p>在这之前我一直没用过zend的产品，最多的有一次安装过一会zend studio for eclipse，但发现这个名字太长了，不喜欢就没再用了。然后我就一直用DW和UltraEdit，但是这两个对php的支持确实不咋的，所以最近使用起来也不是很方便。便想着用用这个新版本的zend studio吧，它毕竟是基于eclipse平台开发的，eclipse用起来还是很熟悉的（而且名字也不长）。</p>
<h3>Zend Studio 7官方宣传画：</h3>
<p>
<img src="http://static.zend.com/topics/studio7-release-product-main.jpg" class="aligncenter" alt="zend studio" /><br />
官方地址：<a href="http://www.zend.com/en/products/studio/" rel="external">http://www.zend.com/en/products/studio/</a>
</p>
<h3>新功能特性：</h3>
<p>1.Zend Studio 7.0 基于Eclipse 的最新版本构建(Galileo);</p>
<p>2.支持php5.3版本;</p>
<p>3.集成zend server调试服务器;</p>
<p>4.zend framework快速应用开发;</p>
<p>5.更强的源码编辑,更好的性能提升。</p>
<h3>下载地址：</h3>
<p>官方下载页面（下载需注册会员）：<a href="http://www.zend.com/en/products/studio/downloads" rel="external">http://www.zend.com/en/products/studio/downloads</a></p>
<p>VeryCD网站分享下载：<a href="http://www.verycd.com/topics/2760274/" rel="external">http://www.verycd.com/topics/2760274/</a></p>
<h3>序列号共享（貌似此序列号可以无限人使用）：</h3>
<p>
Username: zendstudio.net<br />
Serial Number: 3727234F6095F72034F6095F<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/zend-studio-7-sn.jpg" alt="zend-studio-7-sn" title="zend-studio-7-sn" width="412" height="207" class="aligncenter size-full wp-image-456" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/zend-studio-7/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>jQuery:暴强，两款jQuery的打字游戏推荐</title>
		<link>http://www.ihiro.org/two-jquery-typing-games-recommended</link>
		<comments>http://www.ihiro.org/two-jquery-typing-games-recommended#comments</comments>
		<pubDate>Mon, 17 Aug 2009 02:45:28 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[游戏]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=440</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/jQuery-game.jpg" alt="jQuery-game" title="jQuery-game" width="100" height="100" class="alignleft wp-image-441" />
<p>今日在网上发现两款比较好玩的打字游戏，是运用jQuery库编写的，游戏非常美观，适合打字练习或者休闲一下子。</p>
<p><strong>1. jtypinghero：</strong>你可以修改js文件夹下的script.js文件的一些参数来设置游戏，如DROPPINGSPEED设置下落的速度，NEWORBTIME设置距离下个字母出现的时间等。</p>
<p><strong>2. jcharacterfall：</strong>jcharacterfall是一个小巧的打字游戏，它的字母是随着水滴下落的，下落速度会逐渐地加快。</p>]]></description>
			<content:encoded><![CDATA[<p>今日在网上发现两款比较好玩的打字游戏，是运用jQuery库编写的，游戏非常美观，适合打字练习或者休闲一下子。</p>
<h3>1. jtypinghero</h3>
<p><img src="http://www.ihiro.org/downloads/jtypinghero/jtypinghero.jpg" alt="jtypinghero" class="aligncenter" /><br />
你可以修改js文件夹下的script.js文件的一些参数来设置游戏，如DROPPINGSPEED设置下落的速度，NEWORBTIME设置距离下个字母出现的时间等。</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/downloads/jtypinghero/jtypinghero.zip" title="downloadjtypinghero" class="download">download</a><a href="http://www.ihiro.org/downloads/jtypinghero/" title="play jtypinghero" class="demo">play</a></p>
<h3>2. jcharacterfall</h3>
<p>
<img src="http://www.ihiro.org/downloads/jcharacterfall/jcharacterfall.jpg" alt="jcharacterfall" class="aligncenter" /><br />
jcharacterfall是一个小巧的打字游戏，它的字母是随着水滴下落的，下落速度会逐渐地加快。</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/downloads/jcharacterfall/jcharacterfall.zip" title="download jcharacterfall" class="download">download</a><a href="http://www.ihiro.org/downloads/jcharacterfall/" title="play jcharacterfall" class="demo">play</a></p>
<p>希望玩的开心！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/two-jquery-typing-games-recommended/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Wordpress:最新2.84更新的原因：密码重置漏洞（图文教程解决）</title>
		<link>http://www.ihiro.org/the-reason-of-update-password-reset-loophole</link>
		<comments>http://www.ihiro.org/the-reason-of-update-password-reset-loophole#comments</comments>
		<pubDate>Thu, 13 Aug 2009 02:49:37 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[hack]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=415</guid>
		<description><![CDATA[<img src="http://www.wprecipes.com/wp-content/uploads/2009/08/security.jpg" alt="security" width="100" height="100" class="alignleft" />
<p>昨天登录后台发现wordpress2.84版本提示更新，这距离2.83版本的发布才几天而已的时间。是什么原因导致wp更新如此迅速了。到国外的网站和wp官方搜索了资料一看，原来是密码重置的漏洞。如果你的wp版本是2.83或低于2.83的，你就要注意了。千万别得罪人啊，特别是玩wp的人，小心他把你的邮箱给发爆了（开个玩笑，呵呵！）。</p>
<p><strong>解决的办法：</strong>1. 立即升级到2.84版本；2.修改wp-login.php文件，将190行的代码：if ( empty( $key ) ) 修改为： if ( empty( $key ) &#124;&#124; is_array( $key ) )。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.wprecipes.com/wp-content/uploads/2009/08/security.jpg" alt="security" width="150" height="150" class="alignright" /></p>
<p>昨天登录后台发现wordpress2.84版本提示更新，这距离2.83版本的发布才几天而已的时间。是什么原因导致wp更新如此迅速了。到国外的网站和wp官方搜索了资料一看，原来是密码重置的漏洞。如果你的wp版本是2.83或低于2.83的，你就要注意了。千万别得罪人啊，特别是玩wp的人，小心他把你的邮箱给发爆了（开个玩笑，呵呵！）。</p>
<p>那么，这个漏洞的所在是？你不妨自己小测一下。（以下所有图片都是我个人测试所截的图，仅供大家参考，我的密码已经更改，漏洞也已经修复，请勿试图攻击我哦！）。</p>
<h3>1.测试漏洞步骤：</h3>
<p>访问：http://你的域名/wp-login.php?action=rp&#038;key[]=（通过该链接可以直接跳过邮件论证而将博客的管理员密码重置），系统提示如图：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/5.jpg" alt="confirm-password" title="5" width="331" height="130" class="size-full aligncenter wp-image-422" /><br />
此时你可以看到你的邮箱中有新邮件了，内容如下：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/6.jpg" alt="new-password" title="6" width="247" height="79" class="size-full aligncenter wp-image-423" /><br />
至此，你的密码重置成功。<strong>恭喜你，你发现wordpress的漏洞了！！</strong></p>
<h3>2.漏洞源代码所在:</h3>
<p>打开wp-login.php文件（wordpress的更目录）,找到185行代码：如下：</p>

<div class="wp_codebox"><table><tr id="p415126"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code" id="p415code126"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> reset_password<span style="color: #009900;">&#40;</span><span style="color: #000088;">$key</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$key</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'/[^a-z0-9]/i'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #000088;">$key</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$key</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">new</span> WP_Error<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'invalid_key'</span><span style="color: #339933;">,</span> __<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Invalid key'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$user</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get_row</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$wpdb</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">prepare</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;SELECT * FROM <span style="color: #006699; font-weight: bold;">$wpdb-&gt;users</span> WHERE user_activation_key = <span style="color: #009933; font-weight: bold;">%s</span>&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$key</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$user</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">new</span> WP_Error<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'invalid_key'</span><span style="color: #339933;">,</span> __<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Invalid key'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//后面的代码过长，在此省略.......</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>然后在转到275行：如下</p>

<div class="wp_codebox"><table><tr id="p415127"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code" id="p415code127"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$action</span> <span style="color: #339933;">=</span> <span style="color: #990000;">isset</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_REQUEST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'action'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> ? <span style="color: #000088;">$_REQUEST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'action'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">'login'</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$errors</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> WP_Error<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #990000;">isset</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'key'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
	<span style="color: #000088;">$action</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'resetpass'</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// validate action so as to default to the login screen</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span><span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$action</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'logout'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'lostpassword'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'retrievepassword'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'resetpass'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'rp'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'register'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'login'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900; font-weight: bold;">false</span> <span style="color: #339933;">===</span> has_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'login_form_'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$action</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
	<span style="color: #000088;">$action</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'login'</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>接下来转到369行：如下</p>

<div class="wp_codebox"><table><tr id="p415128"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code" id="p415code128"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">case</span> <span style="color: #0000ff;">'resetpass'</span> <span style="color: #339933;">:</span>
<span style="color: #b1b100;">case</span> <span style="color: #0000ff;">'rp'</span> <span style="color: #339933;">:</span>
	<span style="color: #000088;">$errors</span> <span style="color: #339933;">=</span> reset_password<span style="color: #009900;">&#40;</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'key'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span> is_wp_error<span style="color: #009900;">&#40;</span><span style="color: #000088;">$errors</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		wp_redirect<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp-login.php?checkemail=newpass'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #990000;">exit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	wp_redirect<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp-login.php?action=lostpassword&amp;error=invalidkey'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #990000;">exit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">break</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>3.解决的办法：</h3>
<p>1. 立即升级到2.84版本；</p>
<p>2. 修改wp-login.php文件，将190行的代码，如下：</p>

<div class="wp_codebox"><table><tr id="p415129"><td class="line_numbers"><pre>1
2
</pre></td><td class="code" id="p415code129"><pre class="php" style="font-family:monospace;">	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$key</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">new</span> WP_Error<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'invalid_key'</span><span style="color: #339933;">,</span> __<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Invalid key'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>修改为：</p>

<div class="wp_codebox"><table><tr id="p415130"><td class="line_numbers"><pre>1
2
</pre></td><td class="code" id="p415code130"><pre class="php" style="font-family:monospace;">	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$key</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #990000;">is_array</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$key</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">new</span> WP_Error<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'invalid_key'</span><span style="color: #339933;">,</span> __<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Invalid key'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>4. 官方：</h3>
<p>官方更新解决方法：<a href="http://core.trac.wordpress.org/changeset/11798" rel="external">http://core.trac.wordpress.org/changeset/11798</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/the-reason-of-update-password-reset-loophole/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>正则:8个你必须知道的表达式（图文教程）</title>
		<link>http://www.ihiro.org/eight-regular-expressions</link>
		<comments>http://www.ihiro.org/eight-regular-expressions#comments</comments>
		<pubDate>Tue, 11 Aug 2009 02:14:59 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[正则表达式]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=409</guid>
		<description><![CDATA[<img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/200x200.jpg" class="alignleft" width="100" height="100' alt="reg" />
<p><strong>正则表达式（英文：Regular Expression）</strong>:在计算机科学中，是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器或其他工具里，正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。“正则表达式”通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。</p>
<p>今天我说到的8个正则表达式将会用来匹配:用户名、密码、邮件地址、16进制表达式（如：#cccccc）、slug地址（如：eight-regular-expressions）、URL地址、Ip地址以及HTML标签。在下面的讲解中会结合图片给大家讲解，这样你会更容易地理解这些表达式。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/200x200.jpg" class="alignright" width="150" height="150' alt="reg" /></p>
<h3>正则表达式的背景：</h3>
<p>维基百科中这么说到：<br />
<strong>正则表达式（英文：Regular Expression）</strong>:在计算机科学中，是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器或其他工具里，正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。“正则表达式”通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。</p>
<p>今天我说到的8个正则表达式将会用来匹配:用户名、密码、邮件地址、16进制表达式（如：#cccccc）、slug地址（如：eight-regular-expressions）、URL地址、Ip地址以及HTML标签。在下面的讲解中会结合图片给大家讲解，这样你会更容易地理解这些表达式。</p>
<h3>1.匹配英文用户名：</h3>
<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/username.jpg" alt="username" width="600" height="370" class="aligncenter" /></p>
<p>表达式：/^[a-z0-9_-]{3,16}$/</p>
<p>可以匹配的字符串：my-us3r_n4m3</p>
<p>不能匹配的字符串：th1s1s-wayt00_l0ngt0beausername (太长了！)</p>
<h3>2.匹配密码：</h3>
<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/password.jpg" alt="password" width="600" height="370" class="aligncenter" /></p>
<p>表达式：/^[a-z0-9_-]{6,18}$/</p>
<p>可以匹配的字符串：myp4ssw0rd</p>
<p>不能匹配的字符串：mypa$$w0rd(包含了一个美元符号！)</p>
<h3>3.匹配16进制表达式：</h3>
<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/hex-copy.jpg" alt="hex" width="600" height="370" class="aligncenter" /></p>
<p>表达式：/^#?([a-f0-9]{6}|[a-f0-9]{3})$/</p>
<p>可以匹配的字符串：#a3c113</p>
<p>不能匹配的字符串：#4d82h4 (包含了字母h，字母h不属于16进制的字符！)</p>
<h3>4.匹配slug地址：</h3>
<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/slug.jpg" alt="slug" width="600" height="370" class="aligncenter" /></p>
<p>表达式：/^[a-z0-9-]+$/ </p>
<p>可以匹配的字符串：eight-regular-expressions</p>
<p>不能匹配的字符串：eight_regular_expressions(包含了下划线！)</p>
<h3>5.匹配邮箱地址：</h3>
<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/email.jpg" alt="email" width="600" height="500" class="aligncenter" /></p>
<p>表达式：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ </p>
<p>可以匹配的字符串：hiro.zhd@gmail.com</p>
<p>不能匹配的字符串：hiro.zhd@gmail.something(域名的后缀过长！)</p>
<h3>6.匹配URL地址：</h3>
<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/url.jpg" alt="url" width="600" height="500" class="aligncenter" /></p>
<p>表达式：/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ </p>
<p>可以匹配的字符串：http://www.ihiro.org/</p>
<p>不能匹配的字符串：http://www.ihiro.org/about!.html(包含了特殊字符“！”！)</p>
<h3>7.匹配IP地址：</h3>
<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/ip.jpg" alt="ip" width="600" height="500" class="aligncenter" /></p>
<p>表达式：/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/ </p>
<p>可以匹配的字符串：73.60.124.136(这不是我的ip哦，请不要试图访问，呵呵！)</p>
<p>不能匹配的字符串：256.60.124.136(超过255了！)</p>
<h3>8.匹配HTML标签：</h3>
<p><img src="http://nettuts.s3.amazonaws.com/404_regularExpressions/images/htmltag.jpg" alt="htmltag" width="600" height="500" class="aligncenter" /></p>
<p>表达式：/^< ([a-z]+)([^<]+)*(?:>(.*)< \/\1>|\s+\/>)$/ </p>
<p>可以匹配的字符串：&lt;a href=&#8221;http://www.ihiro.org/&#8221;&gt;Nettuts+&lt;/a&gt;</p>
<p>不能匹配的字符串：&lt;a href=&#8221;http://www.ihiro.org/&#8221; title=&#8221;Hiro&#8217;s blog &gt;&#8221;&gt;Nettuts+&lt;/a&gt;(标签属性包含了特殊字符！)</p>
<p><strong>文章内容整理来自：<a href="http://net.tutsplus.com/tutorials/other/8-regular-expressions-you-should-know/" rel="external">http://net.tutsplus.com/tutorials/other/8-regular-expressions-you-should-know/</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/eight-regular-expressions/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>电影:《海上钢琴师&#8211;1900的传说》，经典！</title>
		<link>http://www.ihiro.org/the-legend-of-1900</link>
		<comments>http://www.ihiro.org/the-legend-of-1900#comments</comments>
		<pubDate>Sun, 09 Aug 2009 13:59:46 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[剧情片]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=394</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/海上钢琴师.jpg" alt="海上钢琴师" title="海上钢琴师" width="100" height="100" class="alignleft size-full wp-image-396" />
<p>昨天在看CCTV音乐频道的经典留声机节目时，看到电视中在介绍该片中的钢琴乐，听了一会儿，觉得很是好听！加上主持人对该片的剧情的介绍，深深地吸引了我。于是赶快在网上搜索了下载下来观看。</p>
<p>《海上钢琴师》是1998年上映的意大利影片，影片全长2个半小时。当我看完它后，我的心灵震撼了。一位弃儿，一个没有出生证明、不知父母、只有一个捡到他的养父，一个自学成才的伟大的钢琴师，一位从来没有下过船、没有登上过陆地的人，他就是1900。整个影片中他演奏了很多动人心弦的曲子，他可以根据每个人的心情、心态，演奏出相应的曲子。没有乐谱，没有老师。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/海上钢琴师-封面.jpg" alt="海上钢琴师-封面" title="海上钢琴师-封面" width="151" height="198" class="alignright size-full wp-image-395" /></p>
<p>昨天在看CCTV音乐频道的经典留声机节目时，看到电视中在介绍该片中的钢琴乐，听了一会儿，觉得很是好听！加上主持人对该片的剧情的介绍，深深地吸引了我。于是赶快在网上搜索了下载下来观看。</p>
<p>《海上钢琴师》是1998年上映的意大利影片，影片全长2个半小时。当我看完它后，我的心灵震撼了。一位弃儿，一个没有出生证明、不知父母、只有一个捡到他的养父，一个自学成才的伟大的钢琴师，一位从来没有下过船、没有登上过陆地的人，他就是1900。整个影片中他演奏了很多动人心弦的曲子，他可以根据每个人的心情、心态，演奏出相应的曲子。没有乐谱，没有老师。</p>
<h3>剧情介绍：</h3>
<p>1900 年的第一天，往返于欧美两地的邮轮Virginian号上，负责邮轮上添加煤炭的工人Danny Boodman在头等舱上欲捡拾有钱人残留下来的事物时，却意外的在钢琴上发现一个被遗弃的新生儿，装在TD牌柠檬的空纸箱内。由于坚信「TD」正代表了 Thanks Danny的缩写，于是Danny不顾其他工人的嘲笑，独立抚育这个婴儿，并为了纪念这特别的一天，将他取名为：1900。</p>
<p>海上出生的1900，在陆地上却是个从未存在的人，没有亲人、没有户籍，也没有国籍，大海便是他的摇篮，而他也随着Virginian号往返靠泊各个码头，逐渐长大。然而好景不常，一次的海上意外事件，造成抚养1900的Danny意外丧生，幸而奇迹似的，某天深夜船上的众人被优美的琴声所惊醒，循着琴声而往，居然是无师自通的1900在钢琴前忘我的演奏着，动人的旋律打动了众人，从此，1900展开了在海上弹奏钢琴的旅程，也吸引了愈来愈多慕名而来的旅客。</p>
<p>马克斯（1900的好友）在因缘际会下来到Virginian号加入乐队伴奏，也因此见识到这位传说中的海上钢琴师——1900，两人因此结为好友。而 1900在与发明爵士乐的传奇钢琴手Jelly同船竞技钢琴琴艺之后，声势更是如日中天。但尽管Max再三鼓励1900下船去向全世界展露他的天赋， 1900却始终未曾踏足陆地一步。直到他在为唱片公司录制个人专辑时，意外见到船舱之外清秀动人的女孩，并在感动之余创作了《1900&#8217;s Theme》(即片头Max与乐器行老板所提到的不知名曲子)。随着女孩的下船离去，1900的心开始波动，究竟1900会不会为了去寻找女孩而离开30 多年来的船上生活？</p>
<h3>影片历史相关：</h3>
<p>1. 片中那位挑战1900，还大言不惭的说是他发明Jazz的那位仁兄在历史上确有其人，他就是Jelly Roll Morton。《The Crave》本来就是他的作品。在电影里饰演Jelly Roll Morton的那位Clarence Williams III，他父亲 Clarence Williams也是早期Jazz的重要人物之一。据说是第一位在谱子上使用Jazz这个字眼的人。</p>
<p>2. 电影中的SS Virginian号在历史上确有其船，1904年出厂，1954年左右被废弃。它还与泰坦尼克号有关，据说沉船时SS Virginian号就在附近能接收到无线信号的地方。</p>
<p>3. 片中轮船的外观设计灵感来自于SS Lusitania号及其姐妹号SS Mauritania。1900弹钢琴的舞厅有着跟SS Mauritania号相似的圆形屋顶。</p>
<p>4. 最后在录音合成时采用的大部分实际音响出自钢琴家缔尤特布塔。</p>
<p>5. 虽然Tim Roth本来不会弹钢琴，但经过拍片前半年的魔鬼特训后应该是学会了。片子里对1900弹琴时手部的拍摄镜头充分说明了那是Tim Roth自己的手(他的手指不长)。要知道做到&#8221;形似&#8221;对初学者来说已经是很不容易了。</p>
<h3>影片看点：</h3>
<p>1. 一位弃儿从小到大的成长经历，自学成才的天才钢琴师；</p>
<p>2. 当时的人们对美国美好生活的憧憬，在人们见到自由女神像时发出的那声惊叹声；</p>
<p>3. 优美的钢琴曲，激烈的钢琴对决；</p>
</p>
<p>4. 心灵的震撼，人生的感悟。</p>
<p><h3>影片下载：</h3>
</p>
<p><a href="ed2k://|file|%5B%E6%B5%B7%E4%B8%8A%E9%92%A2%E7%90%B4%E5%B8%88%5D.The.Legend.of.1900.1998.Extended.Edition.DVDRip.XviD.iNT-NewMov-cd1.avi|732962816|e02aa5884dcc1cc20b5a14e8dce1dc31|h=FNNG3IJX6FRS7XB3EFSYWJOVA6QF7WP6|/" rel="external">《海上钢琴师》CD1</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E6%B5%B7%E4%B8%8A%E9%92%A2%E7%90%B4%E5%B8%88%5D.The.Legend.of.1900.1998.Extended.Edition.DVDRip.XviD.iNT-NewMov-cd1.chs.srt|23372|39e49b03ccda7696b70f3f448e3362cb|s=http://subs.verycd.com/39e49b03ccda7696b70f3f448e3362cb23372/subtitles.srt|/" rel="external">CD1字幕</a></p>
<p><a href="ed2k://|file|%5B%E6%B5%B7%E4%B8%8A%E9%92%A2%E7%90%B4%E5%B8%88%5D.The.Legend.of.1900.1998.Extended.Edition.DVDRip.XviD.iNT-NewMov-cd2.avi|732426240|38c5ae91b055cd307029d90428757a46|h=NHUNIRIW72ML4JQO2Y5U5WIQPKZVBAW5|/" rel="external">《海上钢琴师》CD2</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E6%B5%B7%E4%B8%8A%E9%92%A2%E7%90%B4%E5%B8%88%5D.The.Legend.of.1900.1998.Extended.Edition.DVDRip.XviD.iNT-NewMov-cd2.chs.srt|24052|537b5d8871609834f78866846e4bac04|s=http://subs.verycd.com/537b5d8871609834f78866846e4bac0424052/subtitles.srt|/" rel="external">CD2字幕</a></p>
<p><a href="ed2k://|file|%5B%E6%B5%B7%E4%B8%8A%E9%92%A2%E7%90%B4%E5%B8%88%5D.The.Legend.of.1900.1998.Extended.Edition.DVDRip.XviD.iNT-NewMov-cd3.avi|730927104|a7db848c26a7f516fdce4a6bf13d7eb0|h=XUE7MLHW6RPPFNSCZ3I6TZBROFTCBYIV|/" rel="external">《海上钢琴师》CD3</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E6%B5%B7%E4%B8%8A%E9%92%A2%E7%90%B4%E5%B8%88%5D.The.Legend.of.1900.1998.Extended.Edition.DVDRip.XviD.iNT-NewMov-cd3.chs.srt|25130|77fe3ba4290aeca43b5db3eb96229434|s=http://subs.verycd.com/77fe3ba4290aeca43b5db3eb9622943425130/subtitles.srt|/" rel="external">CD3字幕</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/the-legend-of-1900/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>网赚:抛弃谷歌、百度，转战阿里妈妈</title>
		<link>http://www.ihiro.org/abandon-google-and-baidu-then-alimama</link>
		<comments>http://www.ihiro.org/abandon-google-and-baidu-then-alimama#comments</comments>
		<pubDate>Fri, 07 Aug 2009 15:39:49 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[alimama]]></category>
		<category><![CDATA[baidu]]></category>
		<category><![CDATA[google AdSense]]></category>
		<category><![CDATA[网赚]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=388</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/adsense-baidu-to-alimama.gif" alt="adsense-baidu-to-alimama" title="adsense-baidu-to-alimama" width="100" height="100" class="alignleft wp-image-389" />
<p>看到这个标题不要吃惊哦！这篇文章主要就是讲讲我对几个主流的网络推广赚钱的个人看法。相信大家已经看到了我博客上的大面积的阿里妈妈广告了吧。没错，我已经转战到阿里妈妈了。</p>
<p>...</p>
<p>其实网赚也不是主要我的目的，这些赚来的外快无非就是花在了域名与空间的费用上了。所以赚多赚少都没有关系了。最主要的是我对各个类型的推广有所了认识。在没有了解这些推广前，我都不知道CPM、CPT是些什么名词！毕竟是和互联网打交道的，还是知道这些知识的好！！</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/adsense-baidu-to-alimama.gif" alt="adsense-baidu-to-alimama" title="adsense-baidu-to-alimama" width="150" height="150" class="alignright size-full wp-image-389" /></p>
<p>看到这个标题不要吃惊哦！这篇文章主要就是讲讲我对几个主流的网络推广赚钱的个人看法。相信大家已经看到了我博客上的大面积的阿里妈妈广告了吧。没错，我已经转战到阿里妈妈了。</p>
<p>之前申请到了谷歌Adsense和百度联盟的推广权，但发现一段时间下来，这两个推广并没有带给我什么效益，几乎忽略不计吧！Adsense主要是按点击付费，就算我在我的页面上放上了广告，放的位置多么地好。但是没人点击，赚不了钱不说，还看着费事。百度联盟（不包含百度推广哦，百度推广是申请到百度联盟后才能继续申请的）吧，无非就是一些安装后返利、购物后返利等一些业务！</p>
<p>而就我目前了解下来阿里妈妈的网赚是最明了的，你发布了广告位，设置了每个广告位的每周展示收费，供广告主们来购买。每个广告位的每周收费一目了然，别人愿意买，你就有的赚。它可以只需通过展示就可以赚钱，而无需像Adsense那样需要点击。当然阿里妈妈也有这样的点击计费的推广，也有购物返利的推广（淘宝客）。但比较下来我还是喜欢展示推广，不用自己管的太多，每周只管收费就好了。只需要大概地保证你的访问量达到要求就差不多了！</p>
<p>其实网赚也不是主要我的目的，这些赚来的外快无非就是花在了域名与空间的费用上了。所以赚多赚少都没有关系了。最主要的是我对各个类型的推广有所了认识。在没有了解这些推广前，我都不知道CPM、CPT是些什么名词！毕竟是和互联网打交道的，还是知道这些知识的好！！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/abandon-google-and-baidu-then-alimama/feed</wfw:commentRss>
		<slash:comments>44</slash:comments>
		</item>
		<item>
		<title>jQuery:两个样式下拉菜单(click hover)</title>
		<link>http://www.ihiro.org/drop-down-menu</link>
		<comments>http://www.ihiro.org/drop-down-menu#comments</comments>
		<pubDate>Thu, 06 Aug 2009 06:51:18 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=367</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/dropdownmenu.jpg" alt="dropdownmenu" title="dropdownmenu" width="100" height="90" class="alignleft  wp-image-368" />
<p>一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。</p>
<p>之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了li:hover的方式通过鼠标移动到li上，显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果，下拉菜单一下子就凭空出现了。</p>
<p>运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果，我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/dropdownmenu.jpg" alt="dropdownmenu" title="dropdownmenu" width="150" height="133" class="alignright size-full wp-image-368" /></p>
<p>一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。</p>
<p>之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了li:hover的方式通过鼠标移动到li上，显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果，下拉菜单一下子就凭空出现了。</p>
<p>运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果，我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。</p>
<p>说明：第一个导航#nav1是点击后出现下拉菜单，而第二个导航#nav2是鼠标移动到上面后出现导航。(样式只为效果，没有美化，望见谅)</p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/cases/DropDownMenu/DropDownMenu.rar" class="download" rel="external">Download</a><a href="http://www.ihiro.org/cases/DropDownMenu/" class="demo" rel="external">Demo</a></p>
<h3>1.html代码：</h3>

<div class="wp_codebox"><table><tr id="p367131"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
</pre></td><td class="code" id="p367code131"><pre class="html" style="font-family:monospace;">&lt;ul class=&quot;nav&quot; id=&quot;nav1&quot;&gt;
    	&lt;li&gt;点击方式下拉菜单:click&lt;/li&gt;
    	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;关于&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;技术&lt;/a&gt;
        	&lt;ul class=&quot;subnav&quot;&gt;
            	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;wordpress&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;php&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;jQuery&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CSS&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;影视&lt;/a&gt;
        	&lt;ul class=&quot;subnav&quot;&gt;
            	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;电视剧&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;电影&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;舞台剧&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;联系&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&nbsp;
    &lt;ul class=&quot;nav&quot; id=&quot;nav2&quot;&gt;
    	&lt;li&gt;移动方式下拉菜单:hover&lt;/li&gt;
    	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;关于&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;技术&lt;/a&gt;
        	&lt;ul class=&quot;subnav&quot;&gt;
            	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;wordpress&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;php&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;jQuery&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CSS&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;影视&lt;/a&gt;
        	&lt;ul class=&quot;subnav&quot;&gt;
            	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;电视剧&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;电影&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;舞台剧&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;联系&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;</pre></td></tr></table></div>

<h3>2. CSS源码：</h3>

<div class="wp_codebox"><table><tr id="p367132"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code" id="p367code132"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">14px</span> <span style="color: #ff0000;">'宋体'</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">underline</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#nav1</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">200px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.nav</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">35px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#F60</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.nav</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">35px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">35px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.nav</span> li a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">35px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">35px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.nav</span> li span <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">17px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">35px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">subnav_btn.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #993333;">center</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.nav</span> li span<span style="color: #6666ff;">.subhover</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span><span style="color: #993333;">pointer</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
ul<span style="color: #6666ff;">.subnav</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">35px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">-20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
ul<span style="color: #6666ff;">.subnav</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #993333;">both</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<h3>3. jQuery代码：</h3>

<div class="wp_codebox"><table><tr id="p367133"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="code" id="p367code133"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;span&gt;&lt;/span&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">insertBefore</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.subnav'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//鼠标点击向下箭头</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#nav1 li span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'subhover'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul.subnav'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideUp</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'subhover'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul.subnav'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideDown</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// 鼠标移动到含有下拉菜单的li标签上时</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#nav2 li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'subhover'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
			   .<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul.subnav'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideDown</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'subhover'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
			   .<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul.subnav'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideUp</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/drop-down-menu/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>主题：我的第一个主题ihiro提供下载了</title>
		<link>http://www.ihiro.org/my-first-theme-for-download</link>
		<comments>http://www.ihiro.org/my-first-theme-for-download#comments</comments>
		<pubDate>Wed, 05 Aug 2009 01:35:05 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[theme]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=345</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/themes/ihiro/screenshot.png" class="alignleft" alt="theme-ihiro" width="100" height="75" />
<p>在我的博客6月份上线后，陆续有人向我索要我的主题。当时因为我只有这一个主题的原因，都陆续婉言拒绝了，我跟他们说等我到了8月换了新的主题后就会将旧的主题共享出来的！终于我的新主题于8月4日上线了，相信大家已经看到了。</p>
<p>于是昨晚乎，花了1-2个小时的时间整理了前一个主题的源代码，删除了那些没有的代码。并且整理了一下psd源码，放在了源文件的压缩包里一并共享给大家！</p>]]></description>
			<content:encoded><![CDATA[<p>在我的博客6月份上线后，陆续有人向我索要我的主题。当时因为我只有这一个主题的原因，都陆续婉言拒绝了，我跟他们说等我到了8月换了新的主题后就会将旧的主题共享出来的！终于我的新主题于8月4日上线了，相信大家已经看到了。</p>
<p>于是昨晚乎，花了1-2个小时的时间整理了前一个主题的源代码，删除了那些没有的代码。并且整理了一下psd源码，放在了源文件的压缩包里一并共享给大家！主题效果如图：<img src="http://www.ihiro.org/blog/wp-content/themes/ihiro/screenshot.png" class="aligncenter" alt="theme-ihiro" /></p>
<p class="demo-down-bar"><a href="http://www.ihiro.org/downloads/themes/ihiro.zip" class="download">download</a><a href="http://www.ihiro.org/downloads/ihiro.png" rel="external" class="demo">demo</a></p>
<h3>就该主题我说明的几点：</h3>
<p>1. 该主题主要用到的插件是pageNavi，但因为我在header.php中并没有调用wp_head()函数，所以pageNavi插件的css样式文件无法引入，所以我在style.css文件中对pageNavi进行样式化；</p>
<p>2. 若在源文件中看到_e(&#8221;, &#8216;ihiro&#8217;)等之类的函数，不要惊讶，我在该函数后加一个英文参数是为了使输出的结果为英文的；</p>
<p>3. 我通过使用wordpress的条件判断is_xxxx()函数来根据不同情况显示不同内容，将多个文件整合到了index.php文件中，大家在源文件可以看的出来；</p>
<p>4. 我将两个psd的源文件放在压缩包的images下的source文件夹内，并附上logo使用的字体安装文件。</p>
<p>最后，感谢大家一直以来的关注和支持，我会继续努力！</p>
<p style="color:#f00; font:16px blod; text-align:center;">特此向大家道歉：此共享主题并非我现在用的主题，而是我的站点上线时使用的第一个主题，效果见文章的截图或预览页面（因之前的预览链接是我登录后台后，直接使用的外观标签下的预览链接的地址，导致大家预览时没有看到真正的预览效果，现已经更正，抓取了截图）。感谢<a href="http://www.shirakdy.com/" rel="external">shirak</a>的提示，非常感谢！也望大家原谅我之前的粗心！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/my-first-theme-for-download/feed</wfw:commentRss>
		<slash:comments>74</slash:comments>
		</item>
		<item>
		<title>Wordpress:显示你的博客数据库查询次数和查询花费时间</title>
		<link>http://www.ihiro.org/show-queries-and-times</link>
		<comments>http://www.ihiro.org/show-queries-and-times#comments</comments>
		<pubDate>Tue, 04 Aug 2009 08:53:40 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=338</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/query.jpg" alt="query" title="query" width="100" height="100" class="alignleft wp-image-339" />
<p>Wordpress提供了一些功能函数可以轻松地显示数据库查询的统计信息，这些信息可以公开地显示在网页中，或者隐藏在源代码中，更或者只有你自己可以看到。Wordpress主要提供了两个统计函数：
<br />
1.网页加载时查询数据库的次数:&#60;?php echo get_num_queries(); ?&#62;<br />
2.服务器端完成这些查询所花费的时间:&#60;?php timer_stop(7); ?&#62;</p>
<p>结果显示效果：29 queries in 0.431 seconds</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/query.jpg" alt="query" title="query" width="150" height="150" class="alignright size-full wp-image-339" /></p>
<p>Wordpress提供了一些功能函数可以轻松地显示数据库查询的统计信息，这些信息可以公开地显示在网页中，或者隐藏在源代码中，更或者只有你自己可以看到。Wordpress主要提供了两个统计函数：<br />
<br />
1.网页加载时查询数据库的次数:&lt;?php echo get_num_queries(); ?&gt;<br />
2.服务器端完成这些查询所花费的时间:&lt;?php timer_stop(7); ?&gt;</p>
<p>可以使用3种方式在网页中显示:</p>
<h3>1. 公开地显示查询的统计信息：</h3>
<p>如果你觉的你的服务器或空间的处理速度好，或者想让你的访问者看到这些查询统计信息的话，你可以将这些统计信息公开显示在页面中：（效果查看博客的页面底部）</p>

<div class="wp_codebox"><table><tr id="p338134"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p338code134"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>p<span style="color: #339933;">&gt;&lt;</span> ?php <span style="color: #b1b100;">echo</span> get_num_queries<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> queries in <span style="color: #339933;">&lt;</span> ?php timer_stop<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> seconds<span style="color: #339933;">&lt;/</span>p<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<h3>2. 将统计信息显示在源代码中，而不出现页面的内容中：</h3>
<p>如果你不想将统计信息显示在页面上供访问者查看，但又想自己可以知道这些统计信息，那么你可以通过html的注释将结果只显示在源代码中（PS：大家也可以从源代码中查看的哦！）：</p>

<div class="wp_codebox"><table><tr id="p338135"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p338code135"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;!--</span> <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_num_queries<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> queries in <span style="color: #339933;">&lt;</span> ?php timer_stop<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> seconds <span style="color: #339933;">--&gt;</span></pre></td></tr></table></div>

<h3>3. 统计信息只有你自己登录了后可以看到：</h3>
<p>该方法是第二种显示的优化方法，只需博客管理员登录后就可以查看查询统计信息，访问者是无法查看的：</p>

<div class="wp_codebox"><table><tr id="p338136"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p338code136"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>current_user_can<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'level_10'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;!-- '</span> <span style="color: #339933;">.</span> get_num_queries<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">' queries in '</span> <span style="color: #339933;">.</span> timer_stop<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">' seconds --&gt;'</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>查询结果显示的效果可以观测我博客的底部。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/show-queries-and-times/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>资讯:2009年8月最新编程语言排行榜</title>
		<link>http://www.ihiro.org/august-2009-list-of-the-latest-programming-languages</link>
		<comments>http://www.ihiro.org/august-2009-list-of-the-latest-programming-languages#comments</comments>
		<pubDate>Mon, 03 Aug 2009 06:15:28 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[业界信息]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=316</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/2009.August.no-list.jpg" alt="2009.August.no-list" title="2009.August.no-list" width="100" height="100" class="alignleft wp-image-317" />
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>最新公布了09年8月份的编程语言排行榜。还榜单每月更新一些，在一些网站上大家都可以看到有这样的讯息。就本月的前十的语言榜单趋势图看来，Java、C、Javascript的占有率比上月有所下滑的趋势，C++、VB、PHP有所上升，C#、Python、Perl、Ruby几乎持平。</p>
<p>对我个人而言，我关注的比较多的语言是js、Php、Flex（as），可惜的是as没有进入到前二十，而是处在第22位。因最初是学习Java的，所以对Java也有所关注，但因为工作的原因用不到Java，所以平时关注的相对也少了点。不过就趋势图来看，Java一直处在第一的位置。不知道今年的Java被Oracle收购会不会给Java带来更多的市场呢？我们还是期待吧！！</p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/2009.August.no-list.jpg" alt="2009.August.no-list" title="2009.August.no-list" width="160" height="160" class="alignright size-full wp-image-317" /></p>
<p><a href="http://www.tiobe.com/" rel="external">Tiobe</a>最新公布了09年8月份的编程语言排行榜。还榜单每月更新一些，在一些网站上大家都可以看到有这样的讯息。就本月的前十的语言榜单趋势图看来，Java、C、Javascript的占有率比上月有所下滑的趋势，C++、VB、PHP有所上升，C#、Python、Perl、Ruby几乎持平。</p>
<p>对我个人而言，我关注的比较多的语言是js、Php、Flex（as），可惜的是as没有进入到前二十，而是处在第22位。因最初是学习Java的，所以对Java也有所关注，但因为工作的原因用不到Java，所以平时关注的相对也少了点。不过就趋势图来看，Java一直处在第一的位置。不知道今年的Java被Oracle收购会不会给Java带来更多的市场呢？我们还是期待吧！！</p>
<h3>2009年8月份编程语言前20名：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/09年8月编程语言排行榜.jpg" alt="09年8月编程语言排行榜" title="09年8月编程语言排行榜" width="558" height="556" class="aligncenter size-full wp-image-318" /></p>
<h3>2009年8月份编程语言前10名的走势图：如图</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/2009.August.Trends.jpg" alt="2009.August.Trends" title="2009.August.Trends" width="560" height="420" class="aligncenter size-full wp-image-319" /></p>
<p>更多信息请访问：<a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html" rel="external">http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/august-2009-list-of-the-latest-programming-languages/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>电影:《夜店》观后感</title>
		<link>http://www.ihiro.org/one-night-in-supermarket</link>
		<comments>http://www.ihiro.org/one-night-in-supermarket#comments</comments>
		<pubDate>Sun, 02 Aug 2009 14:56:22 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=308</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/夜店.jpg" alt="夜店" title="夜店" width="100" height="100" class="alignleft wp-image-309" />
<p>整个影片围绕了两个主要的故事情节展开：1.水哥（徐峥饰演）为了讨回因便利店女老板打错以为彩票而没中到的9500元的奖金而劫持了两名店员（李小璐、乔任梁饰演），他想通过便利店一夜的收益而拿回自己的9500元；2.抢匪（张嘉忆饰演）在当日早上抢夺了一颗价值1000万的钻石后，将钻石藏在便利店的冰箱中，与夜晚返回便利店想取回钻石。</p>
<h3>本片看点：</h3>
<p>1.比计算机算术都快的男主角（徐峥饰演）；2.全戏中只有一套戏服的女主角（李小璐饰演）；3.带牙套、戴近视眼镜的乔任梁（其实我之前不认识该人，也就看电影频道介绍时才认识此人）；4.第一次饰演反面角色的张嘉忆；5.小场景喜剧多；6.给周杰伦的歌着实做了很多的免费广告啊，周董小赚了一下哦；7.赵英俊的出演，喜剧成分更加浓烈。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/08/夜店.jpg" alt="夜店" title="夜店" width="149" height="150" class="alignright size-full wp-image-309" /></p>
<p>今天终于在VeryCD的网站上下到了《夜店》的DVD版本，之前看到CCTV6的中国电影报道节目对该片进行了多次的报道，在观看之前对它的大概故事情节，人物造型都有了一定的了解。该片是一个小场景的电影（所以我想也是一部小投资的电影吧！），故事就发生在一个24小时营业的便利店里。</p>
<p>整个影片围绕了两个主要的故事情节展开：1.水哥（徐峥饰演）为了讨回因便利店女老板打错以为彩票而没中到的9500元的奖金而劫持了两名店员（李小璐、乔任梁饰演），他想通过便利店一夜的收益而拿回自己的9500元；2.抢匪（张嘉忆饰演）在当日早上抢夺了一颗价值1000万的钻石后，将钻石藏在便利店的冰箱中，与夜晚返回便利店想取回钻石。</p>
<p>在两个主剧情中，由假劫持到真抢匪，由最初的互相利用到最后的成为好友，在之后与抢匪的较量中，大家抛弃前嫌，同心协力将抢匪绳之于法。而水哥和女老板结为连理，男女店员也总成情侣。</p>
<h3>本片看点：</h3>
<p>
1.比计算机算术都快的男主角（徐峥饰演）；<br />
2.全戏中只有一套戏服的女主角（李小璐饰演）；<br />
3.带牙套、戴近视眼镜的乔任梁（其实我之前不认识该人，也就看电影频道介绍时才认识此人）；<br />
4.第一次饰演反面角色的张嘉忆；<br />
5.小场景喜剧多；<br />
6.给周杰伦的歌着实做了很多的免费广告啊，周董小赚了一下哦；<br />
7.赵英俊的出演，喜剧成分更加浓烈。</p>
<h3>下载地址：</h3>
<p><a href="ed2k://|file|%5B%E5%A4%9C%C2%B7%E5%BA%97%5D.One.Night.in.Supermarket.2009.CN.DVDRip.XviD-PMCG.avi|734871552|adeb7f999ae32493598744c02b418202|/" rel="external">《夜店》下载</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/one-night-in-supermarket/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>主机:空间转移成功，大家帮忙测试</title>
		<link>http://www.ihiro.org/successful-transfer-to-a-new-host-space-and-help-test</link>
		<comments>http://www.ihiro.org/successful-transfer-to-a-new-host-space-and-help-test#comments</comments>
		<pubDate>Thu, 30 Jul 2009 16:24:38 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[空间]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=299</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/wopus.jpg" alt="wopus" title="wopus" width="100" height="85" class="alignleft" />
<p>晚上的时候通过淘宝购买了wopus的虚拟空间，花了2个小时的时间才将博客从台湾的空间转移到新空间，主要是住的地方网速太慢了，上传了近一个小时。加上这是我第一次从虚拟空间向虚拟空间转移wp，有些地方不是很熟悉。之前都是在本地测试的，很快就可以搞定了。</p>
<p>现在博主就等于转移到了国内，相信速度一定会加快吧。希望大家可以帮忙测试一下：<br />
<strong>测试留言方式：你所在地 / 加载完成花费时间 。</strong>只需留言两项内容即可。谢谢！</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/wopus.jpg" alt="wopus" title="wopus" width="215" height="183" class="alignright size-full wp-image-300" /></p>
<p>晚上的时候通过淘宝购买了wopus的虚拟空间，花了2个小时的时间才将博客从台湾的空间转移到新空间，主要是住的地方网速太慢了，上传了近一个小时。加上这是我第一次从虚拟空间向虚拟空间转移wp，有些地方不是很熟悉。之前都是在本地测试的，很快就可以搞定了。</p>
<p>现在博客就等于转移到了国内，相信速度一定会加快吧。希望大家可以帮忙测试一下。<br />
测试留言方式：<br />
你所在地：<br />
加载完成花费时间：<br />
看到的人都帮忙测试一下哦！谢谢。</p>
<h3>博客转移的注意点：</h3>
<p>在此次空间转移中，就我遇到的问题，而网上我没看到的解决方法，简短地说明一下我的解决方法：<br />
1.发表文章时上传图片：<br />
需要设置wp_content和uploads文件的可写权限，并且在wp后台的设置&#8211;杂项内改变默认的上传地址（此处显示的是上一个空间的地址，需要手动修改）;<br />
2.固定链接：<br />
转移到新空间后，控制固定链接的.htaccess文件是没有的，若你使用的Filezilla上传软件，可以强制显示空间的隐藏文件，就会在旧空间的跟目录下找到.htaccess文件，下载后上传到新空间，设置该文件的写权限即可；也可以登录新搭建wp的后台，在设置&#8211;固定链接下重新设置。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/successful-transfer-to-a-new-host-space-and-help-test/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Wordpress:如何去除wp中的版本信息</title>
		<link>http://www.ihiro.org/how-to-remove-the-version-information-in-wordpress</link>
		<comments>http://www.ihiro.org/how-to-remove-the-version-information-in-wordpress#comments</comments>
		<pubDate>Thu, 30 Jul 2009 01:47:45 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=294</guid>
		<description><![CDATA[<img src="http://diggingintowordpress.com/wp-content/blog-images/wp-head-thumb.jpg" width="100" height="100" class="alignleft" />
<p>在wp博客中，有一个常见的安全技巧是：不要在你的wp中显示出你的版本信息。许多开发者或者使用者都常常将wp的版本信息显示了出来，但这样可能会被一些人利用该版本的漏洞对你的博客进行攻击。很多人对此比较模糊，这样可能就会给你的博客带来安全性的问题。</p>
<p>那么如何去除wordpress的版本信息以保证博客的安全呢，方法有三：</p>
<h3>1. 最暴力的方法; 2. 比较好的方法; 3. 正确的方法。</h3>]]></description>
			<content:encoded><![CDATA[<p><img src="http://diggingintowordpress.com/wp-content/blog-images/wp-head-thumb.jpg" width="150" height="150" class="alignright" /></p>
<p>在wp博客中，有一个常见的安全技巧是：不要在你的wp中显示出你的版本信息。许多开发者或者使用者都常常将wp的版本信息显示了出来，但这样可能会被一些人利用该版本的漏洞对你的博客进行攻击。很多人对此比较模糊，这样可能就会给你的博客带来安全性的问题。</p>
<p>默认情况下，当wp_head() 函数在header.php文件的head标签中被调用时wordpress就执行了wp_generator()，wp_head()函数所处位置如图：<img src="http://diggingintowordpress.com/wp-content/blog-images/wp-head-screens.gif" width="582" height="303" class="aligncenter" />
</p>
<p>当wordpress在网页中运行时，wp_generator()函数输出如下内容（可以在页面源代码中查看到）：</p>

<div class="wp_codebox"><table><tr id="p294137"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p294code137"><pre class="html" style="font-family:monospace;">&lt;meta name=&quot;generator&quot; content=&quot;WordPress 2.8.1&quot; /&gt;</pre></td></tr></table></div>

</p>
<p>那么如何去除wordpress的版本信息以保证博客的安全呢，方法有三：</p>
<h3>1. 最暴力的方法：</h3>
<p>直接删除header.php文件中的wp_head()函数（我当前主题就是采用的这种方法）；</p>
<h3>2. 比较好的方法:</h3>
<p>比删除wp_head()函数更好的方法是在function.php文件中添加一个功能函数，通过返回一个空白的字符串给the_generator()函数，这样输出的版本信息将为空，代码如下：</p>

<div class="wp_codebox"><table><tr id="p294138"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p294code138"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> remove_version_info<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     <span style="color: #b1b100;">return</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'the_generator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'remove_version_info'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<h3>3. 正确的方法：</h3>
<p>
只需在function.php文件中添加41个字符的代码，即可实现,它是通过remove_action()函数删除了wp_head()函数中的wp_generator()函数，代码如下：</p>

<div class="wp_codebox"><table><tr id="p294139"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p294code139"><pre class="php" style="font-family:monospace;">remove_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_head'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'wp_generator'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>题外话：remove_action()函数的功能很多、很强大，以后遇到会再讲解！</p></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/how-to-remove-the-version-information-in-wordpress/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>百度:惊叹！通过百度联盟的申请</title>
		<link>http://www.ihiro.org/congratulation-of-baidu-union</link>
		<comments>http://www.ihiro.org/congratulation-of-baidu-union#comments</comments>
		<pubDate>Mon, 27 Jul 2009 09:08:59 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[baidu]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=282</guid>
		<description><![CDATA[<img src="http://union.baidu.com/newui/img/slogo-un.gif" width="100" height="52" class="alignleft"/>
<p>上周五的时候我无聊的时候申请了一下百度联盟，本来没有抱有任何指望。只是想试试看的心理。因为我是用的台湾的空间，所以并没有去备案。但今天下午的时候收到了百度联盟的邮件，通知我已经成功加入了百度联盟。现阶段我已经可以投放业务广告，就是那种推广购买和安装的那种。之前看到很多网站上有凡客诚品的广告，很是喜欢，我以为那是要和凡客城品去洽谈的，但等我进到百度联盟的管理界面后才知道，这些广告都是百度提供的！</p>
<p>最近一直在做我的第二个主题，所以不准备更新太多的百度广告进去。毕竟现在的主题不太适合放太多的广告。只是将我喜欢的凡客诚品的广告先放了上去，相信大家已经看到了。通过此事，我也要好好规划一下我的新主题布局了。希望可以合理地安放那些广告，既要放入一些广告，但也不能影响布局。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://union.baidu.com/newui/img/slogo-un.gif" width="137" height="69" class="alignright"/></p>
<p>上周五的时候我无聊的时候申请了一下百度联盟，本来没有抱有任何指望。只是想试试看的心理。因为我是用的台湾的空间，所以并没有去备案。但今天下午的时候收到了百度联盟的邮件，通知我已经成功加入了百度联盟。现阶段我已经可以投放业务广告，就是那种推广购买和安装的那种。之前看到很多网站上有凡客诚品的广告，很是喜欢，我以为那是要和凡客城品去洽谈的，但等我进到百度联盟的管理界面后才知道，这些广告都是百度提供的！</p>
<p>最近一直在做我的第二个主题，所以不准备更新太多的百度广告进去。毕竟现在的主题不太适合放太多的广告。只是将我喜欢的凡客诚品的广告先放了上去，相信大家已经看到了。通过此事，我也要好好规划一下我的新主题布局了。希望可以合理地安放那些广告，既要放入一些广告，但也不能影响布局。</p>
<p>看看我的邮件吧，祝贺我一下吧！！如图：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/百度联盟.jpg" alt="百度联盟" title="百度联盟" width="479" height="401" class="aligncenter size-full wp-image-283" />
</p>
<p>不过可惜的是百度推广是需要另外申请的，我已经提交了，系统提示两至三日会回复我，希望百度推广也可以通过吧！</p>
<p>通过我的申请可以告诉大家，申请这些网赚并不一定需要你的网站和域名的上线时间有多么地久。只要你的网站不要太乱，应该都可以通过申请的。我的网站和域名都是6月19日上线的，大家不信的话可以上网去查哦！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/congratulation-of-baidu-union/feed</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>电影：喜剧《七级公务员》</title>
		<link>http://www.ihiro.org/comedy-seven-civil-servants</link>
		<comments>http://www.ihiro.org/comedy-seven-civil-servants#comments</comments>
		<pubDate>Sun, 26 Jul 2009 13:25:51 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[电影]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=276</guid>
		<description><![CDATA[<img src="http://images.movie.xunlei.com/gallery/522/fc56e6037aff6abfb5dbf880cf652e0b.jpg" width="100" height="140" class="alignleft"/>
<p>有很长的时间没有看韩国电视剧和电影了，总觉的韩视或韩影总是少了点韵味。昨天实在无事，看到迅雷首页在推荐这部韩国喜剧。抱着试看的心态把它看完。不的不说，这部电影确实带来了我很多的笑声。所以我想与大家分享一下该片，也希望它可以给大家在工作之余带来一些笑容，放松心情。</p>
<h3>看点推荐：</h3>
<p>1.穿着婚纱，开着飞船追匪徒的女警察；（这点我觉得是本片的创意之处）<br />
2.关系越来越复杂，身份越来越神秘的男女主角；<br />
3.浪漫的爱情故事；<br />
4.搞笑的故事剧情和动作表演。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://images.movie.xunlei.com/gallery/522/fc56e6037aff6abfb5dbf880cf652e0b.jpg" width="125" height="175" class="alignright"/></p>
<p>有很长的时间没有看韩国电视剧和电影了，总觉的韩视或韩影总是少了点韵味。昨天实在无事，看到迅雷首页在推荐这部韩国喜剧。抱着试看的心态把它看完。不的不说，这部电影确实带来了我很多的笑声。所以我想与大家分享一下该片，也希望它可以给大家在工作之余带来一些笑容，放松心情。</p>
<h3>剧情介绍</h3>
<p>
清晨在江华岛，中午在郁陵岛？！一定要留意她！<br />
伪装为旅行社职员的拥有六年资历的国家情报院要员秀芝，过去的历史可以曝光，但决不能暴露身份。于是她对男友才俊时常是谎话连篇，最后的结局是才俊没有说声再见就离开了秀芝。3年后，伪装成保洁部职员的秀芝在追踪商业间谍的过程中偶然与才俊相遇，而此时才俊的身份是国际会计师，秀芝看到才俊时再一次被他倾倒。<br />
我不是平凡的会计师！？一定要留意他！<br />
被恋人秀芝无数次谎言弄得特别疲惫的才俊，只留下要离开韩国的口信后去俄罗斯留学了。3年后伪装成国际会计师，并就职在国家情报院海外分部要员的他，虽然是个新手，到处出错，但是凭着无限的热情接手了第一个现场任务，跟踪俄罗斯黑帮，执行任务中偶遇秀芝。虽然对酒店保洁员一职的秀芝多少感到惊讶，但是曾经那一份美妙的感觉依然犹存。<br />
充满秘密的情侣将展开无限悬疑的对决！<br />
他们各自追踪的目标其实都是同一个事件的人物们，盗取国内技术销往海外的那群人们。但不知道状况的秀芝和才俊每次执行任务时总是碰到一起，甚至开始怀疑彼此的身份… …</p>
<h3>看点推荐：</h3>
<p>1.穿着婚纱，开着飞船追匪徒的女警察；（这点我觉得是本片的创意之处）<br />
2.关系越来越复杂，身份越来越神秘的男女主角；<br />
3.浪漫的爱情故事；<br />
4.搞笑的故事剧情和动作表演。</p>
<p><h3>网络资源：</h3>
</p>
<p><a href="http://kankan.xunlei.com/vod/movie/44/44330.shtml" rel="external">迅雷在线观看</a></p>
<p><a href="ftp://3e:3e@vip.eee4.cn:624/%5Bwww.eee4.cn%E6%8F%90%E4%BE%9B%5D%E4%B8%83%E7%BA%A7%E5%85%AC%E5%8A%A1%E5%91%98DVD%E4%B8%AD%E5%AD%97.rmvb" rel="external">下载地址</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/comedy-seven-civil-servants/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Wordpress:显示tags在一个下拉列表中</title>
		<link>http://www.ihiro.org/display-tags-in-a-dropdown-list-box</link>
		<comments>http://www.ihiro.org/display-tags-in-a-dropdown-list-box#comments</comments>
		<pubDate>Fri, 24 Jul 2009 07:23:10 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=271</guid>
		<description><![CDATA[<img src="http://www.wprecipes.com/wp-content/uploads/2009/06/tags1.jpg" width="100" height="100" class="alignleft" />
<p>标签(tags)在博客中很实用，每个博客中都有一个标签列表或标签云。你若只有几十个标签的话，页面看起来还是比较好的，但若你有上百个标签的话，那么你的标签将会变得非常难看和难读。这样对你的读者不友好，不便于他们查找。</p><p>现在很多的博客上的标签都是以a标签内联显示或者漂亮点的标签使用li标签制作成一个列表显示，另外就是利用插件动态地falsh显示。用a标签内联显示时若设置wp_tag_cloud()的smallest和largest参数值不相等，那么这个标签云显示的就比较丑陋的；而用li标签显示上百个标签的话，会占据很大的页面，不友好；而使用插件flash动态显示确实很美观，但加载速度明显降低，而且会出现不同浏览器层次的bug。若刚好这个flash标签云的上方刚好有个鼠标移动上去的下拉菜单，说不定在不同的浏览器下，有的是现实在flash上层，有的却是跑到了flash的下面去了。这个现象很常见哦！</p>
<p>今天在国外的网站上看到了这个解决方案，觉得很是不错，它将标签显示在一个下拉列表框中，这样既不占据很大的页面，经css美化的话显示器来也很不错哦！</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.wprecipes.com/wp-content/uploads/2009/06/tags1.jpg" width="200" height="200" class="alignright" />标签(tags)在博客中很实用，每个博客中都有一个标签列表或标签云。你若只有几十个标签的话，页面看起来还是比较好的，但若你有上百个标签的话，那么你的标签将会变得非常难看和难读。这样对你的读者不友好，不便于他们查找。</p>
<p>现在很多的博客上的标签都是以a标签内联显示或者漂亮点的标签使用li标签制作成一个列表显示，另外就是利用插件动态地falsh显示。用a标签内联显示时若设置wp_tag_cloud()的smallest和largest参数值不相等，那么这个标签云显示的就比较丑陋的；而用li标签显示上百个标签的话，会占据很大的页面，不友好；而使用插件flash动态显示确实很美观，但加载速度明显降低，而且会出现不同浏览器层次的bug。若刚好这个flash标签云的上方刚好有个鼠标移动上去的下拉菜单，说不定在不同的浏览器下，有的是现实在flash上层，有的却是跑到了flash的下面去了。这个现象很常见哦！</p>
<p>今天在国外的网站上看到了这个解决方案，觉得很是不错，它将标签显示在一个下拉列表框中，这样既不占据很大的页面，经css美化的话显示器来也很不错哦！</p>
<h3>步骤一：添加功能函数到function.php文件中，具体代码如下：</h3>

<div class="wp_codebox"><table><tr id="p271140"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
</pre></td><td class="code" id="p271code140"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #000000; font-weight: bold;">function</span> dropdown_tag_cloud<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$args</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$defaults</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'smallest'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #cc66cc;">8</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'largest'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #cc66cc;">22</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'unit'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'pt'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'number'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #cc66cc;">45</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'format'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'flat'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'orderby'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'name'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'order'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'ASC'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'exclude'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'include'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">''</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$args</span> <span style="color: #339933;">=</span> wp_parse_args<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$args</span><span style="color: #339933;">,</span> <span style="color: #000088;">$defaults</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$tags</span> <span style="color: #339933;">=</span> get_tags<span style="color: #009900;">&#40;</span> <span style="color: #990000;">array_merge</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$args</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'orderby'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'count'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'order'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'DESC'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// Always query top tags</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$tags</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #b1b100;">return</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$return</span> <span style="color: #339933;">=</span> dropdown_generate_tag_cloud<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$tags</span><span style="color: #339933;">,</span> <span style="color: #000088;">$args</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// Here's where those top tags get sorted according to $args</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> is_wp_error<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$return</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">else</span>
		<span style="color: #b1b100;">echo</span> apply_filters<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'dropdown_tag_cloud'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$return</span><span style="color: #339933;">,</span> <span style="color: #000088;">$args</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> dropdown_generate_tag_cloud<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$tags</span><span style="color: #339933;">,</span> <span style="color: #000088;">$args</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$wp_rewrite</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$defaults</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'smallest'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #cc66cc;">8</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'largest'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #cc66cc;">22</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'unit'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'pt'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'number'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #cc66cc;">45</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'format'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'flat'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'orderby'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'name'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'order'</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #0000ff;">'ASC'</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$args</span> <span style="color: #339933;">=</span> wp_parse_args<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$args</span><span style="color: #339933;">,</span> <span style="color: #000088;">$defaults</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #990000;">extract</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$args</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span><span style="color: #000088;">$tags</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #b1b100;">return</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$counts</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$tag_links</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#41;</span> <span style="color: #000088;">$tags</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$tag</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$counts</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$tag</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>name<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$tag</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>count<span style="color: #339933;">;</span>
		<span style="color: #000088;">$tag_links</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$tag</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>name<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> get_tag_link<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$tag</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>term_id <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> is_wp_error<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$tag_links</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$tag</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>name<span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000088;">$tag_links</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$tag</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>name<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$tag_ids</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$tag</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>name<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$tag</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>term_id<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000088;">$min_count</span> <span style="color: #339933;">=</span> <span style="color: #990000;">min</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$counts</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$spread</span> <span style="color: #339933;">=</span> <span style="color: #990000;">max</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$counts</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #000088;">$min_count</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$spread</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #cc66cc;">0</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$spread</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$font_spread</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$largest</span> <span style="color: #339933;">-</span> <span style="color: #000088;">$smallest</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$font_spread</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #cc66cc;">0</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$font_spread</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$font_step</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$font_spread</span> <span style="color: #339933;">/</span> <span style="color: #000088;">$spread</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #666666; font-style: italic;">// SQL cannot save you; this is a second (potentially different) sort on a subset of data.</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'name'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$orderby</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #990000;">uksort</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$counts</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'strnatcasecmp'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">else</span>
		<span style="color: #990000;">asort</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$counts</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'DESC'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$order</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$counts</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array_reverse</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$counts</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$a</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$rel</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> <span style="color: #990000;">is_object</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$wp_rewrite</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #000088;">$wp_rewrite</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>using_permalinks<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> ? <span style="color: #0000ff;">' rel=&quot;tag&quot;'</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$counts</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$tag</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #000088;">$count</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$tag_id</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$tag_ids</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$tag</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$tag_link</span> <span style="color: #339933;">=</span> clean_url<span style="color: #009900;">&#40;</span><span style="color: #000088;">$tag_links</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$tag</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$tag</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">' '</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'&amp;nbsp;'</span><span style="color: #339933;">,</span> wp_specialchars<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$tag</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$a</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\t</span>&amp;lt;option value='<span style="color: #006699; font-weight: bold;">$tag_link</span>'&amp;gt;<span style="color: #006699; font-weight: bold;">$tag</span> (<span style="color: #006699; font-weight: bold;">$count</span>)&amp;lt;/option&amp;gt;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #b1b100;">switch</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$format</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
	<span style="color: #b1b100;">case</span> <span style="color: #0000ff;">'array'</span> <span style="color: #339933;">:</span>
		<span style="color: #000088;">$return</span> <span style="color: #339933;">=&amp;</span> <span style="color: #000088;">$a</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">case</span> <span style="color: #0000ff;">'list'</span> <span style="color: #339933;">:</span>
		<span style="color: #000088;">$return</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&amp;lt;ul class='wp-tag-cloud'&amp;gt;<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\t</span>&amp;lt;li&amp;gt;&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$return</span> <span style="color: #339933;">.=</span> <span style="color: #990000;">join</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&amp;lt;/li&amp;gt;<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\t</span>&amp;lt;li&amp;gt;&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$a</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$return</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot;&amp;lt;/li&amp;gt;<span style="color: #000099; font-weight: bold;">\n</span>&amp;lt;/ul&amp;gt;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">default</span> <span style="color: #339933;">:</span>
		<span style="color: #000088;">$return</span> <span style="color: #339933;">=</span> <span style="color: #990000;">join</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$a</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">endswitch</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">return</span> apply_filters<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'dropdown_generate_tag_cloud'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$return</span><span style="color: #339933;">,</span> <span style="color: #000088;">$tags</span><span style="color: #339933;">,</span> <span style="color: #000088;">$args</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<h3>步骤二：安放下拉列表框的代码，调用功能函数</h3>
<p>完成上面的步骤后，只需要在你需要安放下拉列表框的地方调用该功能函数即可（通常会放在siderbar.php文件中）。在其中放入如下代码</p>
<p>
<div class="wp_codebox"><table><tr id="p271141"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p271code141"><pre class="html" style="font-family:monospace;">&lt;select name=&quot;tag-dropdown&quot; onchange=&quot;document.location.href=this.options[this.selectedIndex].value;&quot;&gt;
	&lt;option value=&quot;#&quot;&gt;Liste d'auteurs&lt;/option&gt;
	&lt; ?php dropdown_tag_cloud('number=0&amp;order=asc'); ?&gt;
&lt;/select&gt;</pre></td></tr></table></div>

</p>
<p>那么这样子你就有了一个下拉列表的标签，这样阅读起来更加友好吧。当然自己可以针对该列表框使用css美化哦！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/display-tags-in-a-dropdown-list-box/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Wordpress:两个wp的小技巧，非常实用哦！</title>
		<link>http://www.ihiro.org/2-wp-tips</link>
		<comments>http://www.ihiro.org/2-wp-tips#comments</comments>
		<pubDate>Wed, 22 Jul 2009 09:06:23 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=265</guid>
		<description><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/welcome.png" alt="wp" title="wp" width="100" height="100" class="alignleft wp-image-266" />最近比较喜欢到处去逛一些国外的博客，经常会看到一些非常实用的技巧。选择了两个收集来的技巧与大家分享一下。</p>
<h3>一、 使用wp_enqueue_script()函数调用wp内部的js：</h3>
<p>1. 调用jQuery库; 2. 调用comment-reply.js.</p>
<h3>二、动态的版权年限.</h3>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/welcome.png" alt="wp" title="wp" width="150" height="150" class="alignright wp-image-266" /><br />
最近比较喜欢到处去逛一些国外的博客，经常会看到一些非常实用的技巧。选择了两个收集来的技巧与大家分享一下。</p>
<h3>一、 使用wp_enqueue_script()函数调用wp内部的js：</h3>
<p><strong>1. 调用jQuery库：</strong><br />
使用方法：在head标签间添加代码，如下：</p>

<div class="wp_codebox"><table><tr id="p265142"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p265code142"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php wp_enqueue_script<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;jquery&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>优点：主题模板会自动调用wp博客系统中的jQuery库，比自主加载的速度要快，而且随着wp系统的升级，主题的jQuery库的版本与系统的jQuery库版本相同；<br />
缺点：一直提倡将js文件在页面的底部引入（也就是放在footer.php文件中），这样会使页面显示的速度加快，但使用wp_enqueue_script()函数调用wp系统的jQuery库是不能放在footer.php中的，放在底部将调用不到wp系统的jQuery库。而且此时jQuery的$()简写方法将会失效，此时你可以使用原始的jQuery()方法或使用如下方法简写：</p>

<div class="wp_codebox"><table><tr id="p265143"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code" id="p265code143"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> $j <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">noConflict</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
$j<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
    $j<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#sidebar li a&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    	$j<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    		paddingLeft<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;20px&amp;&quot;</span>
    	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">400</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    	$j<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    		paddingLeft<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span>
    	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">400</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p><strong>2. 调用comment-reply.js：</strong><br />
使用方法：在head标签间添加代码，如下：</p>

<div class="wp_codebox"><table><tr id="p265144"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p265code144"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span>is_single<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
	wp_enqueue_script<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'comment-reply'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>因为comment-reply.js只有在单页的时候才会使用，所以需判断当前页是否为single，是则加载，否则无须加载。
</p>
<p style="color:#f00;">注意：wp_enqueue_script()必须放在&lt;?php wp_head(); ?&gt;之前。</p>
<h3>二、动态的版权年限：</h3>
<p>我们一般在输入版权信息的年限时，都是手动输入，但如使用date(&#8220;Y&#8221;);方法就可以根据服务器的时间显示版权年限，无需每年都要手动修改。如：</p>

<div class="wp_codebox"><table><tr id="p265145"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p265code145"><pre class="php" style="font-family:monospace;">Copyright <span style="color: #339933;">&amp;</span>copy<span style="color: #339933;">;</span> <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">echo</span> <span style="color: #990000;">date</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Y&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>
</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/2-wp-tips/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Wordpress:自定义单页模板的制作和配置</title>
		<link>http://www.ihiro.org/custom-and-configure-a-single-page-template</link>
		<comments>http://www.ihiro.org/custom-and-configure-a-single-page-template#comments</comments>
		<pubDate>Mon, 20 Jul 2009 09:05:40 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=245</guid>
		<description><![CDATA[<img src="http://edblog.net/wp-content/uploads/2006/12/wordpress.jpg" width="100" height="100" class="alignleft" />
<p>最近一直在利用闲暇的时间在做自己的第二个主题。在此过程中，重新认识到很多在第一个主题中没有用到的技术。可以说我的第一个主题（现在你们看到的）的结构是相对简单的，用了点css和js的代码实现起来非常容易。但我的第二个主题（CMS风格）的机构将会复杂点，加上我并不急着更换现在的主题，所以我不准备很快发布第二个主题。其实该主题还在建设中，服务器端的代码将近完成，css部分也完成了布局。现在就剩下局部细化和js控制。但我还是不准备很快就更换现在的主题，计划在下月的4号（博客上线1月半纪念）或19号（博客上线2月纪念）的时候再发布。</p>
<p>也正是因为在制作第二个模板，所以学到了很多知识，今天就和大家分享一下自定义单页模板制作和配置的过程。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://edblog.net/wp-content/uploads/2006/12/wordpress.jpg" width="150" height="150" class="alignright" /></p>
<h3>开篇语：</h3>
<p>最近一直在利用闲暇的时间在做自己的第二个主题。在此过程中，重新认识到很多在第一个主题中没有用到的技术。可以说我的第一个主题（现在你们看到的）的结构是相对简单的，用了点css和js的代码实现起来非常容易。但我的第二个主题（CMS风格）的机构将会复杂点，加上我并不急着更换现在的主题，所以我不准备很快发布第二个主题。其实该主题还在建设中，服务器端的代码将近完成，css部分也完成了布局。现在就剩下局部细化和js控制。但我还是不准备很快就更换现在的主题，计划在下月的4号（博客上线1月半纪念）或19号（博客上线2月纪念）的时候再发布。</p>
<p>也正是因为在制作第二个模板，所以学到了很多知识，今天就和大家分享一下自定义单页模板制作和配置的过程。</p>
<h3>举例：留言本</h3>
<p>你也许看到有很多的博客上有一个单页的留言本而感到羡慕吧，我也是。我一直想要有个单页的留言本，于是我在wp的官网或其他主题收集网站上下载主题包，查看源文件，但都没有发现我需要的内容。直到今天我知道了自定义单页模板的制作原理后才知道原来很多主题中都有着自定义单页的，只是我当时不知道如何去配置而已。</p>
<p><strong>步骤1：</strong>源文件的创建<br />
建立一个文件guestbook.php或可以另存comments.php为该文件，在文件的开始处添加模板注释（一定要添加，因为WP应通过该注释确认你是一个模板文件的，这和style.css文件的原理一样。）。注释代码如下：</p>

<div class="wp_codebox"><table><tr id="p245146"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p245code146"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #666666; font-style: italic;">/*
Template Name: guestbook
*/</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>删除comments.php文件中的多余代码，精简后的源代码如下（该源代码中部分标签是为了我的博客的css编写而添加的，你可以自主地删除和添加）：</p>

<div class="wp_codebox"><table><tr id="p245147"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</pre></td><td class="code" id="p245code147"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php get_header<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
     <span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;content&quot;</span><span style="color: #339933;">&gt;</span>     
&nbsp;
        <span style="color: #339933;">&lt;!--</span> 左侧 开始 <span style="color: #339933;">--&gt;</span>
        <span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;con-left&quot;</span><span style="color: #339933;">&gt;</span>
			<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;entry&quot;</span><span style="color: #339933;">&gt;</span>
                <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                    <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span>have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
            		<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post&quot;</span><span style="color: #339933;">&gt;</span>
                        <span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post-top&quot;</span><span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span>
                        <span style="color: #339933;">&lt;!--</span>
                        	你可以自主添加的其他内容
                         <span style="color: #339933;">--&gt;</span>
                        <span style="color: #339933;">&lt;</span>div<span style="color: #339933;">&gt;</span>    
                            <span style="color: #339933;">&lt;</span> ?php comments_template<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                        <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
                        <span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post-btm&quot;</span><span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span>
                	<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
                    <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">else</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                    <span style="color: #339933;">&lt;!--</span> 无文章提示 <span style="color: #339933;">--&gt;</span>
                    <span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post&quot;</span><span style="color: #339933;">&gt;</span>
                        <span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post-top&quot;</span><span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span>
                        <span style="color: #339933;">&lt;</span>h2 <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;aligncenter search&quot;</span><span style="color: #339933;">&gt;</span>抱歉<span style="color: #339933;">,</span>没有找到合适的页面<span style="color: #339933;">.&lt;/</span>h2<span style="color: #339933;">&gt;</span>
                        <span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;aligncenter&quot;</span><span style="color: #339933;">&gt;</span>请您<span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;&lt;?php echo get_settings('home'); ?&gt;&quot;</span><span style="color: #339933;">&gt;</span>返回首页<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$langblog</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span>或在搜索中查找您所需的信息<span style="color: #339933;">.</span>带来不便<span style="color: #339933;">,</span>敬请谅解<span style="color: #339933;">!&lt;/</span>div<span style="color: #339933;">&gt;</span>
                        <span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post-btm&quot;</span><span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span>
                    <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
                <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
            <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
            <span style="color: #339933;">&lt;!--</span> 今日更新 结束 <span style="color: #339933;">--&gt;</span>
        <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
        <span style="color: #339933;">&lt;!--</span> 左侧 结束 <span style="color: #339933;">--&gt;</span>
&nbsp;
        <span style="color: #339933;">&lt;!--</span> 右侧 开始 <span style="color: #339933;">--&gt;</span>
        <span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;con-right&quot;</span><span style="color: #339933;">&gt;</span>
            <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">include</span> <span style="color: #009900;">&#40;</span>TEMPLATEPATH <span style="color: #339933;">.</span> <span style="color: #0000ff;">'/sidebar.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
        <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
        <span style="color: #339933;">&lt;!--</span> 右侧 结束 <span style="color: #339933;">--&gt;</span>
     <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span> ?php get_footer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>css编写部分省略&#8230;..
</p>
<p><strong>步骤2：</strong>WP后台设置调用该模板<br />
登录到你的后台，页面-&gt;添加新页面，在标题栏中输入“留言本”，文本区域置空，选择右下角的属性框的模板下来列表为之前建立的模板guestbook，如图：<br />
<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/tpl.jpg" alt="tpl" title="tpl" width="281" height="307" class="aligncenter size-full wp-image-251" /><br />
然后点击发布即可。</p>
<p><strong>步骤3：</strong>确认导航栏块代码是否使用wp_list_pages(&#8221;);函数来输出所建立的页面。</p>
<p>根据上面的步骤你就可以完成自定义个性单页模板的制作和配置，大家可以发挥想象，通过修改源代码的方式创建相册单页啊、电影单页啊，等等。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/custom-and-configure-a-single-page-template/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>AdSense:Google AdSense申请通过，祝贺一下</title>
		<link>http://www.ihiro.org/congratulattion-of-google-adsense</link>
		<comments>http://www.ihiro.org/congratulattion-of-google-adsense#comments</comments>
		<pubDate>Sat, 18 Jul 2009 06:09:41 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[google AdSense]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=235</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/google-adsense-logo.gif" alt="google-adsense-logo" title="google-adsense-logo" width="100" height="100" class="alignleft size-full wp-image-924" />
<p>今天收到了Google AdSense小组的邮件通知，通知我的申请通过了认证。我以后也可以网赚了，小发一篇祝贺一下。</p>
<p>个人的博客怎么说也花费了一点的投入的，虽然有工资的投入，但还是想找点赚钱的活，不要多，可以维护空间和域名的花费就可以了。之前听别人说谷歌的AdSense账户要你注册的域名满半年的时间才可以通过，根据今天我的情况来看，说明他们的话是不正确的。我的域名也才注册了1个月而已，就通过了。我估计谷歌还是看网站内容。</p>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/google-adsense-logo.gif" alt="google-adsense-logo" title="google-adsense-logo" width="100" height="100" class="alignright size-full wp-image-924" />今天收到了Google AdSense小组的邮件通知，通知我的申请通过了认证。我以后也可以网赚了，小发一篇祝贺一下。</p>
<p>个人的博客怎么说也花费了一点的投入的，虽然有工资的投入，但还是想找点赚钱的活，不要多，可以维护空间和域名的花费就可以了。之前听别人说谷歌的AdSense账户要你注册的域名满半年的时间才可以通过，根据今天我的情况来看，说明他们的话是不正确的。我的域名也才注册了1个月而已，就通过了。我估计谷歌还是看网站内容。</p>
<p>话不多说，以后的文章中会陆续添加一些Google广告。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/congratulattion-of-google-adsense/feed</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>动漫:《火影》9大尾兽揭秘</title>
		<link>http://www.ihiro.org/secrets-of-9-tail</link>
		<comments>http://www.ihiro.org/secrets-of-9-tail#comments</comments>
		<pubDate>Fri, 17 Jul 2009 07:05:41 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[动漫]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=229</guid>
		<description><![CDATA[<img alt="" src="http://images.anime.xunlei.com/poster/s4/3/101955307bhBwG7MI8Z6OMxiACabqej3ARTOrQs4DMtiqg.jpg" title="火影忍者" class="alignleft" width="100" height="140" />
<p>又到了每周看火影的日子了，今天火影漫画已经更新到了445画，而本周火影动漫好像并没有更新。在本期的漫画封面揭秘了9大尾兽的资料，也预告着尾兽章节的到来。</p>
<p>我是在大学2年级的时候开始看火影动漫的，那时候学校宿舍没有接通互联网，是同寝室的舍友买了4张DVD碟片，他看完后借了给我看。我开始看的时候已经更新到了100集多点，利用周末和假日的时间才看完这100多集。后来陆续通过网络下载看到了200多集，觉得这部动漫业太漫长了，就停止了继续观看。到了大四，学习空了，时间多了，便又继续看动漫。而到了去年的下半年又开始看火影的漫画，很快的几天就将300多画看完了。就这样以后每周看一集动漫、看一画漫画。不知不觉中火影又更新了100多次了。时间啊，就如流水一样，无声无息的，一不留神，就过去了。</p>
<p>注：本文部分内容来是互联网搜索。</p>]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://images.anime.xunlei.com/poster/s4/3/101955307bhBwG7MI8Z6OMxiACabqej3ARTOrQs4DMtiqg.jpg" title="火影忍者" class="alignright" width="106" height="148" /></p>
<p>又到了每周看火影的日子了，今天火影漫画已经更新到了445画，而本周火影动漫好像并没有更新。在本期的漫画封面揭秘了9大尾兽的资料，也预告着尾兽章节的到来。</p>
<p>我是在大学2年级的时候开始看火影动漫的，那时候学校宿舍没有接通互联网，是同寝室的舍友买了4张DVD碟片，他看完后借了给我看。我开始看的时候已经更新到了100集多点，利用周末和假日的时间才看完这100多集。后来陆续通过网络下载看到了200多集，觉得这部动漫业太漫长了，就停止了继续观看。到了大四，学习空了，时间多了，便又继续看动漫。而到了去年的下半年又开始看火影的漫画，很快的几天就将300多画看完了。就这样以后每周看一集动漫、看一画漫画。不知不觉中火影又更新了100多次了。时间啊，就如流水一样，无声无息的，一不留神，就过去了。</p>
<p class="aligncenter"><a href="http://www.ihiro.org/blog/wp-content/uploads/2009/07/9snail.jpg"><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/9snail-300x210.jpg" alt="9snail" title="9snail" width="300" height="210" class="aligncenter size-medium wp-image-226" /></a>点击查看大图！</p>
<h3>一尾：守鹤 &#8212;- 我爱罗(砂忍村)</h3>
<p>神话传说：生长在奈良沙漠，受异界魔力影响，被风沙掩埋堆积而产生的狸猫怪物，以在沙漠中被风沙困死的死者怨灵而生，本体为一只狸猫，生性爱玩，喜欢用风沙掩埋自己眼前所有的东西。身上文身为紫罗兰色，文身的意思代表风神的图案。</p>
<p>上古9神兽战情况：参战5场，1胜3负1逃</p>
<p>胜：鼠蛟 | 负：雷兽、猫又、矶怃 | 逃：八娱大蛇</p>
<p>下场：被奈良和尚Oraga Nakashimu先以法术把守鹤瞬间变小，然后用 “法器 鹿角盅“封印在风之祭坛 </p>
<h3>二尾：猫又 &#8212;- 二位柚木人(云忍村)</h3>
<p>居住在日本极北的北海道死之森，黑色猫妖，有巨大黑天使翅膀，原为死神的宠物，后私自越过三界之门逃到人间界，以吸食死人灵魂为乐，当灵魂不够时就杀人然后取得死人怨灵，可以随意召唤死者的灵魂为自己战斗，并且从冥界召唤异界魔物。脑顶的第三只眼一旦张开死人的灵魂就会被其吞噬。</p>
<p>上古9神兽战： 自恃甚高，自以为天下无敌，与彭侯结盟进攻九尾狐，惨败，最后一刻被死神救走，幸免于难。参战3场，2胜一败</p>
<p>胜：貉、玑怃 | 负：九尾狐</p>
<p>下场：在九尾狐杀死其的一霎那灵魂被死神以异界召唤的形势救走，本体则被留在死之森的神社内，以死神封印所封住。</p>
<h3>三尾：矶怃 &#8212;- 矢仓(雾忍村)</h3>
<p>前额有勾状角突起的鲨鱼怪物，常年生活在 日本西部的四国岛 南斗-和川海域，住在日本海深处的须贺海沟底，每隔数月就会浮上海面透气，当矶怃浮上海面时，雷电交加，暴风雨大作，海上波涛汹涌，在日本海上的一切船只都会被其吞没作为食物。玑怃手下的一条跟班鱼，名为鲛机，平时贴在矶怃肚子上，负责清理残余物，并且从矶怃肚子里吸取食物，提炼大量查克拉，然后把查克拉送回矶怃体内。鲛机的力量在于其可以从食物里提取正常可提取查克拉5倍的查克拉，储存在鲛机体内的查克拉会在矶怃战斗的时候源源不断，送入矶怃体内。</p>
<p>上古神兽战： 参战4场， 2胜1负1逃</p>
<p>胜：貉、守鹤 | 负： 猫又 | 逃：八娱大蛇</p>
<p>下场： 横滨的渔民勇士 takuma muramasa 以牺牲2名村内勇士的情况下冒死靠近矶怃，将跟班鱼 鲛机 封印在取自水之祭坛的 “法器 鲨鳉壶“ 矶怃无法提取大量查克拉，精力耗尽时也被封印进去，鲨鳉壶则被封印在水之祭坛。</p>
<h3>四尾：鼠鲛 &#8212;- 老紫(岩忍村)</h3>
<p>常年居住在富士山火山里，受火山灰和火山化学反应的毒气影响，由鸡怪、灵鬼和蛇怪茂鬼合体而成， 鼠蛟所在的地方周围100里生气全无，草木枯萎，毒气蔓延，属于剧毒之物，每隔几年鼠蛟在富士山冬眠的时候， 鼾声所引起的剧毒气体会造成富士山火山爆发。</p>
<p>上古神兽战：参战4场， 3负1逃</p>
<p>负：守鹤、貉、彭侯 | 逃： 雷兽</p>
<p>下场： 被日本幕府第一妖术师 yamazaki ishiro 以 “法器 网月笼“ 封印在富士山底部，永远无法把毒气散发出山口以外。</p>
<h3>五尾：彭侯 &#8212;- 汉(岩忍村) </h3>
<p>吸收风雷水火土五个祭坛各自的部分力量而生的犬类怪物，五条尾巴可以放出五种元素的强力攻击，以破坏大自然而夺取大自然的元素力量精华为乐，在富士山顶击败鼠蛟后不可一世，在古战场击败强敌猫又后与猫又联手进攻九尾，然而九尾狐的查克拉量为无限，猫又，彭侯支持不住，彭侯虽然侥幸以风遁逃脱，然而重伤。</p>
<p>上古神兽战： 参战4场， 3 胜一负</p>
<p>胜： 鼠蛟、猫又、雷兽 | 负：九尾狐</p>
<p>下场：重伤后逃离日本岛，躲到九州岛的火山附近一棵树里疗伤，无人知道此树的具体位置 。</p>
<h3>六尾：雷兽 &#8212;- 泡沫(雾忍村)</h3>
<p>雷之祭坛从上古就开始供奉的雷神，受到八娱大蛇的邪恶力量所影响成为妖物，嗜血，六条闪电状尾巴可以放出无限伏的电压。喜爱在黑夜里释放强力雷电，天火，烧毁所有周围的东西。</p>
<p>上古神兽战 ：参战5场， 2 胜3负</p>
<p>胜：守鹤、鼠蛟 | 负：彭侯、八娱大蛇、九尾狐</p>
<p>下场： 被名忍者 sarutobi（就是猿飞） ryoka 以 “禁术 雷切“（日文上就是写的这俩汉字，不知道是不是卡卡西的雷切）把雷兽的雷切断，从而力量反逆回去，雷兽自己受到自己攻击，重伤，被sarutobi-sama以 “法器 隐雷圈“ 封印在雷之祭坛。</p>
<h3>七尾：貉 &#8212;- 芙(瀧忍村) </h3>
<p>最为狡猾的尾兽，体形不大，身高17米，善于伪装，很少在地面上露面，一般都在地下掘洞而行，喜欢伪装到猎物脚下，然后把猎物脚下的土破坏，从而使猎物直接掉进它的肚子。喜欢袭击商旅，每次上到地面上就会变身成各个形状，大小，样子，无法区分，在没有粘土的地方无法变身，一旦遇到危险就变颜色逃跑。</p>
<p>上古神兽战： 参战4场 1胜3逃</p>
<p>胜：鼠蛟 | 逃：猫又、矶怃、八娱大蛇</p>
<p>下场： 被勇士 ikkyo sojun 把其藏身的粘土洞烧焦，貉无法变化，被勇士们以 “法器 土零坛“ 封印在土之祭坛。</p>
<h3>八尾：八娱大蛇 &#8212;- 奇拉维(云忍村) </h3>
<p>日本恒古以来最强的S级魔物,八头八尾的巨大蛇类,拥有魔界的力量,黑暗力量的起源,邪恶的代表.八个头分别代表 &#8220;魂 鬼 恶 妖 魔 屠 灵 死&#8221;. 其本身的黑暗实力本来不如五尾彭侯的元素力量和二尾猫又的死亡力量,但是草稚家族的后人莽撞行事,动用本家族神器 草稚剑 强行击杀大蛇,结果大蛇把所有的黑暗力量凝聚在脖子上,使神器的剑锋也不能完全砍断,而大蛇尾兽的惊人回复力将草稚剑吸收入体内,化为自己的一股超强力量,能力一鼓超过猫又,彭侯两大强敌,之后,自大的大蛇自以为九尾并非他的对手,于是八娱大蛇有了可以控制三界的邪恶力量,它为了一统三界,散发强大的邪恶力量,揭开风 雷 水 火 土五个祭坛的封印,放出沙之守鹤,雷之雷兽,火之九尾狐, 水之矶怃, 土之貉5只神兽危害人界,邪恶的气息还惊醒了鼠蛟 猫又 彭侯 三只远住在关西的怪物,然而,8只怪物不肯听从八娱大蛇,引发了长达522年的上古九大神兽战,而大蛇虽然以其超强的魔力打败众多魔兽,却低估了9大神兽之首的九尾狐的实力,在消耗战中败北,赖以自豪的&#8221;神器 草稚剑&#8221;也被打开一个小缺口,可以说是完败,于是,八娱大蛇自我封印到草稚家族的世代仇敌&#8221;八神&#8221;一族的灵魂里,希望总有一天八神一族的天才后代能够重新唤醒自己的力量再与九尾狐决一胜负。</p>
<p>上古神兽战: 参加5场， 4胜1负</p>
<p>胜: 守鹤、矶怃、貉、雷兽 | 负: 9尾狐</p>
<p>下场:据传在八娱大蛇的力量在八神一族中传承,如果后裔中出现千年一次的天才,八娱大蛇的能力就可以在此后人面临生死关头的时候被解放出来,是毁灭一切的力量,八娱大蛇的真身一旦复出,在没有找到九尾狐决战之前,会杀死任何所看到的人,物,甚至神兽. 手动解放八尾力量的方法则是一种秘传解封印术,一旦八神一族的后人能够领会,就可以在任何时候解放八尾的强大力量。</p>
<h3>九尾：九尾狐 &#8212;- 漩涡鸣人(木叶忍者村)</h3>
<p>九尾狐是九大神兽最强的一个,其强大主要体现在查克拉上面,与别的尾兽提取查克拉的方式不同（一尾，七尾，四尾，六尾K食人制作查克拉，二尾，八尾利用异界力量，三尾利用跟班鱼鲛机，五尾吸收大自然精华），九尾不用借助外力制作查克拉，九尾体内的火神封印可以自动制作查克拉，使九尾的查克拉永远是无限，持久作战能力强。与八尾的大战中，虽然八尾与九尾的实力相差无几，但是在100多年的持久作战中，八尾的查克拉后续不上，而被九尾击败。九尾的九条尾巴拥有巨大的能量，一起转动可以引起飓风，配合浑身毛发可以像天空发射查克拉形成陨石雨的法术，再9大神兽战中屡屡击败强敌，较弱的尾兽如鼠蛟，守鹤等，根本不敢前来古战场。火之祭坛为五大祭坛之首，据传除了火之封印的查克拉产生器外尚有2种特有绝技。遭受八娱大蛇的黑暗波动影响后，九尾被从火之祭坛唤醒，九尾是最有人类智慧的灵兽，与八娱大蛇一样，并不像诸如守鹤，彭侯之类纯以杀戮为目标，九尾希望找出唤醒自己的魔物，并且找到并杀死上次封印自己的忍者们， 然而，八娱大蛇直到被击败都没有说出自己就是唤醒九尾的怪物。</p>
<p>上古神兽战：4战全胜</p>
<p>胜：猫又、彭侯、雷兽、八娱大蛇</p>
<p>下场：行踪不明，再没有被再次封印之前，九尾的目标就是找到八娱大蛇，或者杀死所有忍者直到找到封印他的忍者为止（然后，就被我们的四代给&#8230;.） </p>
<p></p>
<p><strong>我的疑问是：八尾是一个牛头，却叫八娱大蛇。实在&#8230;</strong></p>
<p>注：本文部分内容来是互联网搜索。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/secrets-of-9-tail/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Plugins:开发人员必备的Firefox插件（个人在用）</title>
		<link>http://www.ihiro.org/the-firefox-plugins-for-developers-required</link>
		<comments>http://www.ihiro.org/the-firefox-plugins-for-developers-required#comments</comments>
		<pubDate>Thu, 16 Jul 2009 01:53:05 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[软件下载]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=203</guid>
		<description><![CDATA[<img src="https://addons.mozilla.org/img/amo2009/illustrations/logo-collections-100x125.png" alt="" class="alignleft"/>
<p>昨晚在访问<a href="http://huaimao.org/" rel="external">huaimao</a>的博客，顺便帮他测试<a href="http://www.wopus.org/" rel="external">wopus</a>的空间时，我给出的相应时间精确到了小数点后3位，他就奇怪地问我，怎么我给的时间那么精确呢，我便告诉他说我安装了<a href="https://addons.mozilla.org/zh-CN/firefox/addon/5369" rel="external">YSlow</a>插件，安装后会实时地在浏览器的右下角显示加载时间。也正是他这一问，才有了一篇文章，不为别的，只是分享我在用的火狐插件而已！</p>
<h3>1. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/60" rel="external">Web Developer</a></h3>
<p>这个的功能我就不多少了，相信开发人员都知道它是干啥的；</p>
<p>...</p>
<h3>8. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/5369" rel="external">YSlow</a></h3>
<p>由Yahoo公司开发，它也是Firebug的一个插件，主要提供给开发者测试加载速度、http请求次数，可以为更好地优化网站加载速度提高很好的建议；</p>
<p>...</p>]]></description>
			<content:encoded><![CDATA[<p>昨晚在访问<a href="http://huaimao.org/" rel="external">huaimao</a>的博客，顺便帮他测试<a href="http://www.wopus.org/" rel="external">wopus</a>的空间时，我给出的相应时间精确到了小数点后3位，他就奇怪地问我，怎么我给的时间那么精确呢，我便告诉他说我安装了<a href="https://addons.mozilla.org/zh-CN/firefox/addon/5369" rel="external">YSlow</a>插件，安装后会实时地在浏览器的右下角显示加载时间。也正是他这一问，才有了一篇文章，不为别的，只是分享我在用的火狐插件而已！</p>
<p>以下都是我现在在用的插件：（排名不分先后）</p>
<h3>1. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/60" rel="external">Web Developer</a></h3>
<p>这个的功能我就不多少了，相信开发人员都知道它是干啥的；</p>
<h3>2. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/2104" rel="external">CSSViewer</a></h3>
<p>非常容易地查看别人网站的css，在开发过程中，查看自己编写的css，有助于更好地掌握布局；</p>
<h3>3. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/1843" rel="external">Firebug</a></h3>
<p>更多功能请查看我的文章：<a href="http://www.ihiro.org/10-reasons-why-the-use-of-firebug" rel="external">http://www.ihiro.org/10-reasons-why-the-use-of-firebug</a>;</p>
<h3>4. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/539" rel="external">MeasureIt</a></h3>
<p>一个用来测量尺寸的插件，安装后会出现在浏览器的左下角；</p>
<h3>5. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/271" rel="external">ColorZilla</a></h3>
<p>一个用来吸取浏览器中颜色的插件，吸取到的颜色有RGB模式和16进制的模式，安装后会出现在浏览器的左下角；</p>
<h3>6. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/655" rel="external">View Source Chart</a></h3>
<p>安装后出现在右键菜单中，用来查看浏览器解析后的源代码，条理清晰，不像直接查看源代码那么混乱；</p>
<h3>7. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/655" rel="external">View Source Chart</a></h3>
<p>安装后出现在右键菜单中，用来查看浏览器解析后的源代码，条理清晰，不像直接查看源代码那么混乱；</p>
<h3>8. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/5369" rel="external">YSlow</a></h3>
<p>由Yahoo公司开发，它也是Firebug的一个插件，主要提供给开发者测试加载速度、http请求次数，可以为更好地优化网站加载速度提高很好的建议；</p>
<p>安装后出现在右键菜单中，用来查看浏览器解析后的源代码，条理清晰，不像直接查看源代码那么混乱；</p>
<h3>9. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/3615" rel="external">Delicious Bookmarks</a></h3>
<p>网络共享书签插件。同步你收藏的书签；</p>
<h3>10. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/216" rel="external">JavaScript Debugger</a></h3>
<p>测试Javascript Bug的插件；</p>
<h3>11. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/2077" rel="external">Regular Expressions Tester</a></h3>
<p>用来测试所编写的正则表达式；</p>
<h3>12. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/2007" rel="external">Live PageRank</a></h3>
<p>安装后在浏览器的右下角实时显示当前网页的PR值；</p>
<h3>13. <a href="https://addons.mozilla.org/zh-CN/firefox/addon/5648" rel="external">FireShot</a></h3>
<p>当前页面截图，而且提供编辑、发送、打印的功能；</p>
<h3>14. <a href="http://www.cooliris.com/" rel="external">Colliris</a></h3>
<p>以3D墙的方式查看当前页面中的所有图片，该插件不在mozilla插件之列中；</p>
<h3>15. <a href="http://gears.google.com/" rel="external">Google Gears</a></h3>
<p>Wordpress后台推荐的加速插件，由Google公司开发。</p>
<p><strong>结束语：</strong>火狐插件很多，也很广，有适合的，也有不适合的，主要看个人使用的习惯。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/the-firefox-plugins-for-developers-required/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>jQuery:使用css+jQuery模拟键盘</title>
		<link>http://www.ihiro.org/keyboard-simulation-with-css-and-jquery</link>
		<comments>http://www.ihiro.org/keyboard-simulation-with-css-and-jquery#comments</comments>
		<pubDate>Tue, 14 Jul 2009 04:56:57 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[cases]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=189</guid>
		<description><![CDATA[<p>今天在阅读<a href="http://net.tutsplus.com/" rel="external">Nettuts+</a>的Feed时看到了这个模拟键盘的效果，很是喜欢。便查看的源码后，了解了实现的原理，自己重新编写了CSS和JS代码，现效果如下：</p><p>
<iframe src="http://www.ihiro.org/cases/keyboard/" width="460" height="290"></iframe>
</p><p>外部链接查看效果：<a href="http://www.ihiro.org/cases/keyboard/"  rel="external">Demo</a>,源代码下载：<a href="http://www.ihiro.org/cases/keyboard/keyboard.rar"  rel="external">Download</a></p>]]></description>
			<content:encoded><![CDATA[<p>今天在阅读<a href="http://net.tutsplus.com/" rel="external">Nettuts+</a>的Feed时看到了这个模拟键盘的效果，很是喜欢。便查看的源码后，了解了实现的原理，自己重新编写了CSS和JS代码，现效果如下：</p>
<p>
<iframe src="http://www.ihiro.org/cases/keyboard/" width="460" height="290"></iframe>
</p>
<p>外部链接查看效果：<a href="http://www.ihiro.org/cases/keyboard/"  rel="external">Demo</a>,源代码下载：<a href="http://www.ihiro.org/cases/keyboard/keyboard.rar"  rel="external">Download</a></p>
<h3>1.html代码</h3>

<div class="wp_codebox"><table><tr id="p189148"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
</pre></td><td class="code" id="p189code148"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;container&quot;&gt;
	&lt;textarea id=&quot;write&quot; rows=&quot;6&quot; cols=&quot;60&quot;&gt;&lt;/textarea&gt;
	&lt;ul id=&quot;keyboard&quot;&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;~&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;!&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;@&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;#&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;$&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;%&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;^&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;7&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;&amp;amp;&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;8&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;*&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;9&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;(&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;)&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;_&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;+&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;delete lastitem&quot;&gt;delete&lt;/li&gt;
		&lt;li class=&quot;tab&quot;&gt;tab&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;q&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;w&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;e&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;r&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;t&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;y&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;u&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;i&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;o&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;p&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;{&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;}&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol lastitem&quot;&gt;&lt;span class=&quot;off&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;|&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;capslock&quot;&gt;caps lock&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;a&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;s&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;d&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;f&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;g&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;h&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;j&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;k&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;l&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;:&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;enter lastitem&quot;&gt;enter&lt;/li&gt;
		&lt;li class=&quot;left-shift&quot;&gt;shift&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;z&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;x&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;c&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;v&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;b&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;n&lt;/li&gt;
		&lt;li class=&quot;letter&quot;&gt;m&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;&lt; &lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;&gt;&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;symbol&quot;&gt;&lt;span class=&quot;off&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;on&quot;&gt;?&lt;/span&gt;&lt;/li&gt;
		&lt;li class=&quot;right-shift lastitem&quot;&gt;shift&lt;/li&gt;
		&lt;li class=&quot;space lastitem&quot;&gt;space&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</pre></td></tr></table></div>

<h3>2. CSS代码：</h3>

<div class="wp_codebox"><table><tr id="p189149"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="code" id="p189code149"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> Tahoma<span style="color: #00AA00;">,</span> Geneva<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#eee</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#container</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">430px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #cc00cc;">#write</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">410px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">120px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> -moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> -webkit-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#f9f9f9</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">11px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
		<span style="color: #cc00cc;">#keyboard</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #cc00cc;">#keyboard</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">5px</span> <span style="color: #933;">5px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> -moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> -webkit-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#f9f9f9</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
			<span style="color: #6666ff;">.tab</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.capslock</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.left-shift</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.space</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #6666ff;">.lastitem</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #6666ff;">.delete</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">70px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #6666ff;">.tab</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">70px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #6666ff;">.capslock</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">75px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #6666ff;">.enter</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">40px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #6666ff;">.left-shift</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">80px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #6666ff;">.right-shift</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">65px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #6666ff;">.space</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">420px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
			<span style="color: #cc00cc;">#keyboard</span> li<span style="color: #3333ff;">:hover</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.hover</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span><span style="color: #993333;">pointer</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#e5e5e5</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
			<span style="color: #6666ff;">.on</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			.<span style="color: #993333;">uppercase</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-transform</span><span style="color: #00AA00;">:</span><span style="color: #993333;">uppercase</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>为了兼容IE6和IE7，需在head标签对间加上如下代码：</p>

<div class="wp_codebox"><table><tr id="p189150"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p189code150"><pre class="html" style="font-family:monospace;">&lt;!--[if lt ie 8]&gt;
    &lt;style type=&quot;text/css&quot;&gt;
    	#write { margin-left:-10px;}
    &lt;/style&gt;
&lt; ![endif]--&gt;</pre></td></tr></table></div>

<h3>3. JS代码：</h3>

<div class="wp_codebox"><table><tr id="p189151"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
</pre></td><td class="code" id="p189code151"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> $writeBox <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#write'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		shift <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
		capslock <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#keyboard li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'hover'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'hover'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> $this <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
			charater <span style="color: #339933;">=</span> $this.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// 一键两意</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'symbol'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> charater <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'span:visible'</span><span style="color: #339933;">,</span> $this<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Button detele </span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'delete'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> $writeBox.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$writeBox.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>html.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> html.<span style="color: #660066;">length</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Button tab</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'tab'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> charater <span style="color: #339933;">=</span> <span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\t</span>'</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Button capslock</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'capslock'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.letter'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggleClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'uppercase'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			capslock <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Button enter</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'enter'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> charater <span style="color: #339933;">=</span> <span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\n</span>'</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Button shift</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'left-shift'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> $this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'right-shift'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.letter'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggleClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'uppercase'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.symbol span'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggle</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			shift <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>shift <span style="color: #339933;">===</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			capslock <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Button space</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'space'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> charater <span style="color: #339933;">=</span> <span style="color: #3366CC;">' '</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// 转换为大写</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$this.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'uppercase'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> charater <span style="color: #339933;">=</span> charater.<span style="color: #660066;">toUpperCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// 输出所按的键值</span>
		$writeBox.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>$writeBox.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> charater<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>此效果由：<a href="http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/" rel="extrenal">http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/</a>中的效果改编而来。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/keyboard-simulation-with-css-and-jquery/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>jQuery:书籍展示效果</title>
		<link>http://www.ihiro.org/the-effection-of-books-show</link>
		<comments>http://www.ihiro.org/the-effection-of-books-show#comments</comments>
		<pubDate>Fri, 10 Jul 2009 03:52:23 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[cases]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[xml]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=177</guid>
		<description><![CDATA[<p>前段时间在国外的博客上看到这个jQuery的书籍展示效果，觉得很是不错，并下载了源码，自己重新编写了CSS和JS，效果:如下</p>
<iframe src="http://www.ihiro.org/cases/bookShow/" width="520px" height="210"></iframe>
<p>说明：因为在此页面中是通过使用iframe标签引入外部页面，加上显示页面的宽度有限，所以当鼠标移动到Info图标上时，部分内容被遮盖住，这时你可以通过外部链接查看：<a href="http://www.ihiro.org/cases/bookShow/" rel="external">Demo</a></p>
<p><a href="http://www.ihiro.org/cases/bookShow/bookShow.rar" rel="external">源代码下载</a></p>]]></description>
			<content:encoded><![CDATA[<p>前段时间在国外的博客上看到这个jQuery的书籍展示效果，觉得很是不错，并下载了源码，自己重新编写了CSS和JS，效果:如下</p>
<p><iframe src="http://www.ihiro.org/cases/bookShow/" width="520" height="210"></iframe></p>
<p>说明：因为在此页面中是通过使用iframe标签引入外部页面，加上显示页面的宽度有限，所以当鼠标移动到Info图标上时，部分内容被遮盖住，这时你可以通过外部链接查看：<a href="http://www.ihiro.org/cases/bookShow/" rel="external" >Demo</a></p>
<p>具体代码实现如下：（<a href="http://www.ihiro.org/cases/bookShow/bookShow.rar" rel="external">源代码下载</a>）</p>
<h3>1.html代码:</h3>

<div class="wp_codebox"><table><tr id="p177152"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code" id="p177code152"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;books&quot;&gt;
  &lt;div class=&quot;overclear buttons&quot;&gt; 
    &lt;a href=&quot;#&quot; class=&quot;prev&quot;&gt;&lt;img src=&quot;images/books_prev.gif&quot; alt=&quot;Previous&quot; /&gt;&lt;/a&gt;
    &lt;div class=&quot;showing&quot;&gt;&lt;!-- showing --&gt;&lt;/div&gt;
    &lt;a href=&quot;#&quot; class=&quot;next&quot;&gt;&lt;img src=&quot;images/books_next.gif&quot; alt=&quot;Next&quot; /&gt;&lt;/a&gt; 
  &lt;/div&gt;
  &lt;div class=&quot;overclear top&quot;&gt;
    &lt;img src=&quot;images/books_left_top.gif&quot; alt=&quot;&quot; class=&quot;float_left&quot; /&gt;
    &lt;img src=&quot;images/books_right_top.gif&quot; alt=&quot;&quot; class=&quot;float_right&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;inner&quot;&gt;
    &lt;ul class=&quot;overclear&quot;&gt;
      &lt;li class=&quot;loader&quot;&gt;&lt;!-- loader --&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;overclear btm&quot;&gt;
    &lt;img src=&quot;images/books_left_btm.gif&quot; alt=&quot;&quot; class=&quot;float_left&quot; /&gt;
    &lt;img src=&quot;images/books_right_btm.gif&quot; alt=&quot;&quot; class=&quot;float_right&quot; /&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre></td></tr></table></div>

<h3>2.CSS代码：</h3>

<div class="wp_codebox"><table><tr id="p177153"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
</pre></td><td class="code" id="p177code153"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span>/<span style="color: #933;">16px</span> Verdana<span style="color: #00AA00;">,</span> Geneva<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> hide-focus<span style="color: #00AA00;">:</span>expression<span style="color: #00AA00;">&#40;</span>this.hideFocus<span style="color: #00AA00;">=</span>true<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
ul <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#books</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.prev</span> img<span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.next</span> img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">40px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">30px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
.<span style="color: #000000; font-weight: bold;">top</span> img<span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.btm</span> img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.overclear</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">1%</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.float_left</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.float_right</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
.<span style="color: #000000; font-weight: bold;">top</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/books_top.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">repeat-x</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.btm</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/books_btm.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">repeat-x</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.buttons</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">32px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.prev</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.next</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.showing</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">60px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">80%</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #3333ff;">:Tahoma</span><span style="color: #00AA00;">,</span> Geneva<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-top</span><span style="color: #00AA00;">:</span><span style="color: #933;">4px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.inner</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">125px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/books_left_mid.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">repeat-y</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.inner</span> ul <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/books_right_mid.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">repeat-y</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">100%</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.loader</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/books_loader.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #933;">50%</span> <span style="color: #933;">50%</span><span style="color: #00AA00;">;;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">100%</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.book</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">90px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.book</span> <span style="color: #6666ff;">.info</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">107px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">88px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.book</span> <span style="color: #6666ff;">.thumb</span> img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.books-tooltip</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">z-index</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">2</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.books-tooltip</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">320px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.books-info</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">70px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>
为了兼容ie6，需在head标签内加上代码：</p>

<div class="wp_codebox"><table><tr id="p177154"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p177code154"><pre class="html" style="font-family:monospace;">&lt;!--[if lt IE 7]&gt;
&lt;style type=&quot;text/css&quot;&gt;
    .book { padding-right:12.5px;}
&lt;/style&gt;
&lt; ![end if]--&gt;</pre></td></tr></table></div>

</p>
<h3>3.xml代码：</h3>
<p>因为代码过长的原因，不在此贴出，请阅读外部链接的源代码：<a href="http://www.ihiro.org/cases/bookShow/books.xml" rel="external">XML</a></p>
<p><h3>4.jQuery代码：</h3>

<div class="wp_codebox"><table><tr id="p177155"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
</pre></td><td class="code" id="p177code155"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> perNum <span style="color: #339933;">=</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">;</span>		<span style="color: #006600; font-style: italic;">//每页显示的书本数目</span>
	<span style="color: #003366; font-weight: bold;">var</span> currentPage <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>		<span style="color: #006600; font-style: italic;">//默认显示第一页</span>
	<span style="color: #003366; font-weight: bold;">var</span> startPos <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>		<span style="color: #006600; font-style: italic;">//默认从第一本书开始显示</span>
	<span style="color: #003366; font-weight: bold;">var</span> endPos <span style="color: #339933;">=</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">;</span>			<span style="color: #006600; font-style: italic;">//显示4本书</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//从xml中获得数据，并与html结合</span>
	$.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'books.xml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div.inner ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> length <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'book'</span><span style="color: #339933;">,</span> data<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>	
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'book'</span><span style="color: #339933;">,</span> data<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> $book <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> link <span style="color: #339933;">=</span> $book.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> title <span style="color: #339933;">=</span> $book.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'title'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> author <span style="color: #339933;">=</span> $book.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'author'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> imageSrc <span style="color: #339933;">=</span> $book.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'src'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> total <span style="color: #339933;">=</span> $book.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'total'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> average_rating <span style="color: #339933;">=</span> $book.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'average_rating'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> <span style="color: #3366CC;">'&amp;lt;li class=&quot;book&quot;&amp;gt;'</span><span style="color: #339933;">;</span>
			html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;a class=&quot;info&quot; href=&quot;'</span> <span style="color: #339933;">+</span> link <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;&amp;gt;'</span><span style="color: #339933;">;</span>
			html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;img src=&quot;images/books_info.gif&quot; alt=&quot;more info&quot; /&amp;gt;'</span><span style="color: #339933;">;</span>
			html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;/a&amp;gt;'</span><span style="color: #339933;">;</span>			
			html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;a class=&quot;thumb&quot; href=&quot;'</span> <span style="color: #339933;">+</span> link <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; title=&quot;'</span> <span style="color: #339933;">+</span> title <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;&amp;gt;'</span><span style="color: #339933;">;</span>
			html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;img src=&quot;'</span> <span style="color: #339933;">+</span> imageSrc <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; alt=&quot;'</span> <span style="color: #339933;">+</span>  title <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; /&amp;gt;'</span><span style="color: #339933;">;</span>
			html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;/a&amp;gt;'</span><span style="color: #339933;">;</span>
			html <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;/li&amp;gt;'</span><span style="color: #339933;">;</span>
&nbsp;
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#books ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> bookToolTip <span style="color: #339933;">=</span> <span style="color: #3366CC;">'&amp;lt;div id=&quot;books_ToolTip'</span> <span style="color: #339933;">+</span> index <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; class=&quot;books-tooltip&quot;&amp;gt;'</span><span style="color: #339933;">;</span>
			bookToolTip <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;div class=&quot;books_pointer_left&quot;&amp;gt;&amp;lt;/div&amp;gt;'</span><span style="color: #339933;">;</span>
			bookToolTip <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;div class=&quot;books-info&quot;&amp;gt;'</span><span style="color: #339933;">;</span>
			bookToolTip <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;p&amp;gt;'</span> <span style="color: #339933;">+</span> title <span style="color: #339933;">+</span> <span style="color: #3366CC;">'(by&amp;lt;em&amp;gt;'</span> <span style="color: #339933;">+</span> author <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;lt;/em&amp;gt;)&amp;lt;/p&amp;gt;'</span><span style="color: #339933;">;</span>
			bookToolTip <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;p&amp;gt;&amp;lt;img src=&quot;images/stars_'</span> <span style="color: #339933;">+</span> average_rating <span style="color: #339933;">+</span> <span style="color: #3366CC;">'.gif&quot; /&amp;gt;('</span> <span style="color: #339933;">+</span> total <span style="color: #339933;">+</span> <span style="color: #3366CC;">')&amp;lt;/p&amp;gt;'</span><span style="color: #339933;">;</span>
			bookToolTip <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;/div&amp;gt;'</span><span style="color: #339933;">;</span>
			bookToolTip <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'&amp;lt;/div&amp;gt;'</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span>bookToolTip<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//显示每页的书本</span>
		<span style="color: #003366; font-weight: bold;">var</span> show <span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>start<span style="color: #339933;">,</span> end<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>end <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span> length<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				end <span style="color: #339933;">=</span> length<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div.showing'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&amp;lt;p&amp;gt;Viewing '</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>start<span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">' - '</span><span style="color: #339933;">+</span> end <span style="color: #339933;">+</span> <span style="color: #3366CC;">' of '</span> <span style="color: #339933;">+</span> length <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;lt;/p&amp;gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div.showing'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#books ul li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span>start<span style="color: #339933;">,</span> end<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>currentPage <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.prev'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.prev'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>currentPage <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span> length <span style="color: #339933;">/</span> perNum<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.next'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.next'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		show<span style="color: #009900;">&#40;</span>startPos<span style="color: #339933;">,</span> endPos<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//显示前一页</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.prev'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			currentPage <span style="color: #339933;">--;</span>
			startPos <span style="color: #339933;">=</span> perNum <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>currentPage <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			endPos <span style="color: #339933;">=</span> perNum <span style="color: #339933;">*</span> currentPage<span style="color: #339933;">;</span>
			show<span style="color: #009900;">&#40;</span>startPos<span style="color: #339933;">,</span> endPos<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//显示下一页</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.next'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			currentPage <span style="color: #339933;">++;</span>
			startPos <span style="color: #339933;">=</span> perNum <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>currentPage <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			endPos <span style="color: #339933;">=</span> perNum <span style="color: #339933;">*</span> currentPage<span style="color: #339933;">;</span>
			show<span style="color: #009900;">&#40;</span>startPos<span style="color: #339933;">,</span> endPos<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//鼠标移动到Info图标上时，显示书本的描述信息</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.info'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'opacity'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'0.9'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">//$('a.info').index(this)   获得该超链接的index</span>
			<span style="color: #003366; font-weight: bold;">var</span> offset <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
			<span style="color: #003366; font-weight: bold;">var</span> left <span style="color: #339933;">=</span> offset.<span style="color: #660066;">left</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">20</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> top <span style="color: #339933;">=</span> offset.<span style="color: #660066;">top</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">20</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#books_ToolTip'</span> <span style="color: #339933;">+</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a.info'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">index</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'opacity'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'0.7'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span> left<span style="color: #339933;">,</span> <span style="color: #3366CC;">'top'</span><span style="color: #339933;">:</span> top<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#books_ToolTip'</span> <span style="color: #339933;">+</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a.info'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">index</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>
</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/the-effection-of-books-show/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>电影：《新宿事件》观后感</title>
		<link>http://www.ihiro.org/film-xinsushijian-feedback</link>
		<comments>http://www.ihiro.org/film-xinsushijian-feedback#comments</comments>
		<pubDate>Wed, 08 Jul 2009 01:39:28 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[影评]]></category>
		<category><![CDATA[电影]]></category>
		<category><![CDATA[纪实片]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=144</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/xinsushijian_logo.gif" alt="xinsushijian_logo" title="xinsushijian_logo" width="99" height="99" class="alignleft size-full wp-image-921" />
<p>昨天终于下载到了《新宿事件》的DVD版了，着实等待了相当长的一段时间。利用了晚上的时间把它看完后，觉得心情一下子沉重起来。</p>
<p>电影的故事是发生在中国的90年代，那时候的中国经济落后，靠近边界的人都期望着偷渡到国外去打工，赚钱！成龙饰演的东北农车司机铁头为了找寻到日本打工的女朋友秀秀（徐熙蕾饰演）。乘着当时的偷渡船（也称“蛇船”），到了日本，与已经在日本一段时间的同乡阿杰（吴彦祖饰演）相见。</p>
<p>铁头、阿杰和一帮来自中国香港、大陆的偷渡客每天为了工作，到处做着廉价的黑工。他们做过垃圾场整理、下水道整理、餐厅洗碗等一系列的工作。也就是在做餐厅洗碗的工作时，远远地见到了自己苦苦找寻的女朋友秀秀。而现在的秀秀确实黑社会三合会副会长的妻子。愤怒之后的铁头觉得既然自己来到日本的目的已经“实现”，而且加上自己在偷渡来日本时与警察纠结的时候把身份证掉在了边界，已经回不去中国了，便开始和那些同乡们做起了偏门的“生意”。</p>]]></description>
			<content:encoded><![CDATA[<h3>我的话：</h3>
<p>昨天终于下载到了《新宿事件》的DVD版了，着实等待了相当长的一段时间。利用了晚上的时间把它看完后，觉得心情一下子沉重起来。<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/07/xinsushijian.gif" alt="xinsushijian" title="xinsushijian" width="201" height="282" class="alignright size-full wp-image-920" /></p>
<p>电影的故事是发生在中国的90年代，那时候的中国经济落后，靠近边界的人都期望着偷渡到国外去打工，赚钱！成龙饰演的东北农车司机铁头为了找寻到日本打工的女朋友秀秀（徐熙蕾饰演）。乘着当时的偷渡船（也称“蛇船”），到了日本，与已经在日本一段时间的同乡阿杰（吴彦祖饰演）相见。</p>
<p>铁头、阿杰和一帮来自中国香港、大陆的偷渡客每天为了工作，到处做着廉价的黑工。他们做过垃圾场整理、下水道整理、餐厅洗碗等一系列的工作。也就是在做餐厅洗碗的工作时，远远地见到了自己苦苦找寻的女朋友秀秀。而现在的秀秀确实黑社会三合会副会长的妻子。愤怒之后的铁头觉得既然自己来到日本的目的已经“实现”，而且加上自己在偷渡来日本时与警察纠结的时候把身份证掉在了边界，已经回不去中国了，便开始和那些同乡们做起了偏门的“生意”。</p>
<p>阿杰生性胆小，他最大的梦想就是有一个炒栗子的小吃车。因为大家发现阿杰在做“生意”时老是出问题。便筹了钱给阿杰买了辆炒栗子的车。从此阿杰就做起了炒栗子的小生意。但是因为一次帮“同事”看一台做了手脚的游戏机，被看场子的台南帮的老大高捷抓住。高捷为了逼问出做这个手脚的头头，刮划了阿杰的脸、砍断了阿杰的右手。</p>
<p>然而就是在餐厅洗碗时，三合会的副会长还是发现了自己妻子的目光所向，也记住了铁头。而铁头在去找台南帮报阿杰的断手之仇时，无意间救下了副会长。但事后铁头没要一点报酬。之后副会长他找到铁头，让他把自己的会长和一直竞争的组长给暗杀了，他就顺理成章地坐上了会长的位置。为了能有一个常住的证件和为了给兄弟们一个可以常住的地方，铁头答应了。他也做成功了。</p>
<p>成功后的铁头把地盘交给了那些兄弟们去管理，自己去做了买农车的生意。直到有一天一位被自己就过的警官找到自己，说自己的那些兄弟已经变了，他们在贩卖毒品。知道后的铁头回去看了后，发现自己的兄弟确实是变了，而且为了省财路不惜自相残杀。失望的铁头准备转而做警官的证人，帮警局取证逮捕现在的三合会的会长。然而还没有去做，会场一个叛变的手下却结合了台南帮、会长竞争对手的手下来报复他们。</p>
<p>故事的结尾是一场黑社会的混战，以一个悲剧的结果结束了本片。</p>
<p>整个影片反映了当时中国的穷困、日本的发达。中国偷渡者的艰辛生活、日本黑社会的猖狂。种族歧视。</p>
<h3>本片看点：</h3>
<ul>
<li>1. 不会武术的成龙；在该片中成龙饰演的铁头没有使用过一点武术；</li>
<li>2. 最颓废、最胆小、最朋克也最不帅的吴彦祖；吴彦祖在片中被刮花了脸、砍断了一只手，之后又是吸毒，把自己打扮的很朋克，是为了向别人显示自己不胆小，但发生拼杀时还是那么地胆小；</li>
<li>3. 本片结合了大陆、香港、台湾、日本四地的明星，可谓阵容庞大；</li>
<li>4. 历史写实。反映了当时中国的穷困和国外的发达。</li>
</ul>
<h3>影片下载地址：</h3>
<p><a href="ed2k://|file|%5B%E6%96%B0%E5%AE%BF%E4%BA%8B%E4%BB%B6%5D.Shinjuku.Incident.2009.DVDRip.XviD-BiEN-cd1.avi|732196864|da38ce9d7c37b6bde9c3ffcaa52c677e|h=ZGBPZRAV64QHOJHHICT3425PCXTSDXZK|/" rel="external">新宿事件CD1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E6%96%B0%E5%AE%BF%E4%BA%8B%E4%BB%B6%5D.Shinjuku.Incident.2009.DVDRip.XviD-BiEN-cd1.chs.srt|44715|dba42738a3c18fe74a92ea352d33e0b2|s=http://subs.verycd.com/dba42738a3c18fe74a92ea352d33e0b244715/subtitles.srt|/" rel="external">CD1字幕</a></p>
<p><a href="ed2k://|file|%5B%E6%96%B0%E5%AE%BF%E4%BA%8B%E4%BB%B6%5D.Shinjuku.Incident.2009.DVDRip.XviD-BiEN-cd2.avi|731758592|ff44a3ab73e6d0d34f60356f09769930|h=JN2JEPI3HGCGRAER7HD23USUBRRZZSK5|/" rel="external">新宿事件CD2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="ed2k://|file|%5B%E6%96%B0%E5%AE%BF%E4%BA%8B%E4%BB%B6%5D.Shinjuku.Incident.2009.DVDRip.XviD-BiEN-cd2.chs.srt|42966|62ad0525872e22a9259792ca8ec72810|s=http://subs.verycd.com/62ad0525872e22a9259792ca8ec7281042966/subtitles.srt|/“ rel="external">CD2字幕</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/film-xinsushijian-feedback/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>CSS:纯css的伪动态分页效果</title>
		<link>http://www.ihiro.org/pure-css-dynamic-page-effects</link>
		<comments>http://www.ihiro.org/pure-css-dynamic-page-effects#comments</comments>
		<pubDate>Mon, 06 Jul 2009 02:29:46 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[cases]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=139</guid>
		<description><![CDATA[<p>使用css编写的一个动态分页效果，通过使用opacity和filter实现透明效果，分页效果如下：</p>
<iframe src="http://www.ihiro.org/cases/pageNav/" width="450px" height="40px"></iframe>]]></description>
			<content:encoded><![CDATA[<p>使用css编写的一个动态分页效果，通过使用opacity和filter实现透明效果，分页效果如下：</p>
<p><iframe src="http://www.ihiro.org/cases/pageNav/" width="450px" height="40px"></iframe></p>
<h3>1.Html代码：</h3>

<div class="wp_codebox"><table><tr id="p139156"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="code" id="p139code156"><pre class="html" style="font-family:monospace;">&lt;ul id=&quot;pageNav&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;arrow&quot;&gt;&lt; &lt;&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;currPage&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;6&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;7&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;8&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;9&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;10&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;11&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;12&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;13&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;14&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;15&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;arrow&quot;&gt;&gt;&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre></td></tr></table></div>

<h3>2.css代码：</h3>

<div class="wp_codebox"><table><tr id="p139157"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code" id="p139code157"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">11px</span> Verdana<span style="color: #00AA00;">,</span> Geneva<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
ul <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#pageNav</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #cc00cc;">#pageNav</span> li a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">-1px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">pageNav-bg.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">repeat-x</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #cc00cc;">#pageNav</span> li a<span style="color: #6666ff;">.currPage</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #cc00cc;">#pageNav</span> li a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">4px</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">-2px</span> <span style="color: #933;">-10px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> opacity<span style="color: #00AA00;">:</span>.9<span style="color: #00AA00;">;</span> filter<span style="color: #00AA00;">:</span>Alpha<span style="color: #00AA00;">&#40;</span>opacity<span style="color: #00AA00;">=</span><span style="color: #cc66cc;">90</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #cc00cc;">#pageNav</span> li a<span style="color: #6666ff;">.arrow</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">static</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">-1px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>说明：本特效主要的要点在：a:hover时position:relative和margin:-2px -10px 0。为了兼容ie6，需要设置#pageNav li a { display:block; float:left;}</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/pure-css-dynamic-page-effects/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>jQuery:仿MSN网站的tab效果</title>
		<link>http://www.ihiro.org/the-effection-of-tab-like-msn</link>
		<comments>http://www.ihiro.org/the-effection-of-tab-like-msn#comments</comments>
		<pubDate>Thu, 02 Jul 2009 09:51:21 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[cases]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=134</guid>
		<description><![CDATA[今天不知怎的，一直在做tab的特效，看到MSN官网的tab效果不错，就花了一点点时间小做了一下，具体效果：如下
<iframe src="http://www.ihiro.org/cases/tabs-msn/" width="400px" height="280px" style="border:none; overflow:hidden; margin:5px 0;"></iframe>]]></description>
			<content:encoded><![CDATA[<p>今天不知怎的，一直在做tab的特效，看到MSN官网的tab效果不错，就花了一点点时间小做了一下，具体效果：如下<br />
<iframe src="http://www.ihiro.org/cases/tabs-msn/" width="400px" height="280px" style="border:none; overflow:hidden; margin:5px 0;"></iframe></p>
<h3>html代码：</h3>
<p>因为过长的原因，请有意的朋友通过此链接查看外部效果，右键查看源文件！<a href="http://www.ihiro.org/cases/tabs-msn/" rel="external">External Link</a></p>
<h3>css代码：</h3>

<div class="wp_codebox"><table><tr id="p134158"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="code" id="p134code158"><pre class="css" style="font-family:monospace;">       <span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span> <span style="color: #ff0000;">&quot;宋体&quot;</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#049</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">8px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#049</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">underline</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	ul <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">23px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">23px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #6666ff;">.popular</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">298px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ace</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
		<span style="color: #6666ff;">.tabs</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">1%</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.tabs</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ace</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-width</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f1f7fc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">84px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.tabs</span> li<span style="color: #6666ff;">.active</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-bottom-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.tabs</span> li<span style="color: #6666ff;">.tab-r</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">118px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
				<span style="color: #6666ff;">.tabs</span> li<span style="color: #6666ff;">.tab-r</span> a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#F06</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span>Georgia<span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
		<span style="color: #6666ff;">.list</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">7px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">7px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">35px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">popularlist.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
		<span style="color: #6666ff;">.weeklyPopular</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<h3>jQuery代码：</h3>

<div class="wp_codebox"><table><tr id="p134159"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code" id="p134code159"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'target'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'_blank'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.tabs li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mousemove</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//最右边的tab不进行任何操作							 </span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'tab-r'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//添加当前激活的状态</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">siblings</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'active'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'active'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//切换tab		</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'tab-0'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.list'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.dairyPopular'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
		        <span style="color: #006600; font-style: italic;">//也可以写成$(this).parent().nextAll('ul:eq(0)').show();,这样的好处是不必制定特定的class类</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'tab-1'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.list'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.weeklyPopular'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #006600; font-style: italic;">//也可以写成$(this).parent().nextAll('ul:eq(1)').show();,这样的好处是不必制定特定的class类</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>需要源码包的朋友可以给我留言，我会发到你的邮箱中！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/the-effection-of-tab-like-msn/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>jQuery：简单6行代码实现tab效果</title>
		<link>http://www.ihiro.org/a-simple-6-lines-of-code-to-achieve-the-tab-effecttion</link>
		<comments>http://www.ihiro.org/a-simple-6-lines-of-code-to-achieve-the-tab-effecttion#comments</comments>
		<pubDate>Thu, 02 Jul 2009 02:37:57 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[cases]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=120</guid>
		<description><![CDATA[简简单单的6行代码实现tab滑动门效果：如下
<iframe src="http://www.ihiro.org/cases/tabs/" width="420px" height="170px" style=" overflow:hidden; border:none; margin:10px 0 10px 0;"></iframe>]]></description>
			<content:encoded><![CDATA[<p>简简单单的6行代码实现tab滑动门效果：如下<br />
<iframe src="http://www.ihiro.org/cases/tabs/" width="420px" height="170px"></iframe></p>
<h3>html代码：</h3>

<div class="wp_codebox"><table><tr id="p120160"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code" id="p120code160"><pre class="html" style="font-family:monospace;">    &lt;div class=&quot;tabs&quot;&gt;
    	&lt;!-- 默认第一个tab为激活状态 --&gt;
        &lt;h3 class=&quot;active&quot;&gt;&lt;span&gt;热点新闻&lt;/span&gt;&lt;/h3&gt;
        &lt;div id=&quot;tab-01&quot;&gt;news&lt;/div&gt;
	    &lt;h3&gt;&lt;span&gt;娱乐新闻&lt;/span&gt;&lt;/h3&gt;
        &lt;div id=&quot;tab-02&quot;&gt;enteriment&lt;/div&gt;
        &lt;h3&gt;&lt;span&gt;就业形势&lt;/span&gt;&lt;/h3&gt;
        &lt;div id=&quot;tab-03&quot;&gt;jobs&lt;/div&gt;
    &lt;/div&gt;</pre></td></tr></table></div>

<h3>CSS代码：</h3>

<div class="wp_codebox"><table><tr id="p120161"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p120code161"><pre class="css" style="font-family:monospace;">    <span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
    body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span> Verdana<span style="color: #00AA00;">,</span> Geneva<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#404040</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #6666ff;">.tabs</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">360px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">1%</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">140px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.tabs</span> h3 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">z-index</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">2</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">pic.gif</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">95px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		h3<span style="color: #6666ff;">.active</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">-25px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #cc00cc;">#tab-01</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#tab-02</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#tab-03</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">24px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">338px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">93px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ace</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">z-index</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #cc00cc;">#tab-02</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#tab-03</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<h3>jQuery代码：</h3>

<div class="wp_codebox"><table><tr id="p120162"><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code" id="p120code162"><pre class="javascript" style="font-family:monospace;">    $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.tabs h3'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mouseover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.tabs div'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">siblings</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'h3'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'active'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
					  .<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'active'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>具体效果也可查看：<a href="http://www.ihiro.org/cases/tabs/" rel="external">效果查看</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/a-simple-6-lines-of-code-to-achieve-the-tab-effecttion/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>jQuery：仿迅雷首页热片滑动效果</title>
		<link>http://www.ihiro.org/the-effection-of-thunder-home-page</link>
		<comments>http://www.ihiro.org/the-effection-of-thunder-home-page#comments</comments>
		<pubDate>Tue, 30 Jun 2009 14:27:39 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[cases]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=109</guid>
		<description><![CDATA[一直都很喜欢迅雷网站的设计，前端时间迅雷更新的主页的css风格，没了以前的tab效果，多了点变幻滑动的效果。
今天花了点时间，模仿了一下当前迅雷主页上的热点电视、电影的滑动效果简简单单的6行代码实现tab滑动门效果：如下
<iframe src="http://www.ihiro.org/cases/movieshow/index.html" width="500" height="220"></iframe>]]></description>
			<content:encoded><![CDATA[<p>一直都很喜欢迅雷网站的设计，前端时间迅雷更新的主页的css风格，没了以前的tab效果，多了点变幻滑动的效果。<br />
今天花了点时间，模仿了一下当前迅雷主页上的热点电视、电影的滑动效果：如下<br />
<iframe src="http://www.ihiro.org/cases/movieshow/index.html" width="500" height="220"></iframe></p>
<h3>模仿说明：</h3>
<p>1. 因为时间的关系，没有花时间去解决ie6下图片透明的兼容；<br />
2. 在兼容各浏览器编写时花费的时间较多，实现了多浏览器的兼容性，除了图片透明的问题（时间关系）；<br />
3. 运用jQuery库对javascript进行编写；<br />
4. 采用css sprite技术处理背景定位；<br />
5. 计划实现自动播放效果。</p>
<h3>代码说明：</h3>
<p><strong>一. CSS代码：</strong></p>

<div class="wp_codebox"><table><tr id="p109163"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
</pre></td><td class="code" id="p109code163"><pre class="css" style="font-family:monospace;">html<span style="color: #00AA00;">,</span>body<span style="color: #00AA00;">,</span>
ul<span style="color: #00AA00;">,</span>ol<span style="color: #00AA00;">,</span>li<span style="color: #00AA00;">,</span>dl<span style="color: #00AA00;">,</span>dt<span style="color: #00AA00;">,</span>dd<span style="color: #00AA00;">,</span>
h1<span style="color: #00AA00;">,</span>h2<span style="color: #00AA00;">,</span>h3<span style="color: #00AA00;">,</span>h4<span style="color: #00AA00;">,</span>h5<span style="color: #00AA00;">,</span>h6<span style="color: #00AA00;">,</span>
form<span style="color: #00AA00;">,</span>input<span style="color: #00AA00;">,</span>blockquote<span style="color: #00AA00;">,</span>fieldset<span style="color: #00AA00;">,</span>pre<span style="color: #00AA00;">,</span>
div<span style="color: #00AA00;">,</span>p<span style="color: #00AA00;">,</span>span<span style="color: #00AA00;">,</span>label<span style="color: #00AA00;">,</span>em<span style="color: #00AA00;">,</span>strong <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#FFFFFF</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #993333;">normal</span> <span style="color: #933;">12px</span>/<span style="color: #933;">20px</span> Arial<span style="color: #00AA00;">,</span> Verdana<span style="color: #00AA00;">,</span> Lucida<span style="color: #00AA00;">,</span> Helvetica<span style="color: #00AA00;">,</span> simsun<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#313131</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
ul <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
&nbsp;
<span style="color: #6666ff;">.huanying</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">468px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">208px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #6666ff;">.huanying</span> h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">27px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">27px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/pic.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">13px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#193b5f</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">11px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #6666ff;">.huanying</span> .<span style="color: #000000; font-weight: bold;">content</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#CCDFF2</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-top-width</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">466px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">180px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #6666ff;">.movList</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.movList</span> ul <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">8px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">432px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.movList</span> ul<span style="color: #cc00cc;">#ul_hp_0</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.movList</span> ul<span style="color: #cc00cc;">#ul_hp_1</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.movList</span> ul<span style="color: #cc00cc;">#ul_hp_2</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.movList</span> ul li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">92px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">8px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
			<span style="color: #808080; font-style: italic;">/* ----- 封面 ----- */</span>
			<span style="color: #6666ff;">.movList</span> ul li a<span style="color: #6666ff;">.playpic</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">92px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">127px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.movList</span> ul li a<span style="color: #6666ff;">.playpic</span> img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#eae4d1</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.movList</span> ul li a<span style="color: #6666ff;">.playpic</span> em <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.movList</span> ul li a<span style="color: #6666ff;">.playpic</span><span style="color: #3333ff;">:hover </span>em <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">31px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">31px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/pic.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #933;">-95px</span> <span style="color: #933;">-28px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">48px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">30.5px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #808080; font-style: italic;">/* ----- 集数 ----- */</span>
			<span style="color: #6666ff;">.movList</span> ul li a<span style="color: #6666ff;">.playpic</span> span <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">86px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">15px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">15px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.movList</span> ul li a<span style="color: #6666ff;">.playpic</span> span<span style="color: #6666ff;">.bg</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/pic.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #933;">-130px</span> <span style="color: #933;">-28px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
			<span style="color: #808080; font-style: italic;">/* ----- 标题和简短描述 ----- */</span>
			<span style="color: #6666ff;">.movList</span> ul li p <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">17px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">17px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.movList</span> ul li p<span style="color: #6666ff;">.mov-title</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">82px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.movList</span> ul li p<span style="color: #6666ff;">.mov-title</span> a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#016a9f</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.movList</span> ul li p<span style="color: #6666ff;">.mov-title</span> a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">underline</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
			<span style="color: #6666ff;">.movList</span> ul li p<span style="color: #6666ff;">.mov-title</span> a<span style="color: #6666ff;">.playMov</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">16px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">16px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/pic.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #933;">-240px</span> <span style="color: #933;">-28px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
&nbsp;
<span style="color: #6666ff;">.list-pager</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">75px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">18px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">4px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">:</span><span style="color: #933;">11px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #6666ff;">.list-pager</span> a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">text-indent</span><span style="color: #00AA00;">:</span><span style="color: #933;">-9999px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
	<span style="color: #808080; font-style: italic;">/* ----- page-num ----- */</span>
	<span style="color: #6666ff;">.pager-num</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">33px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">18px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.pager-num</span> a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">6px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">6px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/pic.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #933;">-80px</span> <span style="color: #933;">-28px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">6px</span> <span style="color: #933;">5px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.pager-num</span> a<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-80px</span> <span style="color: #933;">-38px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #808080; font-style: italic;">/* ----- selected ----- */</span>
		<span style="color: #6666ff;">.currentNum</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/pic.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #933;">-80px</span> <span style="color: #933;">-38px</span>!important<span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
	<span style="color: #808080; font-style: italic;">/* ----- prev next ----- */</span>
	<span style="color: #6666ff;">.pager-op</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">36px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.pager-op</span> a <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">18px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">18px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/pic.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.pager-op</span> a<span style="color: #6666ff;">.page-up</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-40px</span> <span style="color: #933;">-28px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.pager-op</span> a<span style="color: #6666ff;">.page-up</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">-28px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.pager-op</span> a<span style="color: #6666ff;">.page-down</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-17px</span> <span style="color: #933;">-28px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
		<span style="color: #6666ff;">.pager-op</span> a<span style="color: #6666ff;">.page-down</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-57px</span> <span style="color: #933;">-28px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p><strong>二. jQuery代码：</strong></p>

<div class="wp_codebox"><table><tr id="p109164"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
</pre></td><td class="code" id="p109code164"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*
 * 时间关系，未修复IE6下图像透明的问题。
 */</span>
&nbsp;
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//修复IE6的：hover</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.movList ul li a.playpic'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'em'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'block'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'em'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'none'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> lenght <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#div_hp_content ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">size</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// currId-&gt;当前显示页， clickId-&gt;点击页面的标记</span>
	<span style="color: #003366; font-weight: bold;">var</span> currId <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> clickId <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// 获得需滑动的整体对象</span>
	<span style="color: #003366; font-weight: bold;">var</span> $box <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#div_hp_content ul'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>currId <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		currId <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>currId <span style="color: #339933;">&gt;=</span> lenght <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		currId <span style="color: #339933;">=</span> lenght<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.pager-num a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//获得当前点击对象的id值</span>
		<span style="color: #003366; font-weight: bold;">var</span> index <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		checkIndex<span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//判断当前点击页数，若当前点击页数大于当前显示页，向左滑动</span>
		<span style="color: #006600; font-style: italic;">//若当前点击页数小于当前显示页，向右滑动</span>
		<span style="color: #006600; font-style: italic;">//否则不进行任何操作</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>clickId <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> currId<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$box.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>currId<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span><span style="color: #3366CC;">'-480px'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span>
						   .<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>clickId<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span><span style="color: #3366CC;">'10px'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>clickId <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> currId<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$box.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>currId<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span><span style="color: #3366CC;">'480px'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span>
						   .<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>clickId<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span><span style="color: #3366CC;">'10px'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//设置当前显示页标记等于点击的页数</span>
		currId <span style="color: #339933;">=</span> clickId<span style="color: #339933;">;</span>
		changeSelected<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//上一页</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.page-up'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>currId <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		$box.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>currId<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span><span style="color: #3366CC;">'480px'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span>
					   .<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>currId <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span><span style="color: #3366CC;">'10px'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		currId<span style="color: #339933;">--;</span>
		changeSelected<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//下一页</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.page-down'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>currId <span style="color: #339933;">&gt;=</span> lenght <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		$box.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>currId<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span><span style="color: #3366CC;">'-480px'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span>
					   .<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>currId <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">:</span><span style="color: #3366CC;">'10px'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		currId<span style="color: #339933;">++;</span>
		changeSelected<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//点击页数按钮检查index</span>
	<span style="color: #003366; font-weight: bold;">var</span> checkIndex <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">switch</span><span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'a_hp_0'</span><span style="color: #339933;">:</span>
			clickId <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'a_hp_1'</span><span style="color: #339933;">:</span>
			clickId <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'a_hp_2'</span><span style="color: #339933;">:</span>
			clickId <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//改变当前所选择的页数</span>
	<span style="color: #003366; font-weight: bold;">var</span> changeSelected <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.pager-num a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'currentNum'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>currId<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'currentNum'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<h3>题外话：</h3>
<p>呵呵，因为图片都是从迅雷网站上下载，有点小剽窃的感觉哦。不过，在这效果上有链接到迅雷相关电视、电影页面，也算给他做个小小的推广。大家就算扯平了吧。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/the-effection-of-thunder-home-page/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>怀念：迈克尔.杰克逊(Michael. Jackson)</title>
		<link>http://www.ihiro.org/remind-of-michael-jackson</link>
		<comments>http://www.ihiro.org/remind-of-michael-jackson#comments</comments>
		<pubDate>Fri, 26 Jun 2009 15:08:06 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[Michael. Jackson]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=104</guid>
		<description><![CDATA[<img alt="" src="http://www.jacksonaction.com/bad/badtour498.jpg" title="迈克尔.杰克逊" class="alignleft" width="100" height="150" />
<p>今天早晨打开电脑，一条新闻显示在我的电脑屏幕上。Michael. Jackson，一位伟大的流行乐天王离开了我们。就因为病魔的忽然降临。</p>
<p>说到迈克尔，其实我对他不是那么的熟悉。在没上大学之前，根本就不知道有这么一位人物的存在。这也难怪，迈克尔的辉煌年代是在18-19世纪，那时的我还是一个孩子。我真正地知道迈克尔是在大学的时候，那时候喜欢嘻哈，喜欢音乐，看mv是看到迈克尔的舞蹈，惊为天人！</p>
<p>现在迈克尔已经离我们而去，在他有生的50年间，经历了很多。作为后来人，我不会对其做出任何的评价。现在的我只对他报以怀念，因为他是一位那么杰出和创世纪的人物。“人死不能复生”、“人死为大”，这些都是中国的老话。我们现在应该是尊重他的离去，怀念他！</p>]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://www.jacksonaction.com/bad/badtour498.jpg" title="迈克尔.杰克逊" class="aligncenter" /></p>
<p>今天早晨打开电脑，一条新闻显示在我的电脑屏幕上。Michael. Jackson，一位伟大的流行乐天王离开了我们。就因为病魔的忽然降临。</p>
<p>说到迈克尔，其实我对他不是那么的熟悉。在没上大学之前，根本就不知道有这么一位人物的存在。这也难怪，迈克尔的辉煌年代是在18-19世纪，那时的我还是一个孩子。我真正地知道迈克尔是在大学的时候，那时候喜欢嘻哈，喜欢音乐，看mv是看到迈克尔的舞蹈，惊为天人！</p>
<p>现在迈克尔已经离我们而去，在他有生的50年间，经历了很多。作为后来人，我不会对其做出任何的评价。现在的我只对他报以怀念，因为他是一位那么杰出和创世纪的人物。“人死不能复生”、“人死为大”，这些都是中国的老话。我们现在应该是尊重他的离去，怀念他！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/remind-of-michael-jackson/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>电视剧:《给我一支烟》</title>
		<link>http://www.ihiro.org/tv-play-give-me-a-cigarette</link>
		<comments>http://www.ihiro.org/tv-play-give-me-a-cigarette#comments</comments>
		<pubDate>Tue, 23 Jun 2009 09:06:53 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[影视分享]]></category>
		<category><![CDATA[情感]]></category>
		<category><![CDATA[电视剧]]></category>
		<category><![CDATA[都市]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=92</guid>
		<description><![CDATA[<img src="http://www.ihiro.org/blog/wp-content/uploads/2009/06/给我一支烟.gif" alt="给我一支烟" title="给我一支烟" width="100" height="100" class="alignleft size-full wp-image-723" />
<p>前一段时间，忽然想看一些都市情感的电视剧（或许是因为现在暂时生活在大城市的原因吧），于是我便想到了它：《给我一支烟》。开始的时候，是因为这个电视剧的名字吸引了我。但当我看完整个剧集后，发现故事是那么地吸引我，有点刻骨铭心的感觉。</p>
<p>男主角是一个IT销售白领，而女主角确实一个酒吧的陪酒女郎和舞女！他们的相认只是因为女孩在跳完舞后向男孩要了一支烟。但就是这个举动，使的男孩喜欢上了那个女孩。以后的感情多变，女孩的一个女性朋友（同样是酒吧的陪酒女郎）却因为女孩的关系认识了这个男孩，并在这之后喜欢上了这个男孩！</p>
<p>往往爱情都不是那么完美的，在以后的剧集中，他们之间发生了很多伤心、伤害以及痛苦的事情。但唯一不变的是感情！
男主角对爱情的执着，以及在爱情的道路上艰辛地付出。女主角因为自己的社会身份，对感情不敢有太多的期许。一直是将自己的内心感情封存起来。在剧中，他们经历了分分合合，经历了朋友的离间，经历了生死的考验。</p>
<p>故事的结尾很是艺术，男女主角并没有真正的在一起。只是女孩通过一通电话打给了男孩，只说了一句话：“给我一支烟”。</p>]]></description>
			<content:encoded><![CDATA[<h3>我的话：</h3>
<p>前一段时间，忽然想看一些都市情感的电视剧（或许是因为现在暂时生活在大城市的原因吧），于是我便想到了它：《给我一支烟》。开始的时候，是因为这个电视剧的名字吸引了我。但当我看完整个剧集后，发现故事是那么地吸引我，有点刻骨铭心的感觉。</p>
<p>男主角是一个IT销售白领，而女主角确实一个酒吧的陪酒女郎和舞女！他们的相认只是因为女孩在跳完舞后向男孩要了一支烟。但就是这个举动，使的男孩喜欢上了那个女孩。以后的感情多变，女孩的一个女性朋友（同样是酒吧的陪酒女郎）却因为女孩的关系认识了这个男孩，并在这之后喜欢上了这个男孩！</p>
<p>往往爱情都不是那么完美的，在以后的剧集中，他们之间发生了很多伤心、伤害以及痛苦的事情。但唯一不变的是感情！<br />
男主角对爱情的执着，以及在爱情的道路上艰辛地付出。女主角因为自己的社会身份，对感情不敢有太多的期许。一直是将自己的内心感情封存起来。在剧中，他们经历了分分合合，经历了朋友的离间，经历了生死的考验。</p>
<p>故事的结尾很是艺术，男女主角并没有真正的在一起。只是女孩通过一通电话打给了男孩，只说了一句话：“给我一支烟”。</p>
<p><strong>我的描述不足以表述出这部片子的故事，有喜欢的朋友可以去看看。</strong></p>
<h3>电视介绍：</h3>
<p><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/06/给我一支烟.jpg" alt="给我一支烟" title="给我一支烟" width="181" height="277" class="alignright size-full wp-image-724" /><br />
【剧名】：给我一支烟<br />
【语言】：国语<br />
【字幕】：中文<br />
【集数】：21<br />
【导演】：赵宝刚<br />
【编剧】：耿旭红<br />
【主演】：张　铎　饰　李海涛<br />
　　　　　张歆艺　饰　叶　子<br />
　　　　　隋俊波　饰　小　玉<br />
　　　　　赵　蕾　饰　肖　琳<br />
　　　　　梁　静　饰　忆　婷</p>
<p>【人物简介】：</p>
<p>　　李海涛：IT业白领，健康阳光，身边有一帮疯狂的哥们，有大把的青春和闲钱可以挥霍。李海涛的气质与魅力也能迅速俘获女孩芳心，小玉也被深深吸引，叶子也不例外。<br />
　　叶子：自卑、敏感，有着被人惊为天人的美貌，在夜总会很多有钱人坐她的台，感情上曾经受过伤害，深深知道大众的道德观。在她的内心已不寄望爱情，她认为纯洁的爱情背后必然是和物质利益的平衡。<br />
　　小玉：街头小太妹。风骚、性格张扬，疯狂爱上李海涛。有时候容易走极端。找各种机会接近李海涛。散布流言，用卑劣的手段，抵毁叶子的人格。<br />
　　忆婷：性感的大姐，在夜总会含屈忍辱几年后带着一笔钱金盆洗手。帮男友高禅做玉石生意，倾其所有，高禅将钱财一卷而空不辞而别。<br />
　　小云：剧中最终唯一一个赢得幸福人生的女孩<br />
　　雪儿：洋气的卖雪茄女孩，她的理想是去法国学服装设计。倍受婚姻折磨的耿直被雪儿深深吸引。痛定思痛后，耿直决定和妻子离婚。</p>
<p>【简介】：</p>
<p>　　赵宝刚力作，当今网络小说点击率最高的作品，根据“美女变大树”同名小说改编，酒色财气、纸醉金迷，讲述你从来没有注意过的一群夜总会坐台小姐的生存状态和情感经历……</p>
<p>　　本剧题材有点灰色、不够阳光，故事里的酒色财气、纸醉金迷，所诉说的人物活色生香，命运的坎坷波折，可能你会疑惑甚至惊异，那是因为你从来没有注意过这些人的生活……</p>
<p>========================</p>
<p>　　李海涛是一名白领精英，在一次与朋友的聚会时，邂逅了美丽的叶子，并深深的爱上了她。叶子身边追求者众多，许多人都希望拥有她，但叶子曾经受过情感的伤害，极为敏感、脆弱，不肯轻易付出感情。</p>
<p>　　李海涛用自己真诚而独特的方式打动了叶子。就在叶子一点点接纳李海涛的同时，叶子的朋友小玉也疯狂的爱上了李海涛。为了得到心爱的人，小玉想方设法破坏叶子和李海涛，并找了各种机会接近李海涛。由于叶子的敏感和小玉的破坏，叶子和海涛的爱情充满矛盾和纠葛，李海涛甚至因此丢了工作，但海涛心里始终只有叶子。</p>
<p>　　小玉无法忍受被李海涛冷落，她偏执的认为是叶子抢走了自己的爱情，非常嫉恨，不断制造事端，想以此抢回幸福，甚至还找人伤害叶子，幸被李海涛及时制止，小玉因涉嫌伤害，被判入狱。叶子终于敞开心扉，完全接纳了李海涛，两人开始了幸福的爱情之旅，李海涛也找到了一份更好的工作。</p>
<p>　　李海涛在公司表现出色，同事肖琳怦然心动。肖琳是个温柔、明媚、简单、快乐的女孩，有理想，有追求，一直以来生活中充满阳光雨露。肖琳借加班邀请海涛看电影，海涛不便拒绝，看完电影后告知肖琳自己已有女友，肖琳失望之极。</p>
<p>　　叶子在海涛公司遇见肖琳，敏感的她感觉到自己和肖琳的差距，觉得肖琳才是海涛合适的伴侣。随后叶子在海涛衣袋里发现电影票，陷入了无端猜忌和痛苦中。因为恐惧失去，最后选择放弃，叶子悄然出走。李海涛苦苦寻找，终于打听到叶子的下落，她竟然嫁给新加坡商人ERIC。</p>
<p>　　李海涛无法承受这样的打击，一病不起，对一切都失去了信心。在他最痛苦的时刻，肖琳默默照顾陪伴，给予他最大的关爱，并为此不断推迟出国留学的日程，等待李海涛。李海涛终于被感动。在肖琳的抚慰下，李海涛渐渐回到正常的人生轨道，似乎把一切都忘了，准备与肖琳登记结婚。就在这时，叶子回到了深圳。</p>
<p>　　叶子原本以为离开海涛，嫁给谁都是一样，但叶子婚后时刻生活在极大的压抑和痛苦中。叶子发现与ERIC的婚姻是一个极大的错误，她无法面对ERIC的真挚，心里没有爱情，她一生都给不了ERIC真正的幸福和快乐。叶子不愿一错再错，决定离开ERIC。</p>
<p>　　海涛再一次见到叶子，这个让他魂牵梦绕的女人，沉积压抑许久的爱又迸发出来。他无法扼止自己的感情，无法欺骗自己的内心，无法放任幸福再一次从眼前溜走。可肖琳怎么办？在肖琳无私的爱面前，李海涛陷入了艰难的抉择。在与肖琳领结婚证那天，李海涛终于把他与叶子所发生的一切原原本本告诉肖琳，请肖琳抉择。肖琳痛苦万分，深思一夜之后，选择退出，黯然离开，去美国留学。</p>
<p>　　小玉出狱了，她仍然深爱着李海涛，仍然认为是叶子抢走了自己的爱。小玉继续破坏李海涛和叶子的爱情，散布流言，用卑劣的手段，诋毁叶子的人格，让李海涛误以为叶子背叛了自己，叶子无法忍受李海涛的怀疑，再一次出走。</p>
<p>　　李海涛明白真相时，才知道自己对叶子的伤害有多深，可是为时已晚。小玉用尽一切方法，都没有得到李海涛的爱情，异常痛苦，绝望之际，跳楼自杀。</p>
<p>　　有多少爱，就有多少痛。海涛在痛彻心扉的思念与悔恨中，有一天接到一个电话：“给我一支烟”，那是叶子对他说的第一句话。<br />
<img alt="" src="http://image2.sina.com.cn/ent/d/2006-07-26/U1343P28T3D1173790F326DT20060726165851.JPG" title="剧中的感情人物" class="aligncenter" width="400" height="300" /></p>
<h3>电视下载：</h3>
<p><a href="http://www.verycd.com/topics/148624/" rel="external">《给我一只烟》下载地址</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/tv-play-give-me-a-cigarette/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>6个选择虚拟主机的要点</title>
		<link>http://www.ihiro.org/6-points-for-selecting-the-virtual-host</link>
		<comments>http://www.ihiro.org/6-points-for-selecting-the-virtual-host#comments</comments>
		<pubDate>Mon, 22 Jun 2009 05:05:46 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[域名]]></category>
		<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[虚拟主机]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=83</guid>
		<description><![CDATA[<h3>如何购买虚拟主机</h3>
一、负载量;二、流量;三、链接数;
四、在线率;五、灵活度;六、网站功能]]></description>
			<content:encoded><![CDATA[<h3>虚拟主机简介</h3>
<p>虚拟主机（Virtual Host /Virtual Server）是使用特殊的软硬件技术，把一台计算机主机分成一台台&#8221;虚拟&#8221;的主机，每一台虚拟主机都具有独立的域名和IP地址（或共享的IP地址），具有完整的Internet服务器功能。在同一台硬件、同一个操作系统上，运行着为多个用户打开的不同的服务器程序，互不干扰；而各个用户拥有自己的一部分系统资源（IP地址、文件存储空间、内存、CPU时间等）。虚拟主机之间完全独立， 在外界看来， 每一台虚拟主机和一台独立的主机的表现完全一样。虚拟主机技术的出现，是对Internet技术的重大贡献，是广大Internet用户的福音。由于多台虚拟主机共享一台真实主机的资源，每个用户承受的硬件费用、网络维护费用、通信线路的费用均大幅度降低，Internet真正成为人人用得起的网络！</p>
<p>经过科学的计算和实际的统计测试，采用高性能的服务器硬件构成的虚拟主机，通过超高速的数据通道（美国系统以四条数据线路与硅谷的Internet骨干网相连）在为访问者服务时，可以达到非常高的数据传输速度；虚拟主机还支持最先进的技术如JAVA、CGI、数据库挂接等。由于用户不需负责机器硬件的维护、软件配置、网络监控、文件备份等工作，用户就不需要为这些工作头痛和花费金钱。</p>
<p>现在网上有些公司提供一些免费的虚拟主机服务，大部分、网页制作初学者者都不是很愿意花些钱去使用付费虚拟主机服务而转向去使用免费的虚拟主机，如果你只是想在短时间内使用，这个未免不是一个好的选择；如果你是想长期的让自己的网站发布于因特网，使用免费的虚拟主机服务并不是一个好的主意。天下没有免费的午餐，免费虚拟主机提供商虽然没有直接向你索取虚拟主机使用费用，但是他是通过间接手段来获取利润的，比如在你的网站上投放广告或者要求你给他做相应的宣传，但是他们不对提供给你的虚拟主机服务有任何承诺。</p>
<p>使用付费的虚拟主机服务有一个很好的保障，虚拟主机运行比较稳定。近几年随着网络的发展，虚拟主机的使用费用已经降低了不少。为了网站有个长足的发展，我个人建议大家使用付费的性能和服务稳定的虚拟主机。</p>
<h3>如何购买虚拟主机</h3>
<p>利用虚拟主机技术，可以把一台真正的主机分成许多“ 虚拟”的主机，它们之间完全独立，在外界看来，每一台虚拟主机和一台独立的主机完全一样。效果一样，但费用却大不一样，由于多用户共享一台真实主机的资源，每个用户承受的硬件费用、网络维护费用、通信线路费用均大幅度降低。所以，许多企业，尤其是小规模企业在建立网站时都采用这种方法，这样不仅大大节省了购买机器和租用专线的费用，同时也不必为使用和维护服务器的技术问题担心，更不必聘用专门的管理人员，因为这些事都由服务商来料理了。但在现实中，服务商为了尽可能盈利往往侵害了用户的利益，所以用户需要在选型时进行仔细考察，其中重点关注以下要点。</p>
<h3>一、负载量</h3>
<p>负载量远比空间容量重要，虽然虚拟主机的应用是多个用户分享一台独立服务器，但用户有必要向服务商了解，到底要有多少用户与自己分享同一台服务器资源。因为只有服务商在各个用户之间对所占资源作出公平的分配后，才能确实保证多数用户的实际利益。如果共享的用户太多、服务器超负载运行的话，必然会降低服务器的稳定性，降低CPU的处理能力，程序运行困难，使用户在访问网站时找不到页面、无法链接到数据库，甚至无法访问等严重故障。</p>
<p>一般来说，根据虚拟主机所提供的不同服务类别，一台服务器共享的用户少的有几个，多的也不应多过数百个用户数的限度。而有的服务器数量不够的服务商，为最大限度地利用手中有限的硬件资源，甚至会在一台服务器上放置几千个用户，其效果可想而之。因此我们要想获得具备“合理资源”保障的虚拟服务，就必须要注意服务商的实力。如该服务商使用了多少台服务器、对所选择的虚拟主机服务中用户负载量的“具体”承诺。因此最好在多方比较中选择那种规模大的网站托管服务商做合作伙伴。</p>
<h3>二、流量</h3>
<p>流量就是用户网站可能的访问数量，服务商同样是在让服务器资源公平分配的原则下，对每个用户网站的流量加以限制，但问题在于他们限制的程度。如果限制的值太小就会大大损害用户的利益，甚至可以这样认为，如果对流量数值给得很小，网站的存储空间给的再大也没什么用处，因为这会让用户网站的浏览速度特别慢。</p>
<p>一般而言，只要服务商提供的硬件资源比较充足就不会过于限制流量。而那些试图“充分”利用有限硬件设施、不能提供很多流量的服务商，为了能够吸引尽可能多的用户，就会采取只添加硬盘而不增置服务器这种以牺牲服务器稳定性作代价的手法，把相同类型的虚拟主机空间容量调高几十兆，借此标榜其“超大”优势。</p>
<h3>三、链接数</h3>
<p>链接数是指在一瞬间能同时接受申请进而打开网站页面的访问人数，链接数值的大小直接关系到虚拟主机上用户网站的登录访问水平。如果将链接数限制得太少，那么能同时访问用户网站的人数就很受限制，用户网页就会出现让访客等待时间过长等不正常情况，一般对链接数的支持标准不会作指标性限定。但某些小服务商为能方便地监控用户，迫使其选用高价格档次的虚拟服务类型，还会对链接数做硬性数值划分，因此用户选购时需要特别留意。</p>
<h3>四、在线率</h3>
<p>既然搭建了网站就应永远使它保持运行状态，以保证来访者能随时登录。这原是顺理成章的要求，国外的虚拟主机提供商都普遍对其用户网站的在线率做出承诺。但在国内只有少数服务商明确承诺保证用户网站的在线率，大多数服务商因为受到带宽、硬件设备能力和技术管理能力的限制，很容易产生宕机问题，所以不能或者说不愿就此问题作公开“量化”的保证。</p>
<h3>五、灵活度</h3>
<p>灵活度就是服务提供商是否能为用户提供经济、方便的服务选择。有两点值得用户特别关注：一是能否自己决定为网站空间容量增加额度;另一个是能否用同样的价格使用不同的操作系统平台。因为这两个问题都与用户的利益直接相关，一旦用户的网站发展到原有的空间容量接近饱和时，用户就必须再增加配置才行。但问题是，不少服务商为牟取高额利益，一般不允许用户十兆、二十兆地增加少量空间，而是只允许上百兆标准的增加，变相地强迫用户升级，这样就会让用户多花很多钱去购买那些根本用不上的富裕资源。</p>
<p>而操作系统能否自由选择也是这样，有的用户习惯使用Unix平台，有的则擅长使用Windows NT做网站平台，但有些厂商却会根据这种使用上的差别把同一类型的网站服务区分成价格上的不同档次。所以希望用户在购买前，也要“货比三家”。</p>
<h3>六、网站功能</h3>
<p>对很多刚刚接触网络的企业和学校来说，如果服务商所提供的网站管理界面不是那么简单、易用，功能也不那么齐备的话，将来就很难顺利地操作使用网站。所以应该注意，服务提供商是否为用户的网站提供了像自动生成网页模块、FrontPage扩展等功能，这样能免去自己做复杂操作的麻烦。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/6-points-for-selecting-the-virtual-host/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>简谈新窗口打开超链接的技巧</title>
		<link>http://www.ihiro.org/a-simple-talk-about-the-hyperlink-to-open-a-new-window-techniques</link>
		<comments>http://www.ihiro.org/a-simple-talk-about-the-hyperlink-to-open-a-new-window-techniques#comments</comments>
		<pubDate>Fri, 19 Jun 2009 16:09:07 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[前端工程]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[技巧]]></category>

		<guid isPermaLink="false">http://www.ihiro.org/?p=75</guid>
		<description><![CDATA[超链接跳转常用在友情链接中，或链接到其他网站，为了可以把你的访问者继续留在自己的主页而使用的一个技巧。现在我就要说说常用的几种跳转技巧：
1.使用html标签的target属性；
2.使用Javascript代码。
]]></description>
			<content:encoded><![CDATA[<p>超链接跳转常用在友情链接中，或链接到其他网站，为了可以把你的访问者继续留在自己的主页而使用的一个技巧。现在我就要说说常用的几种跳转技巧：</p>
<h3>1.使用html标签的target属性：</h3>
<p>该方法恐怕是大家使用最多的方法，也是所有web工具所默认的。只需在链接a标签中加入属性target属性即可：如下</p>

<div class="wp_codebox"><table><tr id="p75165"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p75code165"><pre class="html" style="font-family:monospace;">&lt;a href=&quot;http://www.ihiro.org/ title=&quot;Hiro's Blog&quot; target=&quot;_blank&quot;&gt;www.ihiro.org&lt;/a&gt;</pre></td></tr></table></div>

<p>在web标准流行的当代，也许大家已经发现，该方法不能通过W3C的验证。</p>
<h3>2.使用Javascript代码:</h3>
<p>在a标签中加入rel=“external”属性:如下</p>

<div class="wp_codebox"><table><tr id="p75166"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p75code166"><pre class="html" style="font-family:monospace;">&lt;a href=&quot;http://www.ihiro.org/ title=&quot;Hiro's Blog&quot; rel=&quot;external&quot;&gt;www.ihiro.org&lt;/a&gt;</pre></td></tr></table></div>

<p>运用jQuery框架，在页面中导入js文件，编写代码：如下</p>

<div class="wp_codebox"><table><tr id="p75167"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p75code167"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a[rel*=external]'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'target'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'_blank'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>该方法好处是欺骗了浏览器，可以通过W3C的验证。</p>
<h3>附加技巧：</h3>
<p>在一列友情链接都需要跳转时，我们不可能为每个a标签都添加rel=“external”属性.这是可以使用类或id的方法：如下</p>

<div class="wp_codebox"><table><tr id="p75168"><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code" id="p75code168"><pre class="html" style="font-family:monospace;">&lt;ul class=&quot;external&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/ title=&quot;Hiro's Blog&quot;&gt;www.ihiro.org&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/ title=&quot;Hiro's Blog&quot;&gt;www.ihiro.org&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/ title=&quot;Hiro's Blog&quot;&gt;www.ihiro.org&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;http://www.ihiro.org/ title=&quot;Hiro's Blog&quot;&gt;www.ihiro.org&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;</pre></td></tr></table></div>

<p>jQuery代码：如下</p>

<div class="wp_codebox"><table><tr id="p75169"><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code" id="p75code169"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul.external li a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'target'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'_blank'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>这样这个ul列表中的所有友情链接都可以实现页面跳转了。</p>
<h3>总结：</h3>
<p>当然你也可以不使用jQuery框架，直接使用普通的javascript编写也可以实现，但没有jQuery实现的如此优雅。上文中的external其实是可以随便命名的，自需要保持javascriprt中的名称相同即可。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/a-simple-talk-about-the-hyperlink-to-open-a-new-window-techniques/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>10个为什么使用Firebug的原因</title>
		<link>http://www.ihiro.org/10-reasons-why-the-use-of-firebug</link>
		<comments>http://www.ihiro.org/10-reasons-why-the-use-of-firebug#comments</comments>
		<pubDate>Fri, 19 Jun 2009 03:11:18 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://ihiro.org/?p=41</guid>
		<description><![CDATA[<a href="https://addons.mozilla.org/ro/firefox/addon/1843" rel="external">Firebug</a>是web开发人员使用最为广泛的工具之一，它是基于Firefox浏览器所开发的插件。在本文中，我将为你呈现10个Firebug足以吸引的特性。]]></description>
			<content:encoded><![CDATA[<p><a href="https://addons.mozilla.org/ro/firefox/addon/1843" rel="external">Firebug</a>是web开发人员使用最为广泛的工具之一，它是基于Firefox浏览器所开发的插件。在本文中，我将为你呈现10个Firebug足以吸引的特性。</p>
<h3>1. Console</h3>
<p>当你打开Firebug(无论你是单击状态栏或使用Ctrl+F12快捷键)后第一个你将会看到的是Console（控制台）界面。快速地浏览控制台后，你会发现它是一个替代版本的查错控制台（Ctrl+Shift+J）。通常的特性有二：</p>
<ol>
<li> 记录错误、警告、通知的日志；</li>
<li> 运行Javascript代码。</li>
</ol>
<p>但是Firebug扩展了Firefox的功能，所以Firebug可以做的更多：</p>
<ol>
<li> 记录Javascript、CSS、XML、XMLHttpRequest (AJAX) and Chrome (Firefox internals)的错误日志；</li>
<li> 在当前页面运行Javascript代码；</li>
<li> 将从外部引用的Javascript对象排列在控制台中。</li>
</ol>
<p>看一个例子。Html 代码如下：</p>

<div class="wp_codebox"><table><tr id="p41170"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</pre></td><td class="code" id="p41code170"><pre class="html" style="font-family:monospace;">&lt;html&gt;
    &lt;head&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
        console.time(1);
        console.log('the script section has started executing');
        console.warn('warning message');
        console.error('error message');
        console.info('info message');
        console.log(
            'finishing script execution\n',
            'execution took:'
        );
        console.timeEnd(1);
        &lt;/script&gt;
    &lt;/head&gt;
&lt;/html&gt;</pre></td></tr></table></div>

<p>代码运行后控制台将显示信息：（如图。点击查看大图）<a rel="lightbox" href="http://ihiro.org/blog/wp-content/uploads/2009/06/console.jpg"><img class="aligncenter size-medium wp-image-47" title="console" src="http://ihiro.org/blog/wp-content/uploads/2009/06/console-300x134.jpg" alt="console" width="300" height="134" /></a></p>
<h3>2. HTML</h3>
<p>第二个界面，也是大部分web开发人员花费时间和精力最多的一个界面，它被分割为对各板块，（如图。点击查看大图）<br />
<a rel="lightbox" href="http://ihiro.org/blog/wp-content/uploads/2009/06/html.jpg"><img class="aligncenter size-medium wp-image-52" title="html" src="http://ihiro.org/blog/wp-content/uploads/2009/06/html-300x146.jpg" alt="html" width="300" height="146" /></a></p>
<ol>
<li>该界面以收缩的树型呈现了当前页面的所有Html元素，鼠标移动到某个Html标签上时，在浏览器界面会用黄色的框框选中内容；</li>
<li>在该界面，可以分阶地选择Html元素，还可以进行一些其他的操作，如:
<ul>
<li>复制内联的HTML元素；</li>
<li>编写 XPath 表达式；</li>
<li>额外的事件观测器 （都记录在Console中）；</li>
<li>删除元素；</li>
<li>编辑元素和子节点；</li>
<li>在检查元素时，可以在DOM tab中移动元素</li>
</ul>
</li>
<li>该界面的主窗口主要用来浏览Html文档、快速地修改代码和定位错误代码（比如关闭一个div标签）。上下文菜单也提供了和第2部分讲的同样的功能；</li>
<li>在style界面中还呈现了计算后的样式表和当前页面的元素。修改样式和CSS继承的功能也是它的最有价值特性之一；</li>
<li>通过layout界面我们可以很容易地查看一个元素的盒子模型:（如图。点击查看大图） content size, padding, offsets, margins and borders.<a rel="lightbox" href="http://ihiro.org/blog/wp-content/uploads/2009/06/html_layout.jpg"><img class="aligncenter size-medium wp-image-53" title="html_layout" src="http://ihiro.org/blog/wp-content/uploads/2009/06/html_layout-300x145.jpg" alt="html_layout" width="300" height="145" /></a></li>
<li>在DOM界面会罗列出一个被选择元素、方法、以及属性的列表，供我们查看：（如图。点击查看大图）<a rel="lightbox" href="http://ihiro.org/blog/wp-content/uploads/2009/06/html_dom.jpg"><img class="aligncenter size-medium wp-image-55" title="html_dom" src="http://ihiro.org/blog/wp-content/uploads/2009/06/html_dom-300x148.jpg" alt="html_dom" width="300" height="148" /></a></li>
</ol>
<h3>3.CSS</h3>
<p>该界面与前面Html界面中的Style界面的主要区别是：在该界面你可以浏览没有经计算机计算过的styles：（如图。点击查看大图）<br />
<a rel="lightbox" href="http://ihiro.org/blog/wp-content/uploads/2009/06/css.jpg"><img class="aligncenter size-medium wp-image-61" title="css" src="http://ihiro.org/blog/wp-content/uploads/2009/06/css-300x146.jpg" alt="css" width="300" height="146" /></a></p>
<ol>
<li>如果你正在操作的页面包含多个样式表, 通过该界面我们可以选择各个样式表；</li>
<li>主区域将用于呈现CSS代码;</li>
<li>可以轻松地修改CSS样式；</li>
<li>可以轻松地取消CSS规则。</li>
</ol>
<h3>4. Script</h3>
<p>有时，当你在写Javascript代码，你必须让你的手脏。大多数时候，你会发现自己一直在使用Console控制台;只有在无法解决的情况下，你才会切换到Script界面。鉴于这些情况（这是必然发生的） ，让我们来看看这个界面，并开始熟悉它：（如图。点击查看大图）<a rel="lightbox" href="http://www.ihiro.org/blog/wp-content/uploads/2009/06/script.jpg"><img class="aligncenter size-medium wp-image-65" title="script" src="http://www.ihiro.org/blog/wp-content/uploads/2009/06/script-300x180.jpg" alt="script" width="300" height="180" /></a></p>
<ol>
<li>点击下拉按钮，我们可以选择所需的脚本文件；</li>
<li>调试功能: <em>continue</em>, <em>step in</em>, <em>step over</em> and <em>step out</em>. 它只有在代码执行到断点时才会停止；</li>
<li>在主窗口我们可以设置（或取消）断点，也可以查看Javascript代码；</li>
<li>和DOM界面相似，Sciprt界面的监控界面输出了一些对象方法以及在调试的代码中的参数；</li>
<li>在堆栈界面实时地显示函数；</li>
<li>在断点界面罗列出断点的列表，只有在这儿你才可以取消断点。</li>
</ol>
<h3>5. DOM</h3>
<p>DOM界面的功能和前面Html下的DOM功能一样，跳过说明。</p>
<h3>6. Net</h3>
<p>你是否好奇你的网页加载需要多久的时间，或则好奇那个请求占用了加载的大部分时间呢？那么你就可以通过Net界面查看这些细节：（如图。点击查看大图）<br />
<a href="http://www.ihiro.org/blog/wp-content/uploads/2009/06/net.jpg" rel="lightbox"><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/06/net-300x183.jpg" alt="net" title="net" width="300" height="183" class="aligncenter size-medium wp-image-66" /></a></p>
<ol>
<li>网页请求可以被它内部的过滤原则过滤；</li>
<li>每个请求的结果都罗列在这一界面。在请求清单的最后，我们看到的摘要信息：请求数量，大小，多少缓存和请求花费总时间；</li>
<li>更多细节可以被查看，如： HTTP标头，回应和缓存（和回应相同）。</li>
</ol>
<p><strong>性能测试</strong><br />
是否需要测试特殊的功能或循环？使用Firebug的“Timer”功能。</p>

<div class="wp_codebox"><table><tr id="p41171"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p41code171"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> TimeTracker<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>  
   console.<span style="color: #660066;">time</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;MyTimer&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
   <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>x<span style="color: #339933;">=</span><span style="color: #CC0000;">5000</span><span style="color: #339933;">;</span> x <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> x<span style="color: #339933;">--</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>  
   console.<span style="color: #660066;">timeEnd</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;MyTimer&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>只需要3步。开始时调用&#8221;console.time&#8221; 并传入一个特定参数。下一步，放如我们的代码。最后，调用“console.timeEnd”，并再次传入该特定参数。</p>
<h3>7. Reference</h3>
<p>这是Firebug的附加组件，由<a href="https://addons.mozilla.org/ro/firefox/addon/10273" rel="external">CodeBurner</a>提供的。通过这个面板，您可以快速访问您的HTML和CSS代码。（如图。点击查看大图）<br />
<a href="http://www.ihiro.org/blog/wp-content/uploads/2009/06/reference.jpg" rel="lightbox"><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/06/reference-300x160.jpg" alt="reference" title="reference" width="300" height="160" class="aligncenter size-medium wp-image-68" /></a></p>
<ol>
<li>搜索和过滤部分;</li>
<li>在面板中，搜索到的结果会堆叠起来;</li>
<li>兼容最新版本的主要浏览器。Chorme不属此列，但Chorme与Safari使用相同的浏览器引擎，即Webkit ，因此，如果Safari能兼容的话，Chorme也就可以兼容。 </li>
<li>如果你觉得在这个面板显示的信息不够的话，你可以通过访问链接查找更多的信息，如：例子，兼容更多的浏览器版本，描述信息等</li>
</ol>
<h3>8. PixelPerfect</h3>
<p>如果你曾经做过PSD分割，那么你就应该知道测量构图元素之间的间距是如何的耗时。<a href="https://addons.mozilla.org/ro/firefox/addon/7943" rel="external">PixelPerfect</a>证明了它在这方面的的能力。将它添加到你的附加组件里将帮助你完成完美切片。（如图。点击查看大图）<a href="http://www.ihiro.org/blog/wp-content/uploads/2009/06/pixelperfect.JPG" rel="lightbox"><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/06/pixelperfect-300x171.jpg" alt="pixelperfect" title="pixelperfect" width="300" height="171" class="aligncenter size-medium wp-image-70" /></a></p>
<ol>
<li>有了这个按钮，我们可以添加多个重叠图像到当前页面；</li>
<li> 图层列表，在这里我们应用或删除图层；</li>
<li>涂层设置。</li>
</ol>
<h3>9. YSlow</h3>
<p><a href="https://addons.mozilla.org/ro/firefox/addon/5369" rel="external">YSlow</a>是另一个很不错的Firebug附件，由Yahoo！开发。它通过一些列的测试后给出提高网页速度的建议。（如图。点击查看大图）<br />
<a href="http://www.ihiro.org/blog/wp-content/uploads/2009/06/yslow.JPG" rel="lightbox"><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/06/yslow-300x230.jpg" alt="yslow" title="yslow" width="300" height="230" class="aligncenter size-medium wp-image-71" /></a><br />
通过使用YSlow，我们可以盖上网站的整体性能。也可以很容易地发现实时问题，同时获得一系列的建议。<br />
<a href="http://www.ihiro.org/blog/wp-content/uploads/2009/06/yslow_statistics.JPG" rel="external"><img src="http://www.ihiro.org/blog/wp-content/uploads/2009/06/yslow_statistics-299x231.jpg" alt="yslow_statistics" title="yslow_statistics" width="299" height="231" class="aligncenter size-medium wp-image-72" /></a><br />
除了饼图统计，我们也可使用JSLint和Smush.it。</p>
<h3>10. FirePHP</h3>
<p>最后，最重要的Firebug附件就是<a href="https://addons.mozilla.org/ro/firefox/addon/6149" rel="external">FirePHP</a> 。有了这个插件，我们可以从我们的PHP代码透明地发送信息（警告，错误，日志，信息）到控制台面板。由FirePHP的网站提供的例子：</p>

<div class="wp_codebox"><table><tr id="p41172"><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code" id="p41code172"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php  
    FB<span style="color: #339933;">::</span><span style="color: #990000;">log</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Log message'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
    FB<span style="color: #339933;">::</span><span style="color: #004000;">info</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Info message'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
    FB<span style="color: #339933;">::</span><span style="color: #004000;">warn</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Warn message'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
    FB<span style="color: #339933;">::</span><span style="color: #004000;">error</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Error message'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<h3>结束语</h3>
<p>我希望这个关于Firebug面板/附件的列表会使您的web开发生活更容易，就像我使用它们一样。最后，我们大家都知道，错误是必然发生的，因此没有理由不正确地编写。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/10-reasons-why-the-use-of-firebug/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>收藏的Cheat Sheets链接</title>
		<link>http://www.ihiro.org/collections-of-cheat-sheets-links</link>
		<comments>http://www.ihiro.org/collections-of-cheat-sheets-links#comments</comments>
		<pubDate>Thu, 18 Jun 2009 10:02:53 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[书籍文档]]></category>
		<category><![CDATA[cheat sheets]]></category>

		<guid isPermaLink="false">http://ihiro.org/?p=36</guid>
		<description><![CDATA[不管你是否忘记css的某个属性或者语言的某个函数，cheat sheets可以方便你快速地查找你所需的信息。大部分的cheat sheets是.pdf或.png格式的，所以你可以将它们打印出来随时阅读。现在为你呈现一些个人在网络上收集来的cheat sheets的链接。]]></description>
			<content:encoded><![CDATA[<p>不管你是否忘记css的某个属性或者语言的某个函数，cheat sheets可以方便你快速地查找你所需的信息。大部分的cheat sheets是.pdf或.png格式的，所以你可以将它们打印出来随时阅读。现在为你呈现一些个人在网络上收集来的cheat sheets的链接。（因为空间大小有限，不能提供本站链接，只能提供外部链接！）更多的资料请访问：<a rel="external" href="http://techcheatsheets.com/">Here</a></p>
<p><strong>Actionscript</strong></p>
<ul class="external">
<li><a href="http://actionscriptcheatsheet.com/blog/quick-referencecheatsheet-for-actionscript-20/">Quick reference/Cheatsheet for ActionScript 2.0</a></li>
</ul>
<p><strong>Ajax</strong></p>
<ul class="external">
<li><a href="http://slash7.com/cheats/whats_ajax_cheatsheet.pdf">What’s Ajax? Cheat Sheet &#8211; PDF</a></li>
<li><a href="http://www.snook.ca/archives/javascript/prototype_disse/">Prototype Dissected &#8211; Cheat Sheet PNG</a></li>
<li><a href="http://slash7.com/cheats/scriptaculous_fx1.pdf">scriptaculous Combination Effects &#8211; Cheat Sheet &#8211; PDF</a></li>
</ul>
<p><strong>Apache</strong></p>
<ul class="external">
<li><a href="http://www.petefreitag.com/cheatsheets/apache/">Apache Cheat Sheet</a></li>
<li><a href="http://www.thejackol.com/htaccess-cheatsheet/">htaccess Cheatsheet</a></li>
<li><a href="http://www.addedbytes.com/mod_rewrite_cheat_sheet.png">mod_rewrite Cheat Sheet &#8211; PNG</a></li>
<li><a href="http://www.addedbytes.com/mod_rewrite_cheat_sheet.pdf">mod_rewrite Cheat Sheet &#8211; PDF</a></li>
</ul>
<p><strong>ASCII Character Codes</strong></p>
<ul class="external">
<li><a href="http://www.cookwood.com/html/extras/entities.html">Character Entity References in HTML 4 and XHTML 1.0</a></li>
<li><a href="http://www.addedbytes.com/characters_cheat_sheet.png">HTML Character Entities Cheat Sheet &#8211; PNG</a></li>
<li><a href="http://www.addedbytes.com/characters_cheat_sheet.pdf">HTML Character Entities Cheat Sheet &#8211; PDF</a></li>
<li><a href="http://www.chami.com/tips/internet/050798I.html">HTML special character reference</a></li>
<li><a href="http://tlt.its.psu.edu/suggestions/international/web/codehtml.html">HTML &#8211; Special Entity Codes</a></li>
<li><a href="http://www.yellowpipe.com/yis/tools/ASCII-HTML-Characters/index.php">Special ASCII HTML Character Codes</a></li>
<li><a href="http://www.digitalmediaminute.com/reference/entity/index.php">XHTML Character Entity Reference</a></li>
</ul>
<p><strong>ASP</strong></p>
<ul class="external">
<li><a href="http://www.addedbytes.com/asp_cheat_sheet.png">ASP / VBScript Cheat Sheet &#8211; PNG</a></li>
</ul>
<p><strong>C# and VB.NET</strong></p>
<ul class="external">
<li><a href="http://aspalliance.com/625">C# and VB.NET Comparison Cheat Sheet &#8211; PDF</a></li>
<li><a href="http://www.codeproject.com/dotnet/CheatSheetCastingNET.asp">Cheat Sheet &#8211; Casting in VB.NET and C#</a></li>
</ul>
<p><strong>CSS</strong></p>
<ul class="external">
<li><a href="http://www.veign.com/downloads/guides/qrg0007.pdf">CSS 2 &#8211; Quick Reference Guide &#8211; PDF</a></li>
<li><a href="http://www.addedbytes.com/css_cheat_sheet.pdf">CSS Cheat Sheet &#8211; PDF</a></li>
<li><a href="http://www.addedbytes.com/css_cheat_sheet.png">CSS Cheat Sheet &#8211; PNG</a></li>
<li><a href="http://www.blooberry.com/indexdot/css/propindex/all.htm">CSS Property Index</a></li>
<li><a href="http://home.tampabay.rr.com/bmerkey/cheatsheet.htm">Cascading Style Cheatsheet</a></li>
<li><a href="http://www.dustindiaz.com/css-shorthand/">CSS Shorthand Guide</a></li>
</ul>
<p><strong>CVS</strong></p>
<ul class="external">
<li><a href="http://www-bcl.cs.unm.edu/computers/cvs.html">CVS Cheat Sheet</a></li>
<li><a href="http://www.cs.put.poznan.pl/csobaniec/Papers/svn-refcard.pdf">Subversion Quick Reference Card &#8211; PDF</a></li>
<li><a href="http://www.slac.stanford.edu/grp/cd/soft/cvs/cvs_cheatsheet.html">CVS Cheat-sheet</a></li>
</ul>
<p><strong>C++</strong></p>
<ul class="external">
<li><a href="http://www.linuxsoftware.co.nz/cppcontainers.html">C++ Containers Cheat Sheet</a></li>
<li><a href="http://downloads.dreamincode.net/ref_sheets/cpp_reference_sheet.pdf">C++ Quick Reference Sheet (Cheat Sheet) &#8211; PDF</a></li>
<li><a href="http://cs.fit.edu/%7Emmahoney/cse2050/how2cpp.html">How to Program in C++ &#8211; Language Summary</a></li>
</ul>
<p><strong>Django</strong></p>
<ul class="external">
<li><a title="The Django Book" href="http://www.djangobook.com/">The Django Book</a></li>
</ul>
<p><strong>Firefox</strong></p>
<ul class="external">
<li><a href="http://the-cream.blogspot.com/2006/10/firefox-keyboard-shortcuts.html">Firefox Keyboard Shortcuts &#8211; PDF</a></li>
<li><a href="http://www.accessfirefox.com/ShortcutsKandM.html">Firefox Shortcuts Sheet</a></li>
<li><a href="http://lesliefranke.com/2006/06/22/mozilla-firefox-cheat-sheet-update/">Mozilla Firefox Cheat Sheet</a></li>
<li><a href="http://lesliefranke.com/files/reference/thunderbirdcheatsheet.html">Mozilla Thunderbird Cheat Sheet</a></li>
<li><a href="http://www.mozilla.org/support/firefox/keyboard">Keyboard Shortcuts</a></li>
</ul>
<p><strong>Google</strong></p>
<ul class="external">
<li><a href="http://evhead.com/hodgepodge/gmail-shortcuts.html">Gmail Shortcuts (printable cheatsheet)</a></li>
<li><a href="http://www.googleguide.com/advanced_operators_reference.html">Google Advanced Operators (Cheat Sheet)</a></li>
<li><a href="http://www.adelaider.com/google/">Google Cheat Sheet (Version 1.06) &#8211; PDF</a></li>
<li><a href="http://www.bueltge.de/allg-google-cheat-sheet/42/">Google Cheat Sheet &#8211; auch als PDF</a></li>
<li><a href="http://www.feedsforme.com/google/">Google Cheat Sheets &#8211; auch als PDF</a></li>
<li><a href="http://www.google.com/help/cheatsheet.html">Google Help : Cheat Sheet</a></li>
</ul>
<p><strong>HTML/XHTML</strong></p>
<ul class="external">
<li><a href="http://www.alphalink.com.au/%7Erhduncan/htmlguide/cheatindex.html">A Simple Guide To HTML &#8211; Cheat Sheet</a></li>
<li><a href="http://library.albany.edu/imc/pdf/HTML-XHTML_Tag_Sheet.pdf">HTML &amp; XHTML Tag Quick Reference</a></li>
<li><a href="http://www.psacake.com/web/dy.asp">HTML Cheat Sheet</a></li>
<li><a href="http://www.cookwood.com/html/extras/entities.html">HTML Entities</a></li>
<li><a href="http://www.killersites.com/HTML_CODES/index.jsp">HTML CODES CHEAT SHEET</a></li>
<li><a href="http://cdburnerxp.se/htmlcheatsheet.pdf">XHTML</a></li>
<li><a href="http://www.angelfire.com/nm/thehtmlsource/html/cheatsheet.html">HTML Cheat Sheet</a></li>
<li><a href="http://cdburnerxp.se/htmlcheatsheet.pdf">XHTML Cheat Sheet v. 1.03 &#8211; PDF</a></li>
</ul>
<p><strong>Java</strong></p>
<ul class="external">
<li><a href="http://www.janeg.ca/JQREF.pdf">Java Quick Reference &#8211; PDF</a></li>
<li><a href="http://java.sun.com/products/jsp/syntax/1.1/card11.pdf">(JSPª) SYNTAX version 1.1</a></li>
<li><a href="http://java.sun.com/products/jsp/syntax/2.0/card20.pdf">(JSP™) SYNTAX version 2.0</a></li>
</ul>
<p><strong>JavaScript</strong></p>
<ul class="external">
<li><a href="http://www.addedbytes.com/javascript_cheat_sheet.png">JavaScript Cheat Sheet &#8211; PNG</a></li>
<li><a href="http://www.addedbytes.com/javascript_cheat_sheet.pdf">JavaScript Cheat Sheet &#8211; PDF</a></li>
<li><a href="http://javascript-reference.info/">JavaScript Reference</a></li>
<li><a href="http://www.dannyg.com/ref/jsquickref.html">JavaScript and Browser Objects Quick Reference</a></li>
<li><a href="http://www.visibone.com/regular-expressions/">Regular Expressions for JavaSript &#8211; free online quick reference</a></li>
</ul>
<p><strong>Microformats</strong></p>
<ul class="external">
<li><a href="http://www.addedbytes.com/cheat-sheets/microformats-cheat-sheet/">Microformats Cheat Sheet</a></li>
<li><a href="http://suda.co.uk/projects/microformats/cheatsheet/">Microformats Cheat Sheet</a></li>
</ul>
<p><strong>Misc</strong></p>
<ul class="external">
<li><a href="http://www.draac.com/chmodchart.html">CHMOD Chart</a></li>
<li><a href="http://photonotes.org/cgi-bin/view.pl?letter=%21">Complete listing of common camera symbols.</a></li>
<li><a href="http://www.sql-und-xml.de/unicode-database/">The Unicode-Database</a></li>
<li><a href="http://www.addedbytes.com/colourchart.png">RGB Hex Colour Chart &#8211; PNG</a></li>
<li><a href="http://www.geocities.com/Athens/1802/pgpcard.html">Pretty Good PGP Reference Card</a></li>
<li><a href="http://www.aiic.net/ViewPage.cfm/page302.htm">Search Engine Cheat Sheet</a></li>
<li><a href="http://www.digilife.be/quickreferences/quickrefs.htm">Quick Reference Cards</a></li>
</ul>
<p><strong>MySQL</strong></p>
<ul class="external">
<li><a href="http://www.nparikh.org/unix/mysql.php">MySQL Cheat Sheet</a></li>
<li><a href="http://www.addedbytes.com/mysql_cheat_sheet.pdf">MySQL Cheat Sheet &#8211; PDF</a></li>
<li><a href="http://www.addedbytes.com/mysql_cheat_sheet.png">MySQL Cheat Sheet &#8211; PNG</a></li>
<li><a href="http://www.3gwt.net/demo/SQL_redux.html">SQL Cheatsheet</a></li>
</ul>
<p><strong>Oracle</strong></p>
<ul class="external">
<li><a href="http://www.yagc.ndo.co.uk/cheatsheets/plsql_cheatsheet.html">Oracle PL/SQL Cheatsheet</a></li>
<li><a href="http://www.vttoth.com/oracle.htm">Oracle Cheat Sheet</a></li>
<li><a href="http://radio.weblogs.com/0128037/stories/2003/10/21/oracleScmInstallationCheatSheet.html">Oracle SCM Installation Cheat Sheet</a></li>
</ul>
<p><strong>Perl</strong></p>
<ul class="external">
<li><a href="http://www.mnlab.cs.depaul.edu/%7Eehab/Courses/TDC568/resources/PerlQuickRef.pdf">Perl Regular Expression -Quick Reference &#8211; PDF</a></li>
<li><a href="http://juerd.nl/site.plp/perlcheat">Perl Cheat Sheet</a></li>
<li><a href="http://juerd.nl/site.plp/perlcheat">Perl Cheat Sheet</a></li>
<li><a href="http://search.cpan.org/%7Enwclark/perl-5.8.7/pod/perlcheat.pod">Perl 5 Cheat Sheet</a></li>
<li><a href="http://johnbokma.com/perl/perl-quick-reference-card.html">Perl Quick Reference Card &#8211; PDF</a></li>
<li><a href="http://refcards.com/refcards/perl-regexp/index.html">Perl Regexp Quick Reference Card &#8211; PDF</a></li>
</ul>
<p><strong>Photoshop/Gimp</strong></p>
<ul class="external">
<li><a href="http://frenchfragfactory.net/ozh/download/refcards/Gimp.pdf">Gimp Quick Reference Card v.1.0</a></li>
<li><a href="http://frenchfragfactory.net/ozh/download/refcards/Photoshop.pdf">Photoshop 7.0 Quick Reference Card for Windows &#8211; PDF</a></li>
<li><a href="http://www.creativetechs.com/tips/tip_resources/PSCS2_Shortcuts_Windows.pdf">Photoshop CS2 Keyboard Shortcuts (Windows) &#8211; PDF</a></li>
<li><a href="http://www.creativetechs.com/tips/tip_resources/PSCS2_Shortcuts_Mac.pdf">Photoshop CS2 Keyboard Shortcuts (Macintosh) &#8211; PDF</a></li>
</ul>
<p><strong>PHP</strong></p>
<ul class="external">
<li><a href="http://www.symfony-project.com/weblog/2006/04/25/admin-generator-cheat-sheet.html">symfony PHP5 framework &#8211; Admin Generator cheat sheet &#8211; PDF</a></li>
<li><a href="http://www.addedbytes.com/php_cheat_sheet.pdf">PHP Cheat Sheet &#8211; PDF</a></li>
<li><a href="http://www.addedbytes.com/php_cheat_sheet.png">PHP Cheat Sheet &#8211; PNG</a></li>
<li><a href="http://www.blueshoes.org/en/developer/php_cheat_sheet/">PHP Cheat Sheet with special php syntax</a></li>
<li><a href="http://www.addedbytes.com/regular_expressions_cheat_sheet.png">Regular Expressions Cheat Sheet &#8211; PNG</a></li>
</ul>
<p><strong>Python</strong></p>
<ul class="external">
<li><a href="http://www-128.ibm.com/developerworks/library/l-cheatsheet3.html">Python 101 cheat sheet</a></li>
<li><a href="http://www.yukoncollege.yk.ca/%7Ettopper/COMP118/rCheatSheet.html">Python Cheat Sheet</a></li>
<li><a href="http://www.drweb.de/weblog/weblog/?p=548">Python Cheat Sheet &#8211; PDF</a></li>
<li><a href="http://www.onlamp.com/python/excerpt/PythonPocketRef/examples/python.pdf">Python Quick Reference</a></li>
<li><a href="http://rgruet.free.fr/PQR24/PQR2.4.html"> Python 2.4 Quick Reference</a></li>
</ul>
<p><strong>Regular Expressions</strong></p>
<ul class="external">
<li><a href="http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/">Regular Expressions Cheat Sheet</a></li>
<li><a href="http://regexlib.com/CheatSheet.aspx">Regular Expression Cheat Sheet (.NET)</a></li>
</ul>
<p><strong>Ruby</strong></p>
<ul class="external">
<li><a href="http://slash7.com/cheats/activerecord_cheatsheet.pdf">ActiveRecord Relationships &#8211; Ruby on Rails cheat sheet guide  &#8211; PDF</a></li>
<li><a href="http://www.blainekendall.com/index.php/rubyonrailscheatsheet/">RubyOnRails-Cheatsheet &#8211; PDF</a></li>
<li><a href="http://www.addedbytes.com/ruby_on_rails_cheat_sheet.png">Ruby on Rails Cheat Sheet &#8211; PNG</a></li>
<li><a href="http://slash7.com/cheats/form_helpers.pdf">Ruby on Rails cheat sheet guide &#8211; PDF</a></li>
<li><a href="http://www.zenspider.com/Languages/Ruby/QuickRef.html">Ruby quick reference</a></li>
<li><a href="http://www.threaded.com/ruby_cheatsheet.htm">Threadeds Ruby Cheat Sheet</a></li>
<li><a href="http://slash7.com/cheats/rails_files_cheatsheet.pdf">What Goes Where?  &#8211; Ruby on Rails cheat sheet &#8211; PDF</a></li>
</ul>
<p><strong>Unix/Linux</strong></p>
<ul class="external">
<li><a href="http://www.unixguide.net/linux/linuxshortcuts.shtml">Linux Shortcuts and Commands</a></li>
<li><a href="http://aperiodic.net/screen/quick_reference?do=show"> quick_reference [GNU screen]</a></li>
<li><a href="http://www.pixelbeat.org/cmdline.html">Unix Cheat Sheet</a></li>
<li><a href="http://homepage.powerup.com.au/%7Esquadron/linux_manual.pdf">The One Page Linux Manual &#8211; Version 3 &#8211; PDF </a></li>
<li><a href="http://www.gasmi.net/docs/tcp.html">TCP Ports list (3498 ports in list) </a></li>
<li><a href="http://www.rain.org/%7emkummel/unix.html">Treebeard’s Unix Cheat Sheet</a></li>
<li><a href="http://www.pixelbeat.org/vim.tips.html">Essential Vim keyboard shortcuts Cheat Sheet</a></li>
<li><a href="http://tnerual.eriogerg.free.fr/vim.html">VIM Quick Reference Card</a></li>
<li><a href="http://bullium.com/support/vim.html">Vim Commands Cheat Sheet</a></li>
</ul>
<p><strong>Weblog</strong></p>
<ul class="external">
<li><a href="http://andywibbels.com/files/Blogger_Cheatsheet_v1.pdf">Blogger Cheatsheet &#8211; PDF</a></li>
<li><a href="http://andywibbels.com/files/TypePad_Cheatsheet_v1.pdf">TypePad Cheatsheet &#8211; PDF</a></li>
<li><a href="http://andywibbels.com/files/Movable_Type_Cheatsheet_v1.pdf">Movable Type Cheatsheet &#8211; PDF</a></li>
<li><a href="http://www.einfach-persoenlich.de/2005-05-29/movabletype-movable-type-cheat-sheet-spickzettel.html">MovableType</a></li>
<li><a href="http://andywibbels.com/files/WordPress_Cheatsheet_v1.pdf">WordPress Cheatsheet &#8211; PDF</a></li>
<li><a href="http://bueltge.de/wp-wordpress-cheat-sheet-fuer-theme-tags-und-plugin-api/205">WP &#8211; WordPress Cheat Sheet für Theme Tags und Plugin-API &#8211; PDF</a></li>
</ul>
<p><strong>Windows</strong></p>
<ul class="external">
<li><a href="http://www.ss64.com/nt/">An A-Z Index of the Windows NT/XP command line</a></li>
<li><a href="http://www.viemu.com/a_vi_vim_graphical_cheat_sheet_tutorial.html">Graphical vi-vim Cheat Sheet and Tutorial</a></li>
<li><a href="http://www.fgcu.edu/support/office2000/ppt/shortcuts.html">Power Point 2000 &#8211; Keyboard Shortcuts</a></li>
<li><a href="http://www.oreilly.com/examples/promos/pt/power_point_quickref.pdf">POWERPOINT 2003 &#8211; Quick Reference Card</a></li>
<li><a href="http://www.gasmi.net/docs/tcp.html">TCP Ports list (3498 ports in list) </a></li>
<li><a href="http://tlt.its.psu.edu/suggestions/international/accents/codealt.html">Windows &#8211; Alt Key Numeric Codes</a></li>
</ul>
<p><strong>XML</strong></p>
<ul class="external">
<li><a href="http://www.dopefly.com/projects/fuseboxxmlcheatsheet.cfm">Fusebox 4.1 XML Cheat Sheet</a></li>
<li><a href="http://www.zvon.org/download2_cheatsheet.php/sheet_mathML_el_attr.pdf?title=MathML%3A+elements+-+attributes">MathML Reference &#8211; PDF</a></li>
<li><a href="http://www.zvon.org/download2_cheatsheet.php/sheet_voiceXML_el_attr.pdf?title=VoiceXML%3A+elements+-+attributes">VoiceXML Reference &#8211; PDF</a></li>
<li><a href="http://refcards.com/download/bj/xtm-1.0.pdf">XML TopicMaps 1.0 &#8211; Quick Reference Card &#8211; PDF</a></li>
<li><a href="http://www.mulberrytech.com/quickref/XMLquickref.pdf">XML Quick References &#8211; PDF</a></li>
<li><a href="http://www.zvon.org/download2_cheatsheet.php/sheet_xmlSchema2001_child_parent.pdf?title=XML+Schema+2001%3A+children+-+parents">XML Schema 2001: children &#8211; parents  &#8211; PDF</a></li>
<li><a href="http://www.zvon.org/download2_cheatsheet.php/sheet_xmlSchema2001_el_attr.pdf?title=XML+Schema+2001%3A+elements+-+attributes"> XML Schema 2001: elements &#8211; attributes  &#8211; PDF</a></li>
<li><a href="http://www.zvon.org/Output/cheatsheets/cheatsheet_list.html">XML Schema 2000/10 &#8211; PDF</a></li>
<li><a href="http://www.xml.dvint.com/docs/SchemaStructuresQR-2.pdf">XML Schema &#8211; Structures Quick Reference &#8211; PDF</a></li>
<li><a href="http://www.xml.dvint.com/docs/SchemaDataTypesQR-2.pdf">XML Schema &#8211; Data Types Quick Reference &#8211; PDF</a></li>
<li><a href="http://www.zvon.org/download2_cheatsheet.php/sheet_xslReference_el_attr.pdf?title=XSL+FO%3A+elements+-+attributes">XSL FO Reference &#8211; PDF</a></li>
<li><a href="http://www.mulberrytech.com/quickref/XSLT_1quickref-v2.pdf">XSLT Quick References &#8211; PDF</a></li>
<li><a href="http://refcards.com/download/deepx/XSLT-1.0.pdf">XSLT Quick Reference Card &#8211; PDF</a></li>
<li><a href="http://www.topxml.com/xsl/XSLTRef.asp">XSLT Reference</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/collections-of-cheat-sheets-links/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>好书推荐&#8211;《精通Javascript》</title>
		<link>http://www.ihiro.org/proficient-in-javascript</link>
		<comments>http://www.ihiro.org/proficient-in-javascript#comments</comments>
		<pubDate>Thu, 18 Jun 2009 09:33:20 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[书籍文档]]></category>
		<category><![CDATA[book]]></category>

		<guid isPermaLink="false">http://ihiro.org/?p=30</guid>
		<description><![CDATA[<img class="alignleft" title="精通javascript" src="http://ec4.images-amazon.com/images/I/51HTlhmx1YL._AA200_.jpg" alt="" width="100" height="100" />
<p>出版社：人民邮电出版社
页码：289 页
出版日期：2008年
ISBN：7115175403/9787115175403
条形码：9787115175403
</p>
<p>《精通JavaScript》是目前最深入的JavaScript图书，讲述了现代JavaScript的所有知识，展现了这门技术将能给网站建设带来如 何丰富的体验。《精通JavaScript》言简意赅，扩展了读者视野，并关注于基础且重要的主题——现代JavaScript是什么和不是什么，浏览器 支持的当前状态，以及需要注意的陷阱等。书中所有概念都来自于现实案例的分析。</p>]]></description>
			<content:encoded><![CDATA[<p><img class="alignright" title="精通javascript" src="http://ec4.images-amazon.com/images/I/51HTlhmx1YL._AA200_.jpg" alt="" width="200" height="200" /><br />
基本信息<br />
出版社：人民邮电出版社<br />
页码：289 页<br />
出版日期：2008年<br />
ISBN：7115175403/9787115175403<br />
条形码：9787115175403</p>
<p>包装版本：1版<br />
装帧：平装<br />
开本：16<br />
正文语种：中文<br />
丛书名：图灵计算机科学丛书</p>
<h3>内容简介</h3>
<p>《精通JavaScript》是目前最深入的JavaScript图书，讲述了现代JavaScript的所有知识，展现了这门技术将能给网站建设带来如 何丰富的体验。《精通JavaScript》言简意赅，扩展了读者视野，并关注于基础且重要的主题——现代JavaScript是什么和不是什么，浏览器 支持的当前状态，以及需要注意的陷阱等。书中所有概念都来自于现实案例的分析。</p>
<h3>作者简介</h3>
<p>John Resig，世界级Javascript大师，著名框架jQuery的创造者，拥有多年的Web应用程序开发经验。他现在是Mozilla公司的 JavaScript传道者，此前曾经在非赢利组织“每个儿童一台笔记本电脑(OLPC)”担任程序员，并在罗切斯特理工学院从事过数据挖掘方面的研究。 除了jQuery之外，他还开发7Sparklines程序库、AniWiki、建模工具dModeler等许多有影响的应用程序。他的个人网站是 <a rel="external" href="http://www.ejohn.org/">www.ejohn.org</a>。</p>
<h3>目录</h3>
<p>第一部分　认识现代JavaScript<br />
第1章　现代JavaScript程序设计　2<br />
1.1　面向对象的JavaScript　2<br />
1.2　测试代码　3<br />
1.3　打包分发　4<br />
1.4　分离式DOM脚本编程　5<br />
1.4.1　DOM　6<br />
1.4.2　事件　7<br />
1.4.3　JavaScript与CSS　8<br />
1.5　Ajax　8<br />
1.6　浏览器支持　11<br />
1.7　小结　12<br />
第二部分　专业JavaScript开发<br />
第2章　面向对象的JavaScript　14<br />
2.1　语言特性　14<br />
2.1.1　引用　14<br />
2.1.2　函数重载和类型检查　16<br />
2.1.3　作用域　19<br />
2.1.4　闭包　20<br />
2.1.5　上下文对象　23<br />
2.2　面向对象基础　24<br />
2.2.1　对象　25<br />
2.2.2　对象的创建　25<br />
2.3　小结　30<br />
第3章　创建可重用代码　31<br />
3.1　标准化面向对象的代码　31<br />
3.1.1　原型式继承　31<br />
3.1.2　类式继承　32<br />
3.1.3　Base库　35<br />
3.1.4　Prototype库　36<br />
3.2　打包　39<br />
3.2.1　命名空间　40<br />
3.2.2　清理代码　42<br />
3.2.3　压缩　43<br />
3.3　分发　45<br />
3.4　小结　47<br />
第4章　调试与测试的工具　48<br />
4.1　调试　48<br />
4.1.1　错误控制台　48<br />
4.1.2　DOM查看器　52<br />
4.1.3　Firebug　54<br />
4.1.4　Venkman　55<br />
4.2　测试　56<br />
4.2.1　JSUnit　56<br />
4.2.2　J3Unit　57<br />
4.2.3　Test.Simple　58<br />
4.3　小结　59<br />
第三部分　分离式JavaScript</p>
<p>第四部分　Ajax</p>
<p>第五部分　JavaScript的未来</p>
<p>第六部分　附录<br />
附录A　DOM参考手册　242<br />
附录B　事件参考手册　257<br />
附录C　浏览器　273<br />
索引　275</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/proficient-in-javascript/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Firefox插件：Delicious Bookmarks（美味书签）</title>
		<link>http://www.ihiro.org/firefox-plug-ins-delicious-bookmarks-delicious-bookmarks</link>
		<comments>http://www.ihiro.org/firefox-plug-ins-delicious-bookmarks-delicious-bookmarks#comments</comments>
		<pubDate>Thu, 18 Jun 2009 09:23:27 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[软件下载]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://ihiro.org/?p=26</guid>
		<description><![CDATA[上周的某晚下班回到住处，还沉浸在CSS的编写思路之中，看到室友在用傲游的浏览器，并滔滔不绝地向他推荐火狐，且对火狐进行了大量的描述。但他说的一句话把我愣住了，他说：”我有傲游是因为用它的网络书签，这样用其他机器的时候也可以看到我收藏的书签了“。]]></description>
			<content:encoded><![CDATA[<p>上周的某晚下班回到住处，还沉浸在CSS的编写思路之中，看到室友在用傲游的浏览器，并滔滔不绝地向他推荐火狐，且对火狐进行了大量的描述。但他说的一句话把我愣住了，他说：”我有傲游是因为用它的网络书签，这样用其他机器的时候也可以看到我收藏的书签了“。</p>
<p>之后我就没再说话，而在想：火狐有网络书签吗？我好像没用到过哎！安装好后是没有这项功能的，但又想了想火狐是开源的浏览器，有那么多的fans们为其开发各式的插件，不知道是否有这个网络书签的插件呢！打开我的小D（Dell Notebook），打开Firefox，打开插件浏览页面，开始搜索起来。</p>
<p>果然，经过一番搜索之后便发现了这个功能强大的网络书签插件：<a rel="external" href="https://addons.mozilla.org/zh-CN/firefox/addon/3615">Delicious Bookmarks(美味书签)</a>。具体使用方法:</p>
<p>1.安装好该插件后，在导航工具栏中出现插件的图标,并且会生成一个Delicious Toolbar：<img class="aligncenter" title="delicious bookmarks" src="https://addons.mozilla.org/en-US/firefox/images/t/24427/1218135261" alt="" width="150" height="150" /><img class="aligncenter" title="delicious bookmarks" src="https://addons.mozilla.org/en-US/firefox/images/t/24422/1218135075" alt="" width="200" height="150" /></p>
<p>2.点击美味书签的图标，进入<a rel="external" href="http://www.delicious.com/">delicious</a>官方网站。注册属于自己的delicious account。在该网站里收集了各方面相关的书签，可以点击链接访问相应的网站:<img class="aligncenter" title="delicious bookmarks" src="https://addons.mozilla.org/en-US/firefox/images/t/24423/1218135104" alt="" width="150" height="150" /></p>
<p>3.若想查看自己已经收集的书签，只需点击导航工具栏的第二个书签按钮，浏览器便会在左边以sidebar的方式为你列出所有你已经收藏的书签。若你的书签过多，你可以通过search进行相关的搜索：<img class="aligncenter" title="delicious bookmarks" src="https://addons.mozilla.org/en-US/firefox/images/t/24424/1218135152" alt="" width="150" height="150" /></p>
<p>4.添加书签：只需在你打开的页面上右键，变会出现delicious书签的收藏选项，或通过菜单栏的delicious下拉菜单进行收藏，点击收藏后，会要求你对该页面设定一个tag，便于相关类的书签归档:<img class="aligncenter" title="delicious bookmarks" src="https://addons.mozilla.org/en-US/firefox/images/p/24428/1218135291" alt="" width="250" height="250" /><img class="aligncenter" title="delicious bookmarks" src="https://addons.mozilla.org/en-US/firefox/images/t/24425/1218135191" alt="" width="150" height="150" /></p>
<p>更多的应用可以访问:<a rel="external" href="http://www.delicious.com/">Delicious</a>官方网站，或火狐插件:<a rel="external" href="https://addons.mozilla.org/zh-CN/firefox/addon/3615">Delicious Bookmarks.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/firefox-plug-ins-delicious-bookmarks-delicious-bookmarks/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>WordPress学习笔记&#8211;url设置</title>
		<link>http://www.ihiro.org/wordpress-study-notes-url-settings</link>
		<comments>http://www.ihiro.org/wordpress-study-notes-url-settings#comments</comments>
		<pubDate>Thu, 18 Jun 2009 09:12:11 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://ihiro.org/?p=19</guid>
		<description><![CDATA[设置方法：

1. 登录Wordperss后台, 点击导航菜单右侧的Setting（设置）选项；
2. 进入, WordPress address (URL)保持不变. Blog address (URL)由原来的http://www.ihiro.org/blog更改为 http://www.ihiro.org/；]]></description>
			<content:encoded><![CDATA[<p>说明：我的wp安装在子目录blog下，希望用域名http://www.ihiro.org/替换http://www.ihiro.org/blog/直接访问我的博客。设置方法：</p>
<p>1. 登录Wordperss后台, 点击导航菜单右侧的Setting（设置）选项；<br />
2. 进入, WordPress address (URL)保持不变. Blog address (URL)由原来的http://www.ihiro.org/blog更改为 http://www.ihiro.org/；<br />
3. 复制一份blog子目录文件夹里面的index.php文件, 打开, 把</p>

<div class="wp_codebox"><table><tr id="p19173"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p19code173"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
    <span style="color: #666666; font-style: italic;">/* Short and sweet */</span>
    <span style="color: #990000;">define</span><span style="color: #009900;">&#40;</span>’WP_USE_THEMES’<span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">require</span><span style="color: #009900;">&#40;</span>’<span style="color: #339933;">./</span>wp<span style="color: #339933;">-</span>blog<span style="color: #339933;">-</span><span style="color: #990000;">header</span><span style="color: #339933;">.</span>php‘<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>修改为</p>

<div class="wp_codebox"><table><tr id="p19174"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p19code174"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
    <span style="color: #666666; font-style: italic;">/* Short and sweet */</span>
    <span style="color: #990000;">define</span><span style="color: #009900;">&#40;</span>’WP_USE_THEMES’<span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">require</span><span style="color: #009900;">&#40;</span>’<span style="color: #339933;">./</span>blog<span style="color: #339933;">/</span>wp<span style="color: #339933;">-</span>blog<span style="color: #339933;">-</span><span style="color: #990000;">header</span><span style="color: #339933;">.</span>php‘<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>4. 把修改后的这份index.php上传到根目录；<br />
5. 至此，便可以使用www.ihiro.org直接访问我的Blog。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/wordpress-study-notes-url-settings/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>域名常识</title>
		<link>http://www.ihiro.org/domain-knowledge</link>
		<comments>http://www.ihiro.org/domain-knowledge#comments</comments>
		<pubDate>Thu, 18 Jun 2009 08:56:50 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[科技文摘]]></category>
		<category><![CDATA[域名]]></category>
		<category><![CDATA[学习笔记]]></category>

		<guid isPermaLink="false">http://ihiro.org/?p=10</guid>
		<description><![CDATA[一，A记录 CNAME记录 转发的区别是什么?
二，一级域名 二级域名怎么区分
三，DNS是什么意思？什么是DNS服务器]]></description>
			<content:encoded><![CDATA[<p>一，A记录 CNAME记录 转发的区别是什么?<br />
1、A记录：设定域名或者子域名指向，保证域名指向对应的主机重要设置；其只能填写IP，不能填写其他。例子 www.5d6d.com指向12.34.56.78<br />
2、CNAME记录：设定域名或者子域名指向，保证域名指向对应的主机重要设置；其只能填写域名。添加CNAME记录时，别名为三级或者多级域名，目标主机为别名。 例子www.5d6d.com指向bbs.5d6d.com.<br />
3、URL转发：设定域名、子域名的URL转发指向。添加URL转发时，URL地址需要是一个合法的地址。URL转发实现方式共有两种：隐藏与不隐藏。 例子www.5d6d.com转发至bbs.5d6d.com</p>
<p>二，一级域名 二级域名怎么区分<br />
一个完整的域名由二个或二个以上部分组成，各部分之间用英文的句号&#8221;.&#8221;来分隔，最后一个&#8221;.&#8221;的右边部分称为顶级域名（TLD，也称为一级域名），最后一个&#8221;.&#8221;的左边部分称为二级域名（SLD），二级域名的左边部分称为三级域名，以此类推，每一级的域名控制它下一级域名的分配。<br />
在cctv.com中，cctv就是顶级域名.com下的二级域名，cctv.com还可以有mail.cctv.com的形式，这里的mail可以谓之&#8221;主机&#8221;或&#8221;子域名</p>
<p>三，DNS是什么意思？什么是DNS服务器<br />
DNS是指：域名服务器(Domain Name Server)。在Internet上域名与IP地址之间是一一对应的，域名虽然便于人们记忆，但机器之间只能互相认识IP地址，它们之间的转换工作称为域名解析，域名解析需要由专门的域名解析服务器来完成，DNS就是进行域名解析的服务器。<br />
域名解析需要由专门的域名解析服务器来完成，DNS就是进行域名解析的服务器。 各地的DNS解析生效时间不同，所以访问域名会出现不同的现象。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/domain-knowledge/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>jQuery plugins for DW4</title>
		<link>http://www.ihiro.org/jquery-plugins-for-dw4</link>
		<comments>http://www.ihiro.org/jquery-plugins-for-dw4#comments</comments>
		<pubDate>Thu, 18 Jun 2009 08:52:54 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[软件下载]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://ihiro.org/?p=5</guid>
		<description><![CDATA[收集了几款DW CS4的插件，上传到个人趣盘空间，有需要的朋友请自行下载....
<ul class="external">
	<li><a href="http://www.qupan.com/down/hiro1219_3157037.html">jQuery代码提示插件</a></li>
	<li><a href="http://www.qupan.com/down/hiro1219_3145786.html">lightbox Gallery</a></li>
</ul>]]></description>
			<content:encoded><![CDATA[<p>收集了几款DW CS4的插件，上传到个人趣盘空间，有需要的朋友请自行下载&#8230;.</p>
<ul class="external">
<li><a href="http://www.qupan.com/down/hiro1219_3157037.html">jQuery代码提示插件</a></li>
<li><a href="http://www.qupan.com/down/hiro1219_3145786.html">lightbox Gallery</a></li>
<li><a href="http://www.qupan.com/down/hiro1219_3145799.html">thickbox Gallery</a></li>
<li><a href="http://www.qupan.com/down/hiro1219_3145772.html">jQuery UI Tabs</a></li>
<li><a href="http://www.qupan.com/down/hiro1219_3145768.html">jQuery UI Slider</a></li>
<li><a href="http://www.qupan.com/down/hiro1219_3145750.html">jQuery UI Dialog</a></li>
<li><a href="http://www.qupan.com/down/hiro1219_3145731.html">jQuery UI Calendar</a></li>
<li><a href="http://www.qupan.com/down/hiro1219_3145720.html">jQuery UI Accordion</a></li>
<li><a href="http://www.qupan.com/down/hiro1219_3145702.html">DiggWidget-1.0.0</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/jquery-plugins-for-dw4/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Hello world！</title>
		<link>http://www.ihiro.org/hello-world</link>
		<comments>http://www.ihiro.org/hello-world#comments</comments>
		<pubDate>Thu, 18 Jun 2009 08:27:10 +0000</pubDate>
		<dc:creator>Hiro</dc:creator>
				<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://ihiro.org/blog/?p=1</guid>
		<description><![CDATA[欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它，开始您的博客！]]></description>
			<content:encoded><![CDATA[<p>欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它，开始您的博客！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ihiro.org/hello-world/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
