<?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>AddyOsmani.com &#124; Where Web Businesses Grow &#187; user interface</title>
	<atom:link href="http://addyosmani.com/blog/tag/user-interface/feed/" rel="self" type="application/rss+xml" />
	<link>http://addyosmani.com/blog</link>
	<description>This is the home of Addy Osmani (Web Developer, Designer &#38; Author). Here you can find some great tips and tutorials on everything to do with web development and even a few useful code samples!</description>
	<lastBuildDate>Sun, 25 Jul 2010 14:41:34 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>22 Excellent Examples of Advanced jQuery UI&#039;s in action</title>
		<link>http://addyosmani.com/blog/22-excellent-examples-of-advanced-jquery-uis-in-action/</link>
		<comments>http://addyosmani.com/blog/22-excellent-examples-of-advanced-jquery-uis-in-action/#comments</comments>
		<pubDate>Wed, 16 Sep 2009 04:14:31 +0000</pubDate>
		<dc:creator>Addy</dc:creator>
				<category><![CDATA[Resources]]></category>
		<category><![CDATA[advanced]]></category>
		<category><![CDATA[core]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jquery core]]></category>
		<category><![CDATA[jquery ui]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[user interface]]></category>
		<category><![CDATA[yui]]></category>

		<guid isPermaLink="false">http://addyosmani.com/blog/22-excellent-examples-of-advanced-jquery-uis-in-action/</guid>
		<description><![CDATA[jQuery is one of the most widely adopted javascript frameworks in the wild with millions of developers around the World using it daily in their projects. As a result of it&#8217;s growth, developers have been able to let their imagination run wild when it comes to designing exciting new interfaces that are both rich, exciting [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://3.bp.blogspot.com/_M_BKbuAia5k/Sp4BCtI03jI/AAAAAAAAAIc/1bzq6DsICsY/s1600-h/22.jpg"><img style="display: block; float: none; margin-left: auto; margin-right: auto" src="http://3.bp.blogspot.com/_M_BKbuAia5k/Sp4BCtI03jI/AAAAAAAAAIc/1bzq6DsICsY/s400/22.jpg" border="0" /></a></p>
<p><b>     <br /></b></p>
<p><strong>jQuery</strong> is one of the most widely adopted <strong>javascript frameworks</strong> in the wild with millions of developers around the World using it daily in their projects. As a result of it&#8217;s growth, developers have been able to let their imagination run wild when it comes to designing <strong>exciting new interfaces that are both rich, exciting and intuitive</strong>.</p>
<p>&#160;</p>
<p> In this post I’m going to share the <strong>top 22</strong> pages using jQuery that I felt deserved a mention &#8211; you’ll everything from fun but humble new ways to offer your users a Captcha to a completely javascript based Robot animation. Heard about the Google API but haven’t had the chance to play around with it yet? </p>
<p> <span id="more-37"></span>
<p>&#160;</p>
<p>There’s an even a good <strong>Google Maps jQuery</strong> example included.&#160; Why not take 20 minutes out of your evening to play around with some of the <strong>demos </strong>below? You could be pleasantly surprised at what you learn ; )</p>
</p></div>
<p>&#160;</p>
<ol>
<li><a href="http://yensdesign.com/tutorials/musicplayer/?&amp;sitereferring=blarnee.com">A completely interactive music player powered by mouse gestures and your keyboard</a></li>
<li><a href="http://www.mattryall.net/demo/atlassian-vis/contributors/?&amp;sitereferring=blarnee.com">A a tree graph visualisation linking commenters and blog post authors done using Processing.js &#8211; a great example of real-time image processing using HTML5</a></li>
<li><a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin/?&amp;sitereferring=blarnee.com">A really nice Ajax based Captcha using draggable components and jQuery</a></li>
<li><a href="http://www.benjaminsterling.com/wp-content/files/porfolio1/?&amp;sitereferring=blarnee.com">The vertical-sliding Portfolio &#8211; a great example of how to use jQuery for animations effectively</a></li>
<li><a href="http://olbertz.de/jquery/googlemap.html">jQuery and GoogleMaps &#8211; how to do use Zoom effects in the wild</a></li>
<li><a href="http://designshack.co.uk/articles/navigation/creating-a-jquery-dashboard/?&amp;sitereferring=blarnee.com">A jQuery dashboard like the one found on a Mac</a></li>
<li><a href="http://fmarcia.info/jquery/tetris/tetris.html">How to use jQuery to create an online version of Tetris</a></li>
<li><a href="http://abeautifulsite.net/notebook_files/58/demo/?&amp;sitereferring=blarnee.com">A slick, fast jQuery based File-tree for navigation</a></li>
<li><a href="http://www.filamentgroup.com/examples/charting/?&amp;sitereferring=blarnee.com">Dynamic editable charts using jQuery &#8211; learn how to create pie charts on the fly!</a></li>
<li><a href="http://nettuts.s3.amazonaws.com/152_jqueryBook/source/source/index.html">Create an Amazon.com style Book Sliding widget</a></li>
<li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/create-a-twitter-like-load-more-widget/">An awesome Twitter-like load more widget from David Walsh</a></li>
<li><a href="http://test.creativityden.com/cartoon_landscape/">How to create an animated Landscape for your site intro using jQuery</a></li>
<li><a href="http://nettuts.s3.amazonaws.com/065_jQueryTextSlider/Text%20Slider%20Demo/index.html">The jQuery text-resizer &#8211; resize text in a given form field using a slider component</a></li>
<li><a href="http://malsup.com/jquery/cycle/adv.html">The Picture cycle plugin &#8211; create amazing animated image effects using minimal code</a></li>
<li><a href="http://nettuts.s3.amazonaws.com/196_jquery/index.htm">Create a beautiful filterable portfolio of websites or other content using jQuery (recommended)</a></li>
<li><a href="http://www.flowplayer.org/tools/scrollable.html">Scrollable &#8211; a nice scroller for making any div content scroll smoothly within a carousel</a></li>
<li><a href="http://css-tricks.com/jquery-robot/?&amp;sitereferring=blarnee.com">A jQuery animated Robot cartoon powered completely by JavaScript and CSS</a></li>
<li><a href="http://web-kreation.com/demos/Sliding_login_panel_jquery/?&amp;sitereferring=blarnee.com">A slick sliding login panel</a></li>
<li><a href="http://yensdesign.com/tutorials/tabs/?&amp;sitereferring=blarnee.com">Create a smooth tabbled menu like the type found in many Web 2.0 wordpress templates</a></li>
<li><a href="http://www.open-lab.com/mb.ideas/index.html#">The m.b ideas jQuery menu using Ajax for content retrieval</a></li>
<li><a href="http://jqueryfordesigners.com/demo/radio1.html">The BBC Radio 1 Zoom tabs &#8211; used to zoom out images using your mouse</a></li>
<li><a href="http://jyoseph.com/social/?&amp;sitereferring=blarnee.com">A jQuery version of the Tumblr OpenSocial sharing widget</a></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://addyosmani.com/blog/22-excellent-examples-of-advanced-jquery-uis-in-action/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
