<?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>Scriptmatico.Com &#187; jQuery</title>
	<atom:link href="http://www.scriptmatico.com/category/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.scriptmatico.com</link>
	<description>Blog de tecnologia, programacion, articulos y mas...</description>
	<lastBuildDate>Thu, 01 Apr 2010 00:43:08 +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>Scroll Imagen jQuery &#8211; Scroller de Imagenes con jQuery</title>
		<link>http://www.scriptmatico.com/2009/10/07/scroll-imagen-jquery-scroller-de-imagenes-con-jquery/</link>
		<comments>http://www.scriptmatico.com/2009/10/07/scroll-imagen-jquery-scroller-de-imagenes-con-jquery/#comments</comments>
		<pubDate>Wed, 07 Oct 2009 16:58:27 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Image Scroller]]></category>
		<category><![CDATA[Imagen Scroller]]></category>
		<category><![CDATA[jQuery Scroller]]></category>
		<category><![CDATA[Scroller]]></category>

		<guid isPermaLink="false">http://www.scriptmatico.com/?p=307</guid>
		<description><![CDATA[
En este tutorial, vamos a construir un scroller de imagenes, haciendo uso de las características de animación de jQuery. Los Scrollers de imagenes no son nada nuevo; y diariamente salen mas versiones de estos scrollers. Pero esos scroller tienen que tener interaccion con el usuario, lo que significa que para que el contenido que se [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.scriptmatico.com/wp-content/uploads/2009/10/jquryslider.png"><img class="alignnone size-medium wp-image-308" title="jquryslider" src="http://www.scriptmatico.com/wp-content/uploads/2009/10/jquryslider.png" alt="" width="300" height="115" /></a></p>
<p>En este tutorial, vamos a construir un scroller de imagenes, haciendo uso de las características de animación de jQuery. Los Scrollers de imagenes no son nada nuevo; y diariamente salen mas versiones de estos scrollers. Pero esos scroller tienen que tener interaccion con el usuario, lo que significa que para que el contenido que se muestra cambie, el visitante debe hacer clic en un botón o realizar alguna otra acción. Este scroller será diferente, ya que será totalmente autónomo, y comenzar a desplazarse una vez que se carga la página.</p>
<p>Aqui les dejo los links a los archivos usados en este demo:</p>
<p><a href="http://nettuts.s3.amazonaws.com/300_jquery/image%20Scroller.zip">Descargar Demo </a></p>
<p><a href="http://nettuts.s3.amazonaws.com/300_jquery/image%20Scroller/imageScroller.html" target="_blank"> Ver Demo</a></p>
<p class="akst_link"><a target="_blank" href="http://www.scriptmatico.com/?p=307&amp;akst_action=share-this"  title="Comparte esta publicaci&oacute;n en technorati, meneame, etc." id="akst_link_307" class="akst_share_link" rel="nofollow">Comp&aacute;rtelo!</a>
</p><p align="left"><a target="_blank" class="tt" href="http://twitter.com/home/?status=Scroll+Imagen+jQuery+%E2%80%93+Scroller+de+Imagenes+con+jQuery+http://z7xhw.th8.us" title="Enviar a Twitter"><img class="nothumb" src="http://www.scriptmatico.com/wp-content/plugins/tweet-this/icons/tt-twitter-big2.png" alt="Post to Twitter" /></a> <a target="_blank" class="tt" href="http://twitter.com/home/?status=Scroll+Imagen+jQuery+%E2%80%93+Scroller+de+Imagenes+con+jQuery+http://z7xhw.th8.us" title="Enviar a Twitter">   </a></p>]]></content:encoded>
			<wfw:commentRss>http://www.scriptmatico.com/2009/10/07/scroll-imagen-jquery-scroller-de-imagenes-con-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Creando Una Interfaz de Tabs Usando jQuery y CSS</title>
		<link>http://www.scriptmatico.com/2009/10/07/creando-una-interfaz-de-tabs-usando-jquery-y-css/</link>
		<comments>http://www.scriptmatico.com/2009/10/07/creando-una-interfaz-de-tabs-usando-jquery-y-css/#comments</comments>
		<pubDate>Wed, 07 Oct 2009 16:28:30 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.scriptmatico.com/?p=305</guid>
		<description><![CDATA[Para aquellos que deseaban crear TABS para sus aplicaciones en esta ocacion usaremos una de las bibliotecas de jQuery denominada jQuery UI Library, que es la libreria para la creacion de Interfaz del usuario , nettuts ha preparado un extraordinario tutorial muy simple de seguir, y con el cual aprenderan a montarlo y conocer como [...]]]></description>
			<content:encoded><![CDATA[<p>Para aquellos que deseaban crear TABS para sus aplicaciones en esta ocacion usaremos una de las bibliotecas de jQuery denominada jQuery UI Library, que es la libreria para la creacion de Interfaz del usuario , <a href="http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/">nettuts</a> ha preparado un extraordinario tutorial muy simple de seguir, y con el cual aprenderan a montarlo y conocer como diseñarlos desde cero.</p>
<p>A continuacion les pongo los links de descarga y demo de la aplicación.</p>
<p>Estoy seguros de que quedaran encantados.</p>
<p>Ver <a href="http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html">Demo </a>- <a href="http://nettuts.s3.amazonaws.com/042_jQueryUITabs/source.zip">Descarga </a>- Web Original <a href="http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/">Create A Tabbed Interface Using jQuery</a></p>
<p class="akst_link"><a target="_blank" href="http://www.scriptmatico.com/?p=305&amp;akst_action=share-this"  title="Comparte esta publicaci&oacute;n en technorati, meneame, etc." id="akst_link_305" class="akst_share_link" rel="nofollow">Comp&aacute;rtelo!</a>
</p><p align="left"><a target="_blank" class="tt" href="http://twitter.com/home/?status=Creando+Una+Interfaz+de+Tabs+Usando+jQuery+y+CSS+http://nqhki.th8.us" title="Enviar a Twitter"><img class="nothumb" src="http://www.scriptmatico.com/wp-content/plugins/tweet-this/icons/tt-twitter-big2.png" alt="Post to Twitter" /></a> <a target="_blank" class="tt" href="http://twitter.com/home/?status=Creando+Una+Interfaz+de+Tabs+Usando+jQuery+y+CSS+http://nqhki.th8.us" title="Enviar a Twitter">   </a></p>]]></content:encoded>
			<wfw:commentRss>http://www.scriptmatico.com/2009/10/07/creando-una-interfaz-de-tabs-usando-jquery-y-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Facebook lightbox &#8211; Plugin Lightbox para jQuery al estilo Facebook</title>
		<link>http://www.scriptmatico.com/2009/06/10/facebook-lightbox-plugin-lightbox-para-jquery-al-estilo-facebook/</link>
		<comments>http://www.scriptmatico.com/2009/06/10/facebook-lightbox-plugin-lightbox-para-jquery-al-estilo-facebook/#comments</comments>
		<pubDate>Wed, 10 Jun 2009 14:46:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Diseño]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Scripts]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.scriptmatico.com/?p=264</guid>
		<description><![CDATA[No cabe duda que los Lightbox son la forma mas elegante de mostrar imagenes y contenido en nuestras webs o blogs, pero hay tanta variedad de estos que muy pocos son los que realmente sobresalen, y en lo particular mi gusto esta en el Lightbox que usan en Facebook y como es normal en la [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_262" class="wp-caption alignnone" style="width: 273px"><a href="http://www.scriptmatico.com/wp-content/uploads/2009/06/fblb.jpg"><img class="size-medium wp-image-262" title="fblb" src="http://www.scriptmatico.com/wp-content/uploads/2009/06/fblb.jpg" alt="Facebook jQuery Lightbox" width="263" height="114" /></a><p class="wp-caption-text">Facebook jQuery Lightbox</p></div>
<p>No cabe duda que los Lightbox son la forma mas elegante de mostrar imagenes y contenido en nuestras webs o blogs, pero hay tanta variedad de estos que muy pocos son los que realmente sobresalen, y en lo particular mi gusto esta en el Lightbox que usan en Facebook y como es normal en la web, he encontrado un plugin Lightbox al estilo Facebook, este precioso plugin trabaja con jQuery y es muy sencillo de usar.</p>
<p>Instalacion:</p>
<div class="igBar"><span id="lhtml-4"><a href="#" onclick="javascript:showPlainTxt('html-4'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-4">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"jquery.js"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"/facebox/facebox.js"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Iniciar la instancia:</p>
<div class="igBar"><span id="lhtml-5"><a href="#" onclick="javascript:showPlainTxt('html-5'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-5">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery(document).ready(function($) {</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$('a[rel*=facebox]').facebox()</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}) </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Ejemplos de uso(Notese el atributo rel):</p>
<div class="igBar"><span id="lhtml-6"><a href="#" onclick="javascript:showPlainTxt('html-6'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-6">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">Llamando un archivo</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"facebox"</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"remote.html"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>text<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">Mostrando una imagen</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"facebox"</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"stairs.jpg"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>text<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">Mostrando contenido</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"facebox"</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#info"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>text<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>A continuacion les dejo el link de descarga, asi como la pagina del author.</p>
<p>¡Gracias <a href="http://famspam.com/facebox" target="_blank">famspam</a> por tan valioso script!.</p>
<p><a title="Descargar Facebook lightbox plugin para jQuery" href="http://famspam.com/facebox/releases/facebox-1.2.tar.gz" target="_blank">Descargar Plugin</a></p>
<p><a href="http://famspam.com/facebox">Pagina del Author</a></p>
<p class="akst_link"><a target="_blank" href="http://www.scriptmatico.com/?p=264&amp;akst_action=share-this"  title="Comparte esta publicaci&oacute;n en technorati, meneame, etc." id="akst_link_264" class="akst_share_link" rel="nofollow">Comp&aacute;rtelo!</a>
</p><p align="left"><a target="_blank" class="tt" href="http://twitter.com/home/?status=Facebook+lightbox+%E2%80%93+Plugin+Lightbox+para+jQuery+al+estilo+Facebook+http://c9itz.th8.us" title="Enviar a Twitter"><img class="nothumb" src="http://www.scriptmatico.com/wp-content/plugins/tweet-this/icons/tt-twitter-big2.png" alt="Post to Twitter" /></a> <a target="_blank" class="tt" href="http://twitter.com/home/?status=Facebook+lightbox+%E2%80%93+Plugin+Lightbox+para+jQuery+al+estilo+Facebook+http://c9itz.th8.us" title="Enviar a Twitter">   </a></p>]]></content:encoded>
			<wfw:commentRss>http://www.scriptmatico.com/2009/06/10/facebook-lightbox-plugin-lightbox-para-jquery-al-estilo-facebook/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Blogroll Dinamico Usando jQUERY</title>
		<link>http://www.scriptmatico.com/2008/12/03/blogroll-dinamico-usando-jquery/</link>
		<comments>http://www.scriptmatico.com/2008/12/03/blogroll-dinamico-usando-jquery/#comments</comments>
		<pubDate>Wed, 03 Dec 2008 15:07:27 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Diseño]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.exodo999.phpnet.us/2008/12/03/blogroll-dinamico-usando-jquery/</guid>
		<description><![CDATA[


La idea de contstruir este blog roll es usar las siguientes herramientas de desarrollo:

XHTML/CSS para obtener un diseño de widget.
Usaremos jQuery y Coda Slider plugin para la animacion.
Y para el contenido dinamico PHP y SimplePie.

Puedes Bajar el codigo de ejemplo dando click aqui o ver el demo.
Puedes igual visitar la pagina del author original del [...]]]></description>
			<content:encoded><![CDATA[<p><img  src="http://img530.imageshack.us/img530/6575/blogrollcf3.jpg" alt="" width="300" height="347" /></p>
<div style="clear:both;"></div>
<div>
La idea de contstruir este blog roll es usar las siguientes herramientas de desarrollo:</p>
<ul>
<li><strong>XHTML/CSS</strong> para obtener un diseño de widget.</li>
<li>Usaremos <a href="http://jquery.com/">jQuery</a> y <a href="http://www.ndoherty.com/demos/coda-slider/1.1.1/">Coda Slider plugin</a> para la animacion.</li>
<li>Y para el contenido dinamico <a href="http://www.php.net/">PHP</a> y <a href="http://simplepie.org/">SimplePie</a>.</li>
</ul>
<p>Puedes Bajar el codigo de ejemplo dando click <a href="http://nettuts.s3.amazonaws.com/036_BetterBlogRoll/sourceFiles.zip">aqui</a> o ver el <a href="http://nettuts.s3.amazonaws.com/036_BetterBlogRoll/sourceFiles/index.html" target="_blank">demo</a>.</p>
<p>Puedes igual visitar la pagina del author original del articulo <a href="http://nettuts.com/tutorials/javascript-ajax/building-a-better-blogroll-dynamic-fun-with-simplepie-and-jquery/">aqui.</a>
</div>
<p class="akst_link"><a target="_blank" href="http://www.scriptmatico.com/?p=146&amp;akst_action=share-this"  title="Comparte esta publicaci&oacute;n en technorati, meneame, etc." id="akst_link_146" class="akst_share_link" rel="nofollow">Comp&aacute;rtelo!</a>
</p><p align="left"><a target="_blank" class="tt" href="http://twitter.com/home/?status=Blogroll+Dinamico+Usando+jQUERY+http://yktmi.th8.us" title="Enviar a Twitter"><img class="nothumb" src="http://www.scriptmatico.com/wp-content/plugins/tweet-this/icons/tt-twitter-big2.png" alt="Post to Twitter" /></a> <a target="_blank" class="tt" href="http://twitter.com/home/?status=Blogroll+Dinamico+Usando+jQUERY+http://yktmi.th8.us" title="Enviar a Twitter">   </a></p>]]></content:encoded>
			<wfw:commentRss>http://www.scriptmatico.com/2008/12/03/blogroll-dinamico-usando-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
