<?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>fatkun&#039;s blog &#187; jquery插件</title>
	<atom:link href="http://fatkun.com/tag/jquery%e6%8f%92%e4%bb%b6/feed" rel="self" type="application/rss+xml" />
	<link>http://fatkun.com</link>
	<description>又一个 WordPress 站点</description>
	<lastBuildDate>Sun, 05 Feb 2012 15:21:33 +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>2009 年度最佳 jQuery 插件</title>
		<link>http://fatkun.com/2009/12/the-best-jquery-plugins-of-2009.html</link>
		<comments>http://fatkun.com/2009/12/the-best-jquery-plugins-of-2009.html#comments</comments>
		<pubDate>Sat, 12 Dec 2009 11:03:20 +0000</pubDate>
		<dc:creator>fatkun</dc:creator>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[jquery插件]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[upload]]></category>

		<guid isPermaLink="false">http://fatkun.com/?p=84</guid>
		<description><![CDATA[jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery  的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。 拉洋片 在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。 AnythingSlider 由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。 Easy Slider 这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。 Coda-Slider 2.0 Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。 图片库 那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。 Galleria 这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。 jQuery Panel Gallery 一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。 slideViewer slideViewer [...]]]></description>
			<content:encoded><![CDATA[<p>jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery  的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 <a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://www.webdesignledger.com/">webdesignledger.com</a> 网站推选的2009年度最佳 jQuery 插件。</p>
<h3 style="line-height: 32px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #c0c0c0;">拉洋片</h3>
<p>在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://css-tricks.com/anythingslider-jquery-plugin/" target="_blank">AnythingSlider</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://css-tricks.com/anythingslider-jquery-plugin/" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_1.jpg" alt="jquery plugins" /></a></p>
<p>由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。</p>
<p><span id="more-84"></span></p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider" target="_blank">Easy Slider</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_3.jpg" alt="jquery plugins" /></a></p>
<p>这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.ndoherty.biz/tag/coda-slider/" target="_blank">Coda-Slider 2.0</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.ndoherty.biz/tag/coda-slider/" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_7.jpg" alt="jquery plugins" /></a></p>
<p>Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。</p>
<h3 style="line-height: 32px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #c0c0c0;">图片库</h3>
<p>那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://devkick.com/lab/galleria/" target="_blank">Galleria</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://devkick.com/lab/galleria/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_4.jpg" alt="jquery plugins" /></a></p>
<p>这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.catchmyfame.com/2009/08/13/jquery-panel-gallery-1-1-plugin-released/" target="_blank">jQuery Panel Gallery</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.catchmyfame.com/2009/08/13/jquery-panel-gallery-1-1-plugin-released/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_5.jpg" alt="jquery plugins" /></a></p>
<p>一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" target="_blank">slideViewer</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_10.jpg" alt="jquery plugins" /></a></p>
<p>slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://www.buildinternet.com/project/supersized/" target="_blank">Supersized</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://www.buildinternet.com/project/supersized/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_6.jpg" alt="jquery plugins" /></a></p>
<p>一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。</p>
<h3 style="line-height: 32px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #c0c0c0;">导航</h3>
<p>我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery  导航插件。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://pupunzi.open-lab.com/mb-jquery-components/mb-_menu/" target="_blank">jquery mb.menu</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://pupunzi.open-lab.com/mb-jquery-components/mb-_menu/" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_8.jpg" alt="jquery plugins" /></a></p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial" target="_blank">Horizontal Scroll Menu with jQuery</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_16.jpg" alt="jquery plugins" /></a></p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.newmediacampaigns.com/page/autosprites-jquery-menu-plugin" target="_blank">AutoSprites</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.newmediacampaigns.com/page/autosprites-jquery-menu-plugin" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_9.jpg" alt="jquery plugins" /></a></p>
<h3 style="line-height: 32px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #c0c0c0;">表单和表格</h3>
<p>在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery  插件帮你完成这些任务。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.unwrongest.com/projects/password-strength/" target="_blank">Password Strength</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.unwrongest.com/projects/password-strength/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_12.jpg" alt="jquery plugins" /></a></p>
<p>这个插件帮你评估用户输入的密码是否足够强壮。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin" target="_blank">Ajax Fancy Capcha</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_13.jpg" alt="jquery plugins" /></a></p>
<p>顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.chromaloop.com/posts/chromatable-jquery-plugin" target="_blank">Chromatable</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.chromaloop.com/posts/chromatable-jquery-plugin" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/11/jquery_tables_10.jpg" alt="jquery tables" /></a></p>
<p>这个插件可以帮助你在表格上实现滚动条。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/" target="_blank">jqTransform</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_14.jpg" alt="jquery plugins" /></a></p>
<p>一个式样插件，帮助你对表单中的控件进行式样控制。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://www.uploadify.com/" target="_blank">Uploadify</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://www.uploadify.com/" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_15.jpg" alt="jquery plugins" /></a></p>
<p>实现多个文件同时上传。</p>
<h3><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx" target="_blank">jExpand</a></h3>
<p><a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #305080;" href="http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx" target="_blank"><img style="border: 1px solid #c0c0c0;" src="http://webdesignledger.com/wp-content/uploads/2009/11/jquery_tables_1.jpg" alt="jquery tables" /></a></p>
<p>一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。</p>
<p>本文来源：<a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009">http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009</a><br />
中文翻译来源：<a style="font-family: Arial, 宋体; font-size: 12px; text-decoration: none; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: initial; color: #800080;" href="http://www.comsharp.com/">COMSHARP CMS 企业网站内容管理系统官方站</a></p>
]]></content:encoded>
			<wfw:commentRss>http://fatkun.com/2009/12/the-best-jquery-plugins-of-2009.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

