Tag Archive for: tutorial jquery

06Oct 2011 9 Comments */?>

Plugin jQuery para limitar caracteres en un campo de texto

Categories: JQuery, Plugins jQuery, Tutoriales - Tags: , ,

[offtopic] Antes de empezar este artículo quiero dar mis condolencias a la Familia Jobs. Para mi Steve Jobs siempre fue un grande , incluso antes de enamorarme de sus productos y SO. Siempre recomiendo ver un discurso dado por el para los alumnos de Standford Bridge. Lo pueden encontrar en http://www.youtube.com/watch?feature=player_embedded&v=14v3kV47oZU [/offtopic]

Hoy les voy a enseñar 2 cosas. Como limitar los caracteres de un campo de texto ya sea un textarea o un input y como crear un plugin de Jquery.
Read more

11Nov 2010 29 Comments */?>

Como crear una aplicación de Twitter con PHP

Categories: JQuery, Tutoriales, Twitter - Tags: , ,

Hace unos días les hable de como integrar Twitter anywhere en 5 minutos y luego les mostré un poco acerca de la nueva api javascript de @anywhere, incluso hace tiempo les explique como actualizar twitter a través de PHP + Oauth.

En este último articulo utilizaba una librería de PHP llamada twitteroauth.php que hoy voy a explicar un poco más , y les va a permitir junto con un poquito de JQuery crear una aplicación completa de twitter en PHP siempre que lo requieran.

Read more

09Jul 2009 16 Comments */?>

Como redondear las esquinas de un DIV con jquery.corners

Categories: JQuery, Tutoriales - Tags: ,

Si hay algo que me gusta usar en mis proyectos son cuadros con esquinas redondeadas. Siempre queda bien y le da un aire moderno a la web. Es muy facil de hacer y tiene un monton de utilidades como por ejemplo para marcos de fotos, redondear tablas, botones o simplemente divs redondos.

rounded

Hay infinidad de plugins que cumplen esta función pero a mi el que más me gusta es JQuery Corners.

Para utilizarlo como siempre debemos utilizar la ultima version de JQuery y del plugin.

1
2
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>

Con esto tendriamos el plugin cargado. En este ejemplo voy a hacer que tanto el div como la foto tengan tengan la clase “rounded” por lo que para aplicar el plugin hago lo siguiente:

1
2
3
4
5
6
7
<script type="text/javascript">
 
$(document).ready(function(){
//espero que cargue el DOM y aplico el plugin a todos los elemento con clase rounded
	$('.rounded').corners();
		});
</script>

Tan solo nos quedaria añadir el código HTML :

1
2
3
4
5
<div id="wrapper">
<div id="cuadro1" class="rounded"> Div con gif degradado de fondo </div>
 
<img id="cuadro2" class="rounded" src="images/gatito.jpg"/>  Marco para foto redondo 
</div>

Y aplicarle un estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#cuadro1{
	background:#D7E9F3 url(images/intro2.gif) repeat-x scroll left top;
	margin-bottom:50px;
	padding:30px 80px;
}
#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
    border:1px solid #CCCCCC;
	margin-right:50px;
}
#wrapper{
	width:370px;
	margin:0 auto;
}
</style>

Otra cosa a tener en cuenta es que podemos pasarle opciones como por ejemplo un radio de 8px y que sea transparente (en caso de tener imagenes o hover states):

1
$('.rounded').corners("8px transparent");

Pueden ver el ejemplo terminado en esta página.

Descargar Ejemplo

ACTUALIZACIÓN
Como menciona Jereny en IE no redondea las imágenes. Si quieren hacer un marco para la imagen redondeado lo pueden hacer de la siguiente forma:

1
<div id="cuadro2" class="rounded"><img  src="images/gatito.jpg"/></div>  Marco para foto redondo

El código CSS varia en cuanto a IE como Firefox

1
2
3
4
5
#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
        border:1px solid #CCCCCC;  <------ ESTA LINEA NO FUNCIONA EN IE, ya que no redondea el borde
	}