Supongamos que tenemos la siguiente lista:
<ul>
<li>manzanas</li>
<li>fresas</li>
<li>peras</li>
</ul>
<ul>
<li>tomates</li>
<li>zanahorias</li>
</ul>
para numerarla mediante Jquery podemos utilizar la función prepend:
$(document).ready(function() {
$('ul > li').each(function () {
$(this).prepend("(" +
($(this).index() + 1) + ") ");
});
});
El siguiente snippet permite extraer el último tweet mediante jQuery y JSON.
$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
$("#twitter").html(data[0].text);
});
Donde username es el nombre de usuario del que deseamos extraer el último tweet. Por ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tweet</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://twitter.com/statuses/user_timeline/webintenta.json?callback=?", function(data) {
$("#twitter").html(data[0].text);
});
});
</script>
<style type="text/css">
#twitter{
padding:5px;
font-family: Arial, Helvetica, Sans-serif;
font-size:13px;
color:#666;
background:#E8E8E8;
border:1px solid #CCC;
width:300px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="twitter"></div>
</body>
</html>
CraftySlide es un plugin para jquery que nos permite crear un slideshow de un modo muy sencillo. Basta con un HTML similar al siguiente:
<div id="slideshow">
<ul>
<li>
<img src="images/image1.jpg" title="Lorem ipsum dolor sit amet" />
</li>
<li>
<img src="images/image2.jpg" title="Lorem ipsum dolor sit amet" />
</li>
<li>
<img src="images/image3.jpg" title="Lorem ipsum dolor sit amet" />
</li>
</ul>
</div>
Incluir los ficheros javascript y CSS incluidos en el paquete del plugin, junto con jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script> <script src="js/craftyslide.js"></script> <link rel="stylesheet" href="css/craftyslide.css" />
e inicializar el carrusel de imágenes:
$(document).ready(function() {
$("#slideshow").craftyslide();
});
CSS3 nos permite rotar letras, pero es bastante complicado organizar cada letra a lo largo de un trazado curvo. Arctext.js es un plugin de jQuery que nos permite hacer exactamente eso de un modo sencillo. Basado en Lettering.js, calcula la rotación correcta de cada letra y distribuye los caracteresm de un modo equidistante en el arco.
ResponsiveSlides.js es un pequeño plugin de jQuery que crea un slideshow "responsive" dentro de un solo contenedor. Funciona con una amplia gama de navegadores incluyendo todas las versiones de IE desde IE6 en adelante. También agrega soporte CSS para max-width en los navegadores IE6 y otros que no lo soporten de forma nativa. La única dependencia es jQuery y que todas las imágenes sean del mismo tamaño.
La mayor diferencia con respecto a otros plugins "responsive" es el tamaño (~ 1kb miniaturizado y comprimido).