<?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>周帆的Web实验室 &#187; 实验室</title>
	<atom:link href="http://www.raychou.com/chou/categories/develop/labs/feed" rel="self" type="application/rss+xml" />
	<link>http://www.raychou.com/chou</link>
	<description>专注PHP，关注Web相关</description>
	<lastBuildDate>Fri, 11 Jun 2010 00:29:41 +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>RaterStar更新：支持自定义鼠标悬停Title</title>
		<link>http://www.raychou.com/chou/posts/352.htm</link>
		<comments>http://www.raychou.com/chou/posts/352.htm#comments</comments>
		<pubDate>Sun, 24 Jan 2010 14:41:13 +0000</pubDate>
		<dc:creator>RayChou</dc:creator>
				<category><![CDATA[实验室]]></category>
		<category><![CDATA[程序开发]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[RaterStar]]></category>
		<category><![CDATA[插件]]></category>

		<guid isPermaLink="false">http://www.raychou.com/chou/posts/352.htm</guid>
		<description><![CDATA[RaterStar改版以后，一直拖欠着网友们一个小功能，自定义title，最近终于有时间将这个老版中就有的功能移植到了新版，并且使用起来也更加灵活方便。
使用方法请参照Demo11
相关文章

jQuery Rater Star Plugin 修正：自定义Title后无法点击星星 (3)
jQuery投票插件RaterStar顺利毕业 (25)
LinkageSelect 基于jQuery的联动下拉菜单 (7)
UCHome二次开发规范 &#8211; 不同于Manyou的开发模式 (5)
轻量级表单验证插件 jQuery.Validation (3)


本文出自周帆的Web实验室，转载时请注明作者及出处

查看原文 &#124;
已有2位网友发表了评论]]></description>
			<content:encoded><![CDATA[<p>RaterStar改版以后，一直拖欠着网友们一个小功能，自定义title，最近终于有时间将这个老版中就有的功能移植到了新版，并且使用起来也更加灵活方便。</p>
<p>使用方法请参照<a href="http://www.raychou.com/labs/rater-star/#demo11">Demo11</a></p>
<h3>相关文章</h3>
<ul class="related_post">
<li><a href="http://www.raychou.com/chou/posts/303.htm" title="jQuery Rater Star Plugin 修正：自定义Title后无法点击星星">jQuery Rater Star Plugin 修正：自定义Title后无法点击星星 (3)</a></li>
<li><a href="http://www.raychou.com/chou/posts/329.htm" title="jQuery投票插件RaterStar顺利毕业">jQuery投票插件RaterStar顺利毕业 (25)</a></li>
<li><a href="http://www.raychou.com/chou/posts/317.htm" title="LinkageSelect 基于jQuery的联动下拉菜单">LinkageSelect 基于jQuery的联动下拉菜单 (7)</a></li>
<li><a href="http://www.raychou.com/chou/posts/276.htm" title="UCHome二次开发规范 &#8211; 不同于Manyou的开发模式">UCHome二次开发规范 &#8211; 不同于Manyou的开发模式 (5)</a></li>
<li><a href="http://www.raychou.com/chou/posts/221.htm" title="轻量级表单验证插件 jQuery.Validation">轻量级表单验证插件 jQuery.Validation (3)</a></li>
</ul>
<hr />
本文出自<a href="http://www.raychou.com/chou">周帆的Web实验室</a>，转载时请注明作者及出处
<br />
<a href="http://www.raychou.com/chou/posts/352.htm">查看原文</a> |
<a href="http://www.raychou.com/chou/posts/352.htm#comments">已有2位网友发表了评论</a>]]></content:encoded>
			<wfw:commentRss>http://www.raychou.com/chou/posts/352.htm/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>PHP FTP Client：基于PHP的FTP客户端</title>
		<link>http://www.raychou.com/chou/posts/346.htm</link>
		<comments>http://www.raychou.com/chou/posts/346.htm#comments</comments>
		<pubDate>Sun, 08 Nov 2009 10:04:05 +0000</pubDate>
		<dc:creator>RayChou</dc:creator>
				<category><![CDATA[实验室]]></category>
		<category><![CDATA[程序开发]]></category>
		<category><![CDATA[FTP]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[客户端]]></category>

		<guid isPermaLink="false">http://www.raychou.com/chou/posts/346.htm</guid>
		<description><![CDATA[半年前，曾写过一篇通过SVN Hooks实现本地SVN仓库与线上FTP服务器同步的文章《让虚拟主机也用上SVN：适用于个人的开发部署方式》，其中使用到了一个PhpFtpClient的类库，直到今天才有时间稍做了下整理，写了几个Demo，欢迎网友们提出宝贵意见以便改进。
目前已支持的功能：

目录列表
创建文件夹/文件
删除文件夹/文件（支持子文件夹）
上传文件夹/文件（支持子文件夹）
自动判断上传文件格式（ASCII/BINARY）

PhpFtpClient围观地址：http://www.raychou.com/labs/php-ftp-client/
相关文章

在FreeNAS/BSD搭建基于Nginx+FastCGI+MySQL+PHP的WebServer (2)
PHP连贯接口 (0)
让虚拟主机也用上SVN：适用于个人的开发部署方式 (5)
PHP autoload与include性能比较 (3)
转战Eclipse (0)


本文出自周帆的Web实验室，转载时请注明作者及出处

查看原文 &#124;
已有1位网友发表了评论]]></description>
			<content:encoded><![CDATA[<p>半年前，曾写过一篇通过SVN Hooks实现本地SVN仓库与线上FTP服务器同步的文章<a href="http://www.raychou.com/chou/posts/319.htm" title="让虚拟主机也用上SVN：适用于个人的开发部署方式">《让虚拟主机也用上SVN：适用于个人的开发部署方式》</a>，其中使用到了一个PhpFtpClient的类库，直到今天才有时间稍做了下整理，写了几个Demo，欢迎网友们提出宝贵意见以便改进。</p>
<p>目前已支持的功能：</p>
<ul>
<li>目录列表</li>
<li>创建文件夹/文件</li>
<li>删除文件夹/文件（支持子文件夹）</li>
<li>上传文件夹/文件（支持子文件夹）</li>
<li>自动判断上传文件格式（ASCII/BINARY）</li>
</ul>
<p>PhpFtpClient围观地址：<a href="http://www.raychou.com/labs/php-ftp-client/">http://www.raychou.com/labs/php-ftp-client/</a></p>
<h3>相关文章</h3>
<ul class="related_post">
<li><a href="http://www.raychou.com/chou/posts/356.htm" title="在FreeNAS/BSD搭建基于Nginx+FastCGI+MySQL+PHP的WebServer">在FreeNAS/BSD搭建基于Nginx+FastCGI+MySQL+PHP的WebServer (2)</a></li>
<li><a href="http://www.raychou.com/chou/posts/334.htm" title="PHP连贯接口">PHP连贯接口 (0)</a></li>
<li><a href="http://www.raychou.com/chou/posts/319.htm" title="让虚拟主机也用上SVN：适用于个人的开发部署方式">让虚拟主机也用上SVN：适用于个人的开发部署方式 (5)</a></li>
<li><a href="http://www.raychou.com/chou/posts/299.htm" title="PHP autoload与include性能比较">PHP autoload与include性能比较 (3)</a></li>
<li><a href="http://www.raychou.com/chou/posts/207.htm" title="转战Eclipse">转战Eclipse (0)</a></li>
</ul>
<hr />
本文出自<a href="http://www.raychou.com/chou">周帆的Web实验室</a>，转载时请注明作者及出处
<br />
<a href="http://www.raychou.com/chou/posts/346.htm">查看原文</a> |
<a href="http://www.raychou.com/chou/posts/346.htm#comments">已有1位网友发表了评论</a>]]></content:encoded>
			<wfw:commentRss>http://www.raychou.com/chou/posts/346.htm/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>jQuery投票插件RaterStar顺利毕业</title>
		<link>http://www.raychou.com/chou/posts/329.htm</link>
		<comments>http://www.raychou.com/chou/posts/329.htm#comments</comments>
		<pubDate>Fri, 29 May 2009 04:07:00 +0000</pubDate>
		<dc:creator>RayChou</dc:creator>
				<category><![CDATA[实验室]]></category>
		<category><![CDATA[程序开发]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[rater]]></category>
		<category><![CDATA[star]]></category>
		<category><![CDATA[投票]]></category>

		<guid isPermaLink="false">http://www.raychou.com/chou/posts/329.htm</guid>
		<description><![CDATA[
RaterStar是一年多前，在做三宝殿项目时开发的一个基于jQuery的投票插件，之后也得到了很多网友的关注和建议，让这个插件在一年多的时间内得以不断完善。
在实验室上线后，一直就考虑要将ReterStar加入到其中，但因为当初在写这个插件时，对jQuery并不是很熟悉，部分代码写得并不是很好，所以打算将其重写后再发布。
目前RaterStar已从Demo转移到Labs。新版的RaterStar在实现原版功能的基础上，更增加了一些实用的方法和参数，目前已经实现的功能如下：

自定义默认值
可设置是否可以更改默认值
自定义星星个数
自定义星星图片 NEW!
自定义起止值，递增步长
支持AJAX
自定义事件（目前支持点击后、AJAX请求之前，AJAX请求成功三种情况的事件触发）NEW!
自定义AJAX请求方式（POST/GET） NEW!
自定义鼠标悬停Title NEW!

更多的功能将在以后逐步完善，也欢迎大家给建议。
在线演示
相关文章

jQuery Rater Star Plugin 修正：自定义Title后无法点击星星 (3)
LinkageSelect 基于jQuery的联动下拉菜单 (7)
轻量级表单验证插件 jQuery.Validation (3)
更新 jQuery Rater Star Plugin (4)
RaterStar更新：支持自定义鼠标悬停Title (2)


本文出自周帆的Web实验室，转载时请注明作者及出处

查看原文 &#124;
已有25位网友发表了评论]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.raychou.com/chou/wp-content/uploads/2009/05/2009-05-29-130143.gif" alt="2009-05-29_130143.gif" height="44" width="253"/></p>
<p><a href="http://www.raychou.com/labs/rater-star/" target="_blank" title="jQuery Rater Star Plugin">RaterStar</a>是一年多前，在做<a href="http://www.3baodian.com/" target="_blank" title="三宝殿装修社区">三宝殿</a>项目时开发的一个基于<a href="http://www.jquery.com/" target="_blank" title="jQuery">jQuery</a>的投票插件，之后也得到了很多网友的关注和建议，让这个插件在一年多的时间内得以不断完善。</p>
<p>在<a href="http://www.raychou.com/chou/labs" title="实验室">实验室</a>上线后，一直就考虑要将ReterStar加入到其中，但因为当初在写这个插件时，对jQuery并不是很熟悉，部分代码写得并不是很好，所以打算将其重写后再发布。</p>
<p>目前RaterStar已从Demo转移到Labs。新版的RaterStar在实现原版功能的基础上，更增加了一些实用的方法和参数，目前已经实现的功能如下：</p>
<ul>
<li>自定义默认值</li>
<li>可设置是否可以更改默认值</li>
<li>自定义星星个数</li>
<li>自定义星星图片 <span style="COLOR: #ff0000; FONT-SIZE: 10px">NEW!</span></li>
<li>自定义起止值，递增步长</li>
<li>支持AJAX</li>
<li>自定义事件（目前支持点击后、AJAX请求之前，AJAX请求成功三种情况的事件触发）<span style="COLOR: #ff0000; FONT-SIZE: 10px">NEW!</span></li>
<li>自定义AJAX请求方式（POST/GET） <span style="COLOR: #ff0000; FONT-SIZE: 10px">NEW!</span></li>
<li>自定义鼠标悬停Title <span style="COLOR: #ff0000; FONT-SIZE: 10px">NEW!</span></li>
</ul>
<p>更多的功能将在以后逐步完善，也欢迎大家给建议。</p>
<p><a href="http://www.raychou.com/labs/rater-star/" target="_blank" title="RaterStar">在线演示</a></p>
<h3>相关文章</h3>
<ul class="related_post">
<li><a href="http://www.raychou.com/chou/posts/303.htm" title="jQuery Rater Star Plugin 修正：自定义Title后无法点击星星">jQuery Rater Star Plugin 修正：自定义Title后无法点击星星 (3)</a></li>
<li><a href="http://www.raychou.com/chou/posts/317.htm" title="LinkageSelect 基于jQuery的联动下拉菜单">LinkageSelect 基于jQuery的联动下拉菜单 (7)</a></li>
<li><a href="http://www.raychou.com/chou/posts/221.htm" title="轻量级表单验证插件 jQuery.Validation">轻量级表单验证插件 jQuery.Validation (3)</a></li>
<li><a href="http://www.raychou.com/chou/posts/194.htm" title="更新 jQuery Rater Star Plugin">更新 jQuery Rater Star Plugin (4)</a></li>
<li><a href="http://www.raychou.com/chou/posts/352.htm" title="RaterStar更新：支持自定义鼠标悬停Title">RaterStar更新：支持自定义鼠标悬停Title (2)</a></li>
</ul>
<hr />
本文出自<a href="http://www.raychou.com/chou">周帆的Web实验室</a>，转载时请注明作者及出处
<br />
<a href="http://www.raychou.com/chou/posts/329.htm">查看原文</a> |
<a href="http://www.raychou.com/chou/posts/329.htm#comments">已有25位网友发表了评论</a>]]></content:encoded>
			<wfw:commentRss>http://www.raychou.com/chou/posts/329.htm/feed</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>LinkageSelect新增AJAX方式调用数据</title>
		<link>http://www.raychou.com/chou/posts/327.htm</link>
		<comments>http://www.raychou.com/chou/posts/327.htm#comments</comments>
		<pubDate>Thu, 14 May 2009 05:08:00 +0000</pubDate>
		<dc:creator>RayChou</dc:creator>
				<category><![CDATA[实验室]]></category>
		<category><![CDATA[程序开发]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[联动菜单]]></category>
		<category><![CDATA[LinkageSelect]]></category>

		<guid isPermaLink="false">http://www.raychou.com/chou/posts/327.htm</guid>
		<description><![CDATA[原有的两种数据调用方式都是一次性全部载入所有数据，虽然在点击菜单时切换速度快，但不适合数据量很大的情况，因此新增了第三种数据调用方式。

var options = &#123;
   ajax : './data_builder/ajax.php'
&#125;
var loc = new LinkageSelect&#40;options&#41;;
loc.bind&#40;'#demo6 .level_1'&#41;;
loc.bind&#40;'#demo6 .level_2'&#41;;
loc.bind&#40;'#demo6 .level_3'&#41;;

在ajax模式下，只有在用户选择后，才会触发事件去调用下一层数据，并有缓存，也就是说不会重复下载已经调用过的菜单项。
演示Demo6 AJAX调用数据
相关文章

LinkageSelect 基于jQuery的联动下拉菜单 (7)
GMail的小变化 (0)


本文出自周帆的Web实验室，转载时请注明作者及出处

查看原文 &#124;
已有4位网友发表了评论]]></description>
			<content:encoded><![CDATA[<p>原有的两种数据调用方式都是一次性全部载入所有数据，虽然在点击菜单时切换速度快，但不适合数据量很大的情况，因此新增了第三种数据调用方式。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
   ajax <span style="color: #339933;">:</span> <span style="color: #3366CC;">'./data_builder/ajax.php'</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> loc <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> LinkageSelect<span style="color: #009900;">&#40;</span>options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
loc.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#demo6 .level_1'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
loc.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#demo6 .level_2'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
loc.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#demo6 .level_3'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>在ajax模式下，只有在用户选择后，才会触发事件去调用下一层数据，并有缓存，也就是说不会重复下载已经调用过的菜单项。</p>
<p>演示<a href="http://www.raychou.com/labs/linkage-select/#demo6">Demo6 AJAX调用数据</a></p>
<h3>相关文章</h3>
<ul class="related_post">
<li><a href="http://www.raychou.com/chou/posts/317.htm" title="LinkageSelect 基于jQuery的联动下拉菜单">LinkageSelect 基于jQuery的联动下拉菜单 (7)</a></li>
<li><a href="http://www.raychou.com/chou/posts/70.htm" title="GMail的小变化">GMail的小变化 (0)</a></li>
</ul>
<hr />
本文出自<a href="http://www.raychou.com/chou">周帆的Web实验室</a>，转载时请注明作者及出处
<br />
<a href="http://www.raychou.com/chou/posts/327.htm">查看原文</a> |
<a href="http://www.raychou.com/chou/posts/327.htm#comments">已有4位网友发表了评论</a>]]></content:encoded>
			<wfw:commentRss>http://www.raychou.com/chou/posts/327.htm/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>天气预报系统更新：支持自定义数据格式</title>
		<link>http://www.raychou.com/chou/posts/321.htm</link>
		<comments>http://www.raychou.com/chou/posts/321.htm#comments</comments>
		<pubDate>Sun, 10 May 2009 16:19:34 +0000</pubDate>
		<dc:creator>RayChou</dc:creator>
				<category><![CDATA[实验室]]></category>
		<category><![CDATA[天气预报]]></category>

		<guid isPermaLink="false">http://www.raychou.com/chou/posts/321.htm</guid>
		<description><![CDATA[天气预报系统一直都有很多网友在使用和关注，我也一直没有放弃更新。但一直因为原来的代码部署方式过于麻烦而一直没有做大的改进。在部署了新的开发方式后，一方面正好可以测试这套方案的健壮性，另一方面也把以前网友们提出的建议实现。
这次更新最大的改进是支持自定义数据格式，用户可以根据自己的需要选择数据格式，输出的条数，以及是否只显示雨雪天气预报。

数据格式：目前提供了html,rss,ical三种格式输出，计划中还要提供json，以及方便手机用户浏览的wap格式。
显示条数：可自定义显示1-7条数据，例如用在Google日历中的短信提醒，就可以只输出一条，这样每天就能只收到第二天的天气预报。
雨雪预报：这应该是一个相当实用的更新，相信大部分用户并不太关心天晴情况，除非第二天可能有雨，当选中这个设置后，若第二天是非雨雪天气，则不会有数据输出，如果用在Google日历的提醒中，就不会每天都收到短信了。


在经历了数次更新后，这个系统也日趋完善，预计不久后就会将其加入实验室，开放源码供大家下载。
注：如何利用Google日历和本系统的数据源实现免费的天气预报提醒，请移步《天气预报V2隆重上线测试》一文中的网友介绍或自行搜索。
相关文章

老版天气预报系统停止提供服务 (1)
关注天气：免费的短信天气预报 (126)
天气预报V2隆重上线测试 (81)
制作自己的天气预报站点 (25)


本文出自周帆的Web实验室，转载时请注明作者及出处

查看原文 &#124;
对文章内容发表评论]]></description>
			<content:encoded><![CDATA[<p><a href="http://weather.raychou.com/">天气预报系统</a>一直都有很多网友在使用和关注，我也一直没有放弃更新。但一直因为原来的代码部署方式过于麻烦而一直没有做大的改进。在部署了<a href="http://www.raychou.com/chou/posts/319.htm">新的开发方式</a>后，一方面正好可以测试这套方案的健壮性，另一方面也把以前网友们提出的建议实现。</p>
<p>这次更新最大的改进是支持自定义数据格式，用户可以根据自己的需要选择数据格式，输出的条数，以及是否只显示雨雪天气预报。</p>
<ol>
<li><strong>数据格式</strong>：目前提供了html,rss,ical三种格式输出，计划中还要提供json，以及方便手机用户浏览的wap格式。</li>
<li><strong>显示条数</strong>：可自定义显示1-7条数据，例如用在Google日历中的短信提醒，就可以只输出一条，这样每天就能只收到第二天的天气预报。</li>
<li><strong>雨雪预报</strong>：这应该是一个相当实用的更新，相信大部分用户并不太关心天晴情况，除非第二天可能有雨，当选中这个设置后，若第二天是非雨雪天气，则不会有数据输出，如果用在Google日历的提醒中，就不会每天都收到短信了。</li>
</ol>
<p><img src="http://www.raychou.com/chou/wp-content/uploads/2009/05/2009-05-11-001716.jpg" alt="2009-05-11_001716.jpg" height="152" width="431"/></p>
<p>在经历了数次更新后，这个系统也日趋完善，预计不久后就会将其加入<a href="http://www.raychou.com/chou/labs">实验室</a>，开放源码供大家下载。</p>
<p><span style="COLOR: #ff0000">注：如何利用Google日历和本系统的数据源实现免费的天气预报提醒，请移步<a href="http://www.raychou.com/chou/posts/293.htm">《天气预报V2隆重上线测试》</a>一文中的网友介绍或自行搜索。</span></p>
<h3>相关文章</h3>
<ul class="related_post">
<li><a href="http://www.raychou.com/chou/posts/349.htm" title="老版天气预报系统停止提供服务">老版天气预报系统停止提供服务 (1)</a></li>
<li><a href="http://www.raychou.com/chou/posts/324.htm" title="关注天气：免费的短信天气预报">关注天气：免费的短信天气预报 (126)</a></li>
<li><a href="http://www.raychou.com/chou/posts/293.htm" title="天气预报V2隆重上线测试">天气预报V2隆重上线测试 (81)</a></li>
<li><a href="http://www.raychou.com/chou/posts/31.htm" title="制作自己的天气预报站点">制作自己的天气预报站点 (25)</a></li>
</ul>
<hr />
本文出自<a href="http://www.raychou.com/chou">周帆的Web实验室</a>，转载时请注明作者及出处
<br />
<a href="http://www.raychou.com/chou/posts/321.htm">查看原文</a> |
<a href="http://www.raychou.com/chou/posts/321.htm#comments">对文章内容发表评论</a>]]></content:encoded>
			<wfw:commentRss>http://www.raychou.com/chou/posts/321.htm/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>LinkageSelect 基于jQuery的联动下拉菜单</title>
		<link>http://www.raychou.com/chou/posts/317.htm</link>
		<comments>http://www.raychou.com/chou/posts/317.htm#comments</comments>
		<pubDate>Sat, 25 Apr 2009 06:04:00 +0000</pubDate>
		<dc:creator>RayChou</dc:creator>
				<category><![CDATA[实验室]]></category>
		<category><![CDATA[程序开发]]></category>
		<category><![CDATA[联动菜单]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.raychou.com/chou/posts/317.htm</guid>
		<description><![CDATA[在Web开发中联动下拉菜单的应用非常广泛，拿我们最常见的地区选择来说，相信几乎所有的网友都填过下面这样的表单：

当选择省份后，之后的下拉菜单中会自动给出前一个菜单中所选省份内的城市，以此类推，当选择城市后，再后面一个菜单会自动给出区或县城让用户选择，简单说就是每一次的选择都会影响下一个菜单的可选项，我们称之为联动菜单。
这样的JS代码在网上很多，我曾经也写过一个全国省市区三级联动下拉菜单，在项目中也得到了应用，但在实际项目中，需要使用类似这样联动菜单的地方很多，比如类别的选择等等，这样我就需要为每一个需求去写一份代码，而其中90%以上的代码都是重复或相似的，不但浪费了时间，用户在浏览网页时更需要下载大量重复的代码，增加不必要的开销。
因此我也一直有想法，将联动功能与联动数据分离开来，让一份JS代码能够适应不同的联动菜单需求，于是便有了LinkageSelect，基于jQuery的联动选择菜单。目前已经实现但不局限于以下功能：

数据与代码分离，对应不同的菜单只需要准备不同的数据
支持变量数据或AJAX调用外部数据
支持自定义菜单根节点
支持自定义菜单默认选中值
可动态改变调用的菜单数据

在当前发布的版本中，还包括一个DataBuilder，支持手工创建用于LinkageSelect的JSON动态数据源。计划中就不再提供其他数据装换工具，有需要的朋友可以研究DataBuilder数据库格式，自行导入，再通过json.php输出所需数据源。
在线演示
相关文章

jQuery投票插件RaterStar顺利毕业 (25)
jQuery Rater Star Plugin 修正：自定义Title后无法点击星星 (3)
轻量级表单验证插件 jQuery.Validation (3)
RaterStar更新：支持自定义鼠标悬停Title (2)
LinkageSelect新增AJAX方式调用数据 (4)


本文出自周帆的Web实验室，转载时请注明作者及出处

查看原文 &#124;
已有7位网友发表了评论]]></description>
			<content:encoded><![CDATA[<p>在Web开发中联动下拉菜单的应用非常广泛，拿我们最常见的地区选择来说，相信几乎所有的网友都填过下面这样的表单：</p>
<p><img src="http://www.raychou.com/chou/wp-content/uploads/2009/04/2009-04-25-141108.jpg" alt="2009-04-25_141108.jpg" height="47" width="313"/></p>
<p>当选择省份后，之后的下拉菜单中会自动给出前一个菜单中所选省份内的城市，以此类推，当选择城市后，再后面一个菜单会自动给出区或县城让用户选择，简单说就是每一次的选择都会影响下一个菜单的可选项，我们称之为联动菜单。</p>
<p>这样的JS代码在网上很多，我曾经也写过一个<a href="http://www.raychou.com/demo/location/" target="_blank">全国省市区三级联动下拉菜单</a>，在项目中也得到了应用，但在实际项目中，需要使用类似这样联动菜单的地方很多，比如类别的选择等等，这样我就需要为每一个需求去写一份代码，而其中90%以上的代码都是重复或相似的，不但浪费了时间，用户在浏览网页时更需要下载大量重复的代码，增加不必要的开销。</p>
<p>因此我也一直有想法，将联动功能与联动数据分离开来，让一份JS代码能够适应不同的联动菜单需求，于是便有了<a href="http://www.raychou.com/labs/linkage-select/" target="_blank">LinkageSelect</a>，基于jQuery的联动选择菜单。目前已经实现但不局限于以下功能：</p>
<ul>
<li>数据与代码分离，对应不同的菜单只需要准备不同的数据</li>
<li>支持变量数据或AJAX调用外部数据</li>
<li>支持自定义菜单根节点</li>
<li>支持自定义菜单默认选中值</li>
<li>可动态改变调用的菜单数据</li>
</ul>
<p>在当前发布的版本中，还包括一个<a href="http://www.raychou.com/labs/linkage-select/data_builder/" target="_blank">DataBuilder</a>，支持手工创建用于LinkageSelect的JSON动态数据源。计划中就不再提供其他数据装换工具，有需要的朋友可以研究DataBuilder数据库格式，自行导入，再通过json.php输出所需数据源。</p>
<p><a href="http://www.raychou.com/labs/linkage-select/" target="_blank">在线演示</a></p>
<h3>相关文章</h3>
<ul class="related_post">
<li><a href="http://www.raychou.com/chou/posts/329.htm" title="jQuery投票插件RaterStar顺利毕业">jQuery投票插件RaterStar顺利毕业 (25)</a></li>
<li><a href="http://www.raychou.com/chou/posts/303.htm" title="jQuery Rater Star Plugin 修正：自定义Title后无法点击星星">jQuery Rater Star Plugin 修正：自定义Title后无法点击星星 (3)</a></li>
<li><a href="http://www.raychou.com/chou/posts/221.htm" title="轻量级表单验证插件 jQuery.Validation">轻量级表单验证插件 jQuery.Validation (3)</a></li>
<li><a href="http://www.raychou.com/chou/posts/352.htm" title="RaterStar更新：支持自定义鼠标悬停Title">RaterStar更新：支持自定义鼠标悬停Title (2)</a></li>
<li><a href="http://www.raychou.com/chou/posts/327.htm" title="LinkageSelect新增AJAX方式调用数据">LinkageSelect新增AJAX方式调用数据 (4)</a></li>
</ul>
<hr />
本文出自<a href="http://www.raychou.com/chou">周帆的Web实验室</a>，转载时请注明作者及出处
<br />
<a href="http://www.raychou.com/chou/posts/317.htm">查看原文</a> |
<a href="http://www.raychou.com/chou/posts/317.htm#comments">已有7位网友发表了评论</a>]]></content:encoded>
			<wfw:commentRss>http://www.raychou.com/chou/posts/317.htm/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
