<?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>邪罗刹的菠萝阁 &#187; javascript</title>
	<atom:link href="http://www.rainmoe.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rainmoe.com</link>
	<description>One code, one world ...</description>
	<lastBuildDate>Thu, 29 Dec 2011 14:04:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>用JavaScript控制搜索引擎抓取</title>
		<link>http://www.rainmoe.com/2010/02/04/javascript-limit-the-search-engine/</link>
		<comments>http://www.rainmoe.com/2010/02/04/javascript-limit-the-search-engine/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 15:08:12 +0000</pubDate>
		<dc:creator>小邪</dc:creator>
				<category><![CDATA[作品 [Work]]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[search]]></category>

		<guid isPermaLink="false">http://www.evlos.org/?p=1913</guid>
		<description><![CDATA[> 小邪去上海时貌似衣服没穿够，结果回来以后，就灰常杯具地发骚鸟，╮囧╭，是发烧来着。

> 然后小邪在被窝里窝了一整天的时间，才感觉好了一点儿。终于今天，小邪又站起来啦。



<span class="readmore"><a href="http://www.rainmoe.com/2010/02/04/javascript-limit-the-search-engine/" title="用JavaScript控制搜索引擎抓取">阅读全文——共1000字</a></span>]]></description>
			<content:encoded><![CDATA[<p>> 小邪去上海时貌似衣服没穿够，结果回来以后，就灰常杯具地发骚鸟，╮囧╭，是发烧来着。<br />
> 然后小邪在被窝里窝了一整天的时间，才感觉好了一点儿。终于今天，小邪又站起来啦。</p>
<p><img src='http://www.rainmoe.com/wp-content/uploads/old/Cap0000054.jpg' /></p>
<p>> 这段代码可以防止搜索引擎的访问，如果有啥链接，不希望搜索引擎读取导致降低权重。<br />
> 就把这段代码给加上吧，呵呵，感觉还是蛮有效滴 O(∩_∩)O，祝大家玩得愉快，╮(╯▽╰)╭。</p>
<p><span id="more-1913"></span><strong>一. 使用方法：</strong></p>
<p>> 首先把代码保存成一个文件，比如 Link.php，然后放在根目录或某个带默认文档的目录中。</p>
<p>> 链接地址如果是 http://www.evlos.org/ 的话，就修改成如下的样子即可，╮(╯▽╰)╭。<br />
> http://u.evlos.org/link.php?http://www.evlos.org/ 像前面的这个样子，嘎嘎。</p>
<p><img src='http://www.rainmoe.com/wp-content/uploads/old/Cap0000055.jpg' /></p>
<p>> 链接地址如果是 www.evlos.org 的话，那么就修改成下面的样子，程序会自动识别的。<br />
> http://u.evlos.org/link.php?www.evlos.org 嘻嘻，就像戴了套似的，放心，哇咔咔。</p>
<p>> 也就是说其实只要在任何链接的前面加上 http://u.evlos.org/link.php? 就 OK 鸟。</p>
<p><strong>二. 程序原理：</strong></p>
<p>> 呵呵，具体的可以查看《Google 网站管理员指南》中 “技术指南” 中的第一条关于Js的说明。<br />
> 传送门 - <a target='_blank' rel='nofollow' href='http://www.google.com/support/webmasters/bin/answer.py?answer=35769'>http://www.google.com/support/webmasters/bin/answer.py?answer=35769</a></p>
<p><img src='http://www.rainmoe.com/wp-content/uploads/old/Cap0000052.jpg' /></p>
<p><strong>三. 源代码：</strong></p>
<p>> 其实源代码很简单。不存在参数或参数无效，则转向到此文件的目录地址，即访问默认文档。<br />
> 如果参数存在，则检查是否带了 Http://，如果没有就给它加上去，有则直接转向至目标。<br />
> 下面的转向则使用了搜索引擎无法访问的 JavaScript 代码，即用 JS 挡住搜索引擎的读取。</p>
<pre class="brush: php; auto-links: false; html-script: false; title: ; notranslate">
&lt;?php
if (isset($_SERVER['QUERY_STRING'])) {
	if (!$_SERVER['QUERY_STRING']=='') {
		$urlto = $_SERVER['QUERY_STRING'];
		if (preg_match('/^http:\/\//i',$urlto)) {
			$urlto = '&quot;'.$urlto.'&quot;';
		}
		else {
			$urlto = '&quot;http://'.$urlto.'&quot;';
		}
	}
	else {
		$urlto = '&quot;/&quot;';
	}
}
else {
	$urlto = '/';
}
?&gt;
&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;LinkManager&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;script language=&quot;javascript&quot;&gt;
location.replace(&lt;?php echo $urlto; ?&gt;);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
</pre>
<p><strong>四. 菠萝阁奇趣发现：</strong></p>
<p>> 话说小邪看了《十月围城》以后，觉得春哥的《粉末》这首歌还是不错滴，想发到虾米的说。<br />
> 杯具的是，管理员说是未正式发行单曲，拒绝收录。╮(╯▽╰)╭，想听的盆友过下面传送呐。</p>
<p><img src='http://www.rainmoe.com/wp-content/uploads/old/Cap0000056.jpg' /></p>
<p>> 8Box 强力传送门 - <a target='_blank' rel='nofollow' href='http://www.8box.com/share/s/661207'>http://www.8box.com/share/s/661207</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.rainmoe.com/2010/02/04/javascript-limit-the-search-engine/feed/</wfw:commentRss>
		<slash:comments>87</slash:comments>
		</item>
		<item>
		<title>对WordPress进行极限疯狂的加速</title>
		<link>http://www.rainmoe.com/2009/12/06/improve-wordpress-to-a-crazy-speed/</link>
		<comments>http://www.rainmoe.com/2009/12/06/improve-wordpress-to-a-crazy-speed/#comments</comments>
		<pubDate>Sun, 06 Dec 2009 11:00:57 +0000</pubDate>
		<dc:creator>小邪</dc:creator>
				<category><![CDATA[探索 [Explore]]]></category>
		<category><![CDATA[gzip]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[speed]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.evlos.org/?p=1431</guid>
		<description><![CDATA[> 话说现在我的博客页面代码紧凑，Gzip 增强，加上三个缓存不同地方且相互兼容的插件全部开启。

> 还有压缩 JS 和 CSS 代码，虽然还没来得及进行 Html 代码层加速，不过速度也大有改观。



<span class="readmore"><a href="http://www.rainmoe.com/2009/12/06/improve-wordpress-to-a-crazy-speed/" title="对WordPress进行极限疯狂的加速">阅读全文——共1940字</a></span>]]></description>
			<content:encoded><![CDATA[<p>> 话说现在我的博客页面代码紧凑，Gzip 增强，加上三个缓存不同地方且相互兼容的插件全部开启。<br />
> 还有压缩 JS 和 CSS 代码，虽然还没来得及进行 Html 代码层加速，不过速度也大有改观。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0650.jpg" /></p>
<p>> 咱们看图说话，这张图是 Firefox 的 Yslow 插件对我的博客被优化完毕后的评价级别图。<br />
> 可以看出除了俩无意义的 F 以外，其他的全都是 A，说明优化后的效果是灰常好滴，O(∩_∩)O。</p>
<p>> P.s. 尼古拉斯·凯奇的新片《坏中尉》的中文字幕已经出现了，绝对值得一看，<a target="_blank" rel="nofollow" href="http://www.verycd.com/topics/2784347/">电驴DVD</a>传送门。</p>
<p><span id="more-1431"></span></p>
<p>1. <strong>DB-Cache-Reloaded 数据库缓存插件</strong>：</p>
<p>> 这三个缓存插件直接在 WordPress 的后台添加插件处搜索并安装即可。<br />
> 数据库缓存 10 分钟即可，不多不少刚刚好，如果 IP 每日 500 以上则可适当调低。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0654.png" /></p>
<p>2. <strong>Super-Cache 页面缓存插件</strong>：</p>
<p>> 注意！！很多童鞋用这个插件说没什么效果就是在图中处的缓存时间不够长。<br />
> 时间一定根据图中填，不用担心，因为发评论，发文章，修改文章，修改评论的动作都是会自动刷新缓存的。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0659.jpg" /></p>
<p>3. <strong>Widget-Cache 侧边栏缓存插件</strong>：</p>
<p>> 注意！！此插件和 Super-Cache 插件同时打开，若需要刷新侧边栏的缓存，请先刷新此插件然后刷新 Super-Cache。<br />
> 使用则是在小工具设置处，为每一个挂件设置不同的缓存时间，评论300s，文章Tags7200s，其他的864000s。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0660.jpg" /></p>
<p>4. <strong>Css 代码压缩</strong>：</p>
<p>> 我的博客工具箱中提供了<a target="_blank" rel="nofollow"  href="http://www.life-studio.cn/">万戈童鞋</a>介绍的<a target="_blank" rel="nofollow" href="http://tool.evlos.org/csstidy/">CSS整形与优化工具</a>，灰常强大，压缩率大概 25% 左右。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0470.jpg" /></p>
<p>> 用法不难，将代码粘贴到 CSS原始码 处，选择好压缩程度，一般选最小即可，阅读性差，但是够小。<br />
> 然后执行，将压缩好以后的代码放回原来的地方，具体需要压缩的 CSS 不止主题处，请在源代码中自行搜索。</p>
<p>5. <strong>JavaScript 代码压缩</strong>：</p>
<p>> <a target="_black" rel="external" href="http://tool.evlos.org/jspacker/">http://tool.evlos.org/jspacker/</a></p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0590.png" /></p>
<p>> 直接将代码粘贴在框中点击 Pack，如果需要加密在 Encoding 中选择 Normal 并把后面那个复选框勾选即可。</p>
<p>6. <strong>Html 代码层加速</strong>：</p>
<p>> 首先需要一点主题制作与 PHP 代码的知识，当然你的理解能力非凡也是没有问题的。<br />
> 然后可以疯狂地将主题里面的标签全部替换成经过 PHP 运行后的文本，参照浏览博客时的源代码即可。<br />
> 举个例子，下面的俩框代码分别是标签和经过 PHP 运行后的文本。</p>
<pre class="brush: php; auto-links: false; html-script: false; title: ; notranslate">
&lt;?php bloginfo('template_url'); ?&gt;
&lt;?php echo get_settings('home'); ?&gt;
&lt;?php bloginfo('description'); ?&gt;
&lt;?php bloginfo('title'); ?&gt;
</pre>
<pre class="brush: php; auto-links: false; html-script: false; title: ; notranslate">
http://www.evlos.org/wp-content/themes/elegant-box/
http://www.evlos.org/
邪罗刹的菠萝阁
4ll f0r on3 , 0ne for a1l ~ !
</pre>
<p>> 接着尽量少的从非当前网站的域名加载文件，因为这要经过DNS解析的。<br />
> 最后如果你的 CSS 技术强大可以试着使用 CSS Sprites 技术，详情请<a rel="nofollow" target="_blank" href="http://baike.baidu.com/view/2173476.htm">参见百科</a>。</p>
<p>7. <strong>Php Speedy 极限优化</strong>：</p>
<p>> 感谢 <a rel="nofollow" target="_blank" href="http://kangzj.net">Kangzj童鞋</a> 为我介绍了这款传说级别的插件，这个插件的应用并不只停留在WP上喔 。<br />
> 下面的图是没有使用此插件优化的图，可以看出 HTTP 请求的评价是 C 级，因为请求数过多。<br />
> HTTP 请求包含对资源的请求方法、资源的标识符及使用的协议。加载每个文件都是个请求。</p>
<p>> 同时很多 JS 在页面头部就要加载，一般来说只要不包含（document.write）的 JS 都可以放在尾部。<br />
> 这样页面的内容显示速度就会加快许多了，同时请使用 jQuery 库的同学最好将 JS 都放在尾部加载。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0651.jpg" /></p>
<p>> 使用了这款插件之后评分立即上升到 A 级，至于那俩个 F，第二个是因为这个和 Gravatar 缓存插件不兼容。<br />
> 而第一个则是未使用 CDN 内容分发网络，有点复杂而且要花钱，所以详情请参见 <a rel="nofollow" target="_blank" href="http://baike.baidu.com/view/21895.htm">百度百科</a> 的说明。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0650.jpg" /></p>
<p>> 这款插件强大之处在于十分严密地弥补了以上三款缓存插件所没有照顾到的地方。<br />
> 提供了精简的可选JS库，自动移除代码空白和无效特征，Gzip 压缩传输页面、Javascript 和 CSS。<br />
> 提供对 Javascript 和 CSS 在本地客户端长期缓存的支持，URIs Data 支持（详情请见<a rel="nofollow" target="_blank" href="http://www.liehuo.net/a/200911/2410963.html">烈火网</a>资料）。<br />
> 至于 Footer text 只是在页面底部显示此插件的标志而已，这个可以随意选，配置请按照下图。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0652.jpg" /></p>
<p>> <a target='_blank' rel='nofollow' href='http://code.google.com/p/evlosbox/downloads/detail?name=php_speedy_wp_0.5.2.zip&#038;can=2&#038;q='>http://code.google.com/p/evlosbox/downloads/detail?name=php_speedy_wp_0.5.2.zip&#038;can=2&#038;q=</a></p>
<p>8. <strong>欢迎来 Follow 我的 Twitter <a target="_blank" rel="nofollow" href="http://twitter.com/angelsolo">@AngelSolo</a></strong> 。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rainmoe.com/2009/12/06/improve-wordpress-to-a-crazy-speed/feed/</wfw:commentRss>
		<slash:comments>77</slash:comments>
		</item>
		<item>
		<title>菠萝阁的工具箱使用基础指南</title>
		<link>http://www.rainmoe.com/2009/12/06/how-to-use-my-tool-box/</link>
		<comments>http://www.rainmoe.com/2009/12/06/how-to-use-my-tool-box/#comments</comments>
		<pubDate>Sun, 06 Dec 2009 10:17:24 +0000</pubDate>
		<dc:creator>小邪</dc:creator>
				<category><![CDATA[奇客 [Geek]]]></category>
		<category><![CDATA[619]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[zip]]></category>

		<guid isPermaLink="false">http://www.evlos.org/?p=1435</guid>
		<description><![CDATA[> 传说中有个YD男叫619，一定要我写一篇文章祭奠他一下，所以当然的，这篇文章以他为主线。

> 嘿嘿嘿嘿 O(∩_∩)O，预告一下，下一篇文章针对WP进行全方位极限加速，不要错过喔。



<span class="readmore"><a href="http://www.rainmoe.com/2009/12/06/how-to-use-my-tool-box/" title="菠萝阁的工具箱使用基础指南">阅读全文——共396字</a></span>]]></description>
			<content:encoded><![CDATA[<p>> 传说中有个YD男叫619，一定要我写一篇文章祭奠他一下，所以当然的，这篇文章以他为主线。<br />
> 嘿嘿嘿嘿 O(∩_∩)O，预告一下，下一篇文章针对WP进行全方位极限加速，不要错过喔。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0663.jpg" /></p>
<p>> 话说回来，主要是记录一下对619童鞋网站的一点修改与为自己的工具箱做个小小的使用指南。<br />
> ╮(╯▽╰)╭ ，最近小邪堕落了，灰常喜欢用颜文字来表达思想感情，~ (～ o ～)~zZ ~~~///(^v^)\\\~~~。</p>
<p><span id="more-1435"></span>1. <strong>首先帮619童鞋加上了 裸奔帝国™ 的标志（图在上面）</strong>：</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0666.jpg" /></p>
<p>> 因为不做个标志的话，每个童鞋进他博客的第一件事情就是检查自己的浏览器是不是出了问题。<br />
> 强悍一点的马上就去开杀毒软件鸟。然后郁闷地回来留言说原来是 Sandbox 模板来着。<br />
> 虽然我先前建议用 CSS裸奔帝国™，不过短一点也没啥，嘿嘿。</p>
<pre class="brush: php; auto-links: false; html-script: false; title: ; notranslate">
&lt;div id=&quot;header&quot;&gt;
  &lt;h1 id=&quot;blog-title&quot;&gt;
    &lt;span&gt;
      &lt;a href=&quot;&lt;?php bloginfo('home') ?&gt;/&quot;
      title=&quot;&lt;?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?&gt;&quot;
      rel=&quot;home&quot;&gt;&lt;?php bloginfo('name') ?&gt;&lt;/a&gt;
    &lt;/span&gt;
    &lt;span id=&quot;blog-description&quot;&gt;
      &lt;?php bloginfo('description') ?&gt;
    &lt;/span&gt;
  &lt;/h1&gt;
&lt;/div&gt;
</pre>
<p><!--  #header --></p>
<p>> 首先把博客的 Description 移动到标题的 h1 标签中，然后用 Span 框起来。<br />
> 接着对此 Span 进行相对定位即可，虽然都是行内元素，但是相对定位可没有问题的。</p>
<pre class="brush: css; auto-links: false; html-script: false; title: ; notranslate">
#blog-description{
  font-size:12px;padding-left:5px;position:relative;top:-22px;
}
</pre>
<p>2. <strong>我的 jQuery Selectors 工具</strong>：</p>
<p>> <a target="_black" href="http://tool.evlos.org/jqselectors/">http://tool.evlos.org/jqselectors/</a></p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0636.jpg" /></p>
<p>> 此工具能够让大家对 jQuery 的选择器有一个比较具体的理解，可以试试看喔。</p>
<p>2. <strong>CSS整形与优化工具</strong>：</p>
<p>> 工具箱中提供了 <a target="_blank" rel="nofollow"  href="http://www.life-studio.cn/">万戈童鞋</a> 介绍的灰常强大的 CSS 整形与优化工具。</p>
<p>> <a target="_black" href="http://tool.evlos.org/csstidy/">http://tool.evlos.org/csstidy/</a></p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0470.jpg" /></p>
<p>> 之后我就把他的 3.24KB 的超小 CSS 文件再使用这个工具压缩，压缩为 2.77KB 。<br />
> 压缩率为 25%，灰常强大的说。基本上所有可阅读性比较高的 CSS 文件都可以保持这个压缩比率。</p>
<p>3. <strong>邮箱地址图标制作</strong>：</p>
<p>> <a target="_black" href="http://tool.evlos.org/mailtoimg/">http://tool.evlos.org/mailtoimg/</a></p>
<p><img src="http://image215.poco.cn/mypoco/myphoto/20100118/14/54669397201001181411036921371052526_052.jpg" /></p>
<p>> 呵呵，这个比较好玩的说，大家可以没事做做看，这个程序是老程序了。</p>
<p>4. <strong>Javascript 代码加密压缩</strong>：</p>
<p>> <a target="_black" href="http://tool.evlos.org/jspacker/">http://tool.evlos.org/jspacker/</a></p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0590.png" /></p>
<p>> 这个代码加密压缩也是很不错的，16.8KB 的 JS 文件可以压缩为 14.4 KB，灰常紧凑。<br />
> 当然加密功能也是不错的，虽然 HighASCLL 方式的压缩有点问题，不过不碍事，用 Normal 即可。<br />
> 还可添加捣乱的一些字符代码，让可阅读性下降到最低，虽然高手还是能还原的，让人头疼一下倒是不错。</p>
<p>5. <strong>最后给619童鞋提了分类建议</strong>：</p>
<p>> ╮(╯▽╰)╭ 话说因为他的文章比较有特色，让他很纠结来着，没分类，所以我试着分了一下。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0664.jpg" /></p>
<p>6. 围观<a rel="nofollow" target="_blank" href="http://yini.org/">秘密花园</a>：</p>
<p>> 此网站为当今幸存的全手工Html静态网站，绝对可以成为文物啊！<br />
> 计数器自 1999年1月20日 开始统计，今天的数字为千万级别的：53915655。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture0665.jpg" /></p>
<p>7. <strong>欢迎来 Follow 我的 Twitter <a target="_blank" rel="nofollow" href="http://twitter.com/angelsolo">@AngelSolo</a></strong> 。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rainmoe.com/2009/12/06/how-to-use-my-tool-box/feed/</wfw:commentRss>
		<slash:comments>38</slash:comments>
		</item>
		<item>
		<title>小地方提高Theme评论框用户体验</title>
		<link>http://www.rainmoe.com/2009/11/24/improve-guests-experience-in-comments-box/</link>
		<comments>http://www.rainmoe.com/2009/11/24/improve-guests-experience-in-comments-box/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 13:54:34 +0000</pubDate>
		<dc:creator>小邪</dc:creator>
				<category><![CDATA[代码 [Code]]]></category>
		<category><![CDATA[comments]]></category>
		<category><![CDATA[experience]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.evlos.org/?p=1129</guid>
		<description><![CDATA[> 我以前一直以为 JavaScript 是可以舍弃的技能，但是后来我不得不承认我错了。

> JavaScript 是不可或缺的东西，有非常重要，难以取代的地位。



<span class="readmore"><a href="http://www.rainmoe.com/2009/11/24/improve-guests-experience-in-comments-box/" title="小地方提高Theme评论框用户体验">阅读全文——共2464字</a></span>]]></description>
			<content:encoded><![CDATA[<p>> 我以前一直以为 JavaScript 是可以舍弃的技能，但是后来我不得不承认我错了。<br />
> JavaScript 是不可或缺的东西，有非常重要，难以取代的地位。</p>
<p><img src="http://www.rainmoe.com/wp-content/uploads/old/Capture04261.jpg" /></p>
<p>> 我现在只是一个 JavaScript 初学者，那么我们初学者一起从各个细节入手。<br />
> 开始学习 JavaScript，那么这次所要使用的功能是JavaScript的 focus(); 函数。</p>
<p>> <strong>P.s.</strong> 感谢<a rel="nofollow" target="_blank" href="http://www.versky.com/">Exia</a>童鞋，我在犹豫该不拘小节还是该注重细节的时候，他告诉我，细节决定成败。</p>
<p><span id="more-1129"></span>> 因为点击评论框<strong>右上角的回复</strong>之后，会自动在评论框中添加以下代码。</p>
<pre class="brush: php; auto-links: false; html-script: false; title: ; notranslate">
&lt;a href=&quot;#comment-1672&quot;&gt;@Awu&lt;/a&gt;,&lt;br /&gt;
</pre>
<p>> 但是在这里光标却出现在代码的左边，而我们要输入评论需要在下面<strong>多点一下鼠标</strong>，才能不破坏格式。<br />
> 如果不点击鼠标，或者不按一下键盘下键，那么直接输入会出现一下情况，就Fail了。</p>
<pre class="brush: php; auto-links: false; html-script: false; title: ; notranslate">
Hello,World&lt;a href=&quot;#comment-1672&quot;&gt;@Awu&lt;/a&gt;,&lt;br /&gt;
</pre>
<p>> 所以我们就需要使用 <strong>Focus 函数</strong>来使结果变成这个样子。</p>
<pre class="brush: php; auto-links: false; html-script: false; title: ; notranslate">
&lt;a href=&quot;#comment-1672&quot;&gt;@Awu&lt;/a&gt;,&lt;br /&gt;
Hello,World
</pre>
<p>> <strong>Focus函数语法</strong>：</p>
<pre class="brush: jscript; auto-links: false; html-script: false; title: ; notranslate">
focus();
</pre>
<p>> <strong>示例</strong>：</p>
<pre class="brush: jscript; auto-links: false; html-script: false; title: ; notranslate">
function setblur()
{
        dreamdutxt.focus();
        dreamdutxt.blur();
}
</pre>
<pre class="brush: php; auto-links: false; html-script: false; title: ; notranslate">
input type=&quot;button&quot; value=&quot;获得焦点&quot; onclick=&quot;javascript:dreamdutxt.focus()&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot;失去焦点&quot; onclick=&quot;setblur()&quot; /&gt;
&lt;input type=&quot;text&quot; value=&quot;text&quot; name=&quot;dreamdutxt&quot; onblur=&quot;alert('dreamdutxt is onblur')&quot; /&gt;
</pre>
<p>> 当点击获得焦点的时候，输入光标会处在 Dreamdutxt 输入框中。<br />
> 那么点击失去焦点的时候，输入光标则会从 Dreamdutxt 输入框中消失。<br />
> 好啦，理解了这个之后就可以对 ElegantBox 模板的 JavaScript 进行修改啦。</p>
<p>> 下面的内容是 ElegantBox 模板的 Comment.js 文件中的一个<strong>函数</strong>。</p>
<pre class="brush: jscript; auto-links: false; html-script: false; title: ; notranslate">
function appendReply(insertStr, commentBox) {
	if(document.getElementById(commentBox) &amp;&amp;
 document.getElementById(commentBox).type == 'textarea') {
		field = document.getElementById(commentBox);
	} else {
		alert(&quot;The comment box does not exist!&quot;);
		return false;
	}

	if (field.value.indexOf(insertStr) &gt; -1) {
		alert(&quot;You've already appended this reply!&quot;);
		return false;
	}

	if (field.value.replace(/\s|\t|\n/g, &quot;&quot;) == '') {
		field.value = insertStr;
	} else {
		field.value = field.value.replace(/[\n]*$/g, &quot;&quot;) + '\n\n' + insertStr;
	}
	field.focus();
}
</pre>
<p>> 这一行是正确调用JS里面的回复函数之后才会执行的，这里把 CommentBox 定义为 <strong>field</strong> 。</p>
<pre class="brush: jscript; auto-links: false; html-script: false; title: ; notranslate">
field = document.getElementById(commentBox);
</pre>
<p>> 所以我们在下面<strong>第五行添加这个函数</strong>，就能使正确调用JS回复函数的时候，输入光标达到我们想要的位置。</p>
<pre class="brush: jscript; auto-links: false; html-script: false; title: ; notranslate">
function appendReply(insertStr, commentBox) {
	if(document.getElementById(commentBox) &amp;&amp;
 document.getElementById(commentBox).type == 'textarea') {
		field = document.getElementById(commentBox);
		field.focus();
	} else {
		alert(&quot;The comment box does not exist!&quot;);
		return false;
	}

	if (field.value.indexOf(insertStr) &gt; -1) {
		alert(&quot;You've already appended this reply!&quot;);
		return false;
	}

	if (field.value.replace(/\s|\t|\n/g, &quot;&quot;) == '') {
		field.value = insertStr;
	} else {
		field.value = field.value.replace(/[\n]*$/g, &quot;&quot;) + '\n\n' + insertStr;
	}
	field.focus();
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.rainmoe.com/2009/11/24/improve-guests-experience-in-comments-box/feed/</wfw:commentRss>
		<slash:comments>28</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using memcached (Feed is rejected)
Page Caching using memcached
Database Caching 1/21 queries in 0.030 seconds using memcached
Object Caching 345/393 objects using memcached

Served from: www.rainmoe.com @ 2012-02-09 17:17:47 -->
