<?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>Caty&#039;s Blog &#187; ajax</title>
	<atom:link href="http://blogs.catydesign-studio.com/tag/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://blogs.catydesign-studio.com</link>
	<description>Personal blogs of design, life, graphic, tokidoki..</description>
	<lastBuildDate>Sun, 20 Nov 2011 01:52:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>jQuery plugins</title>
		<link>http://blogs.catydesign-studio.com/2009/03/12/jquery-plugins/</link>
		<comments>http://blogs.catydesign-studio.com/2009/03/12/jquery-plugins/#comments</comments>
		<pubDate>Thu, 12 Mar 2009 03:37:34 +0000</pubDate>
		<dc:creator>Caty</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Javascript & Ajax]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugin]]></category>

		<guid isPermaLink="false">http://blogs.catydesign-studio.com/?p=199</guid>
		<description><![CDATA[We have been hearing a lot about jQuery plugins in the recent years and here I compile a list of them for self-reference, hopefully it will be useful for some of you. For those who are new to jQuery, you might ask: What is jQuery? Extracted from the official home of jQuery.com: jQuery is a [...]]]></description>
			<content:encoded><![CDATA[<p>We have been hearing a lot about jQuery plugins in the recent years and here I compile a list of them for self-reference, hopefully it will be useful for some of you. For those who are new to jQuery, you might ask:</p>
<h3 class="articles">What is jQuery?</h3>
<p class="thumbn"><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_00.jpg" alt="jQuery" width="265" height="194" title="jQuery" /></p>
<p>Extracted from the official home of <a href="http://jquery.com/" target="_blank" title="jQuery Homepage">jQuery.com</a>: </p>
<blockquote class="postbq"><p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p></blockquote>
<p>Let&#8217;s go straight to explore the cool plugins now&#8230;</p>
<p><span id="more-199"></span></p>
<div class="dayintro">
<p>1. <a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/" target="_blank" title="Accordion">Accordion</a></p>
<p>This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. <a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/" target="_blank" title="Accordion">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_01.jpg" alt="Accordion" width="355" height="214" title="Accordion" /></p>
<p>2. <a href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/" target="_blank" title="jQuery Menu">jQuery Menu</a></p>
<p>This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want;  <a href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/" target="_blank" title="jQuery Menu">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_02.jpg" alt="jQuery Menu" width="315" height="202" title="jQuery Menu" /></p>
<p>3. <a href="http://users.tpg.com.au/j_birch/plugins/superfish/" target="_blank" title="Superfish">Superfish: Suckerfish-style menu</a></p>
<p>Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript). <a href="http://users.tpg.com.au/j_birch/plugins/superfish/" target="_blank" title="Superfish">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_03.jpg" alt="Superfish" width="390" height="233" title="Superfish" /></p>
<p>4. <a href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank" title="Cool animated navigation menu">Cool animated navigation menu</a></p>
<p>A cool animated menu built with css and jQuery. <a href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank" title="Cool animated navigation menu">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_04.jpg" alt="Cool animated navigation menu" width="390" height="122" title="Cool animated navigation menu" /></p>
<p>5. <a href="http://www.mind-projects.it/projects/jqzoom/" target="_blank" title="JQZoom">JQZoom</a></p>
<p>JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework. It uses script to magnify what you want. <a href="http://www.mind-projects.it/projects/jqzoom/" target="_blank" title="JQZoom">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_05.jpg" alt="JQZoom" width="390" height="233" title="JQZoom" /></p>
<p>6. <a href="http://www.maaki.com/thomas/SmoothDivScroll/" target="_blank" title="Smooth Div Scroll">Smooth Div Scroll</a></p>
<p>Smooth Div Scroll is a jQuery plugin that scrolls content left or right which does not limit the scroling to distinct steps. Scrolling is smooth and there are no visible buttons or links since the scrolling is done using hotspots within the scrollable area. <a href="http://www.maaki.com/thomas/SmoothDivScroll/" target="_blank" title="Smooth Div Scroll">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_06.jpg" alt="Smooth Div Scroll" width="390" height="233" title="Smooth Div Scroll" /></p>
<p>7. <a href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank" title="jQuery lightBox plugin">jQuery lightBox plugin</a></p>
<p>jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. <a href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank" title="Accordion">Read more &raquo;</a> <br />
<script type="text/javascript"><!--
google_ad_client = "pub-1105921072081103";
google_ad_slot = "6655901101";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_07.jpg" alt="jQuery lightBox plugin" width="371" height="278" title="jQuery lightBox plugin" /></p>
<p>8. <a href="http://www.lullabot.com/articles/beautytips-09-release" target="_blank" title="BeautyTips">BeautyTips</a></p>
<p>BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec in order to dynamically draw tooltips (sometimes called &#8220;talk bubbles&#8221; or &#8220;help balloons&#8221;) associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways. <a href="http://www.lullabot.com/articles/beautytips-09-release" target="_blank" title="BeautyTips">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_08.jpg" alt="BeautyTips" width="278" height="312" title="BeautyTips" /></p>
<p>9. <a href="http://plugins.jquery.com/project/jCountdown" target="_blank" title="jCountdown">jCountdown</a></p>
<p>Creates a visual countdown timer of days, hours, minutes and seconds till the provided date. <a href="http://plugins.jquery.com/project/jCountdown" target="_blank" title="jCountdown">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_09.jpg" alt="jCountdown" width="248" height="63" title="jCountdown" /></p>
<p>10. <a href="http://code.google.com/p/jquery-ahover/wiki/Documentation" target="_blank" title="Animated Hover">Animated Hover</a></p>
<p>Animated Hover is a plugin for jQuery to create animated hover effects. <a href="http://code.google.com/p/jquery-ahover/wiki/Documentation" target="_blank" title="Animated Hover">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_10.jpg" alt="Animated Hover" width="337" height="220" title="Animated Hover" /></p>
<p>11. <a href="http://sorgalla.com/jcarousel/" target="_blank" title="jCarousel">jCarousel</a></p>
<p>jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation). <a href="http://sorgalla.com/jcarousel/" target="_blank" title="jCarousel">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_11.jpg" alt="jCarousel" width="329" height="121" title="jCarousel" /></p>
<p>12. <a href="http://icon.cat/wiki/IconDock_En#iconDock_jQuery_Plugin" target="_blank" title="iconDock">iconDock</a></p>
<p>iconDock is a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one. It is based on the Google X menu, an approach that Google did to create this effect on the web.  <a href="http://icon.cat/wiki/IconDock_En#iconDock_jQuery_Plugin" target="_blank" title="iconDock">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_12.jpg" alt="iconDock" width="304" height="126" title="iconDock" /></p>
<p>13. <a href="http://www.reindel.com/accessible_news_slider/" target="_blank" title="Accessible News Slider ">Accessible News Slider </a></p>
<p>Accessible News Slider is a JavaScript plugin built for the jQuery library. <a href="http://www.reindel.com/accessible_news_slider/" target="_blank" title="Accessible News Slider ">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_13.jpg" alt="Accessible News Slider " width="447" height="187" title="Accessible News Slider " /></p>
<p>14. <a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/" target="_blank" title="Slide out and drawer effect">Slide out and drawer effect</a></p>
<p>Slide out and drawer effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks. <a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/" target="_blank" title="Slide out and drawer effect">Read more &raquo;</a></p>
<p><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_14.jpg" alt="Slide out and drawer effect" width="283" height="127" title="Slide out and drawer effect" /></p>
<p>15. <a href="http://www.makemineatriple.com/jquery/?newsTicker" target="_blank" title="News ticker">News ticker (BBC style)</a></p>
<p>News ticker in the style of that used on the BBC news site. <a href="http://www.makemineatriple.com/jquery/?newsTicker" target="_blank" title="News ticker">See Demo &raquo;</a></p>
<div class="nextsect"><!-- --></div>
<p>There are still tons of great jQuery plugins out there. Simply google it and you&#8217;ll see what I mean. <br />
<script type="text/javascript"><!--
google_ad_client = "pub-1105921072081103";
google_ad_slot = "6655901101";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>And now, last but not least, here is a great tutorial about jQuery Sequential List, a good example to make use of jQuery. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. <a href="http://www.webdesignerwall.com/tutorials/jquery-sequential-list/" target="_blank" title="jQuery Sequential List">Read more &raquo;</a></p>
<p> <a href="http://www.webdesignerwall.com/tutorials/jquery-sequential-list/" target="_blank" title="jQuery Sequential List"><img src="http://blogs.catydesign-studio.com/images/uploads/2009/03/jq_16.jpg" alt="jQuery Sequential List" width="447" height="280" border="0" title="jQuery Sequential List" /></a></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blogs.catydesign-studio.com/2009/03/12/jquery-plugins/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

