2kBlog.net - Tutoriales web 2.0 » jQuery http://2kblog.net Diseño web 2.0, jQuery, twitter, tutoriales y un poco de programación y otras cosas interesantes de la red Tue, 15 Dec 2009 12:07:35 +0000 http://wordpress.org/?v=2.8.1 en hourly 1 Cambiar Opacidad con jQuery http://2kblog.net/cambiar-opacidad-con-jquery/ http://2kblog.net/cambiar-opacidad-con-jquery/#comments Mon, 10 Aug 2009 09:22:42 +0000 Krato http://2kblog.net/?p=236 Con el framework jquery podemos aparte derelaizar cosas como slideshows, tabs (como ya hemos visto), juegos etc, podemos por ejemplo cambiar las propiedades de nuestro css.

En éste caso vamos a ver como podemos cambiar la opacidad de una image, un div o cualquier elemento del html de nuestra página. Y para ello, aparte de llamar al framework de jQuery, deberemos usar la siguiente sintaxis.

jQuery('elemento').css("opacity", valor)
  1. Recordad que podemos usar o la palabra clave jQuery o el dolar $
  2. Elemento -> Elemento a cambiar la opacidad
  3. Valor _> EL valor que quermos darle. 0 significa que elemento tiene la opacidad al 0% y 1 que la tiene al 100%

En este ejemplo cambiaríamos la opacidad de todos las imágenes de nuestro html

jQuery('img').css("opacity", 0.7)

Pero si queremos que qude un poco más profesional, podemos por ejemplo jugar con las imágenes de nuestro html para que cuando estemos sobre ellas en vez de cambiar la opacidad de un modo brusco podemos usar el evento fadeTo para hacerlo de un modo más suave.

Pongamos un ejemplo:

jQuery(”img”).hover(function(){
jQuery(this).fadeTo(”slow”, 1.0); // Cambia la opacidad al 100 %
},function(){
jQuery(this).fadeTo(”slow”, 0.5); // Cambia la opacidad al 50% cuando el ya no  tiene el foco
});
jQuery("img").hover(function(){
 
    jQuery(this).fadeTo("slow", 1.0); // Cambia la opacidad al 100 %
 
 },function(){
 
    jQuery(this).fadeTo("slow", 0.5); // Cambia la opacidad al 50% cuando
                                  // ya no tiene el foco
});

Este ejemplo hará que  todas las ímagenes de nuestro html cambien a opacidad 100% cuando estemos sobre alguna de ellas y cuando no cambiará al 50% y todo ello de como si fuera un efecto de transición.

Y ahora os toca jugar a vosotros :bye_tb:

Os dejo un ejemplo simple para descargar y podais ver el efecto.

Opacidad con jQuery

]]> http://2kblog.net/cambiar-opacidad-con-jquery/feed/ 1 Slideshow con jQuery http://2kblog.net/slideshow-con-jquery/ http://2kblog.net/slideshow-con-jquery/#comments Thu, 06 Aug 2009 07:00:22 +0000 Krato http://2kblog.net/?p=229 En este videotutorial os enseñaré como crear fácilmente un slideshow de imágens. Pronto la descarga del ejemplo. :thumbup_tb:

Ya podeis descargaros el ejemplo (Se me había olvidado subirlo, jeje)

SlideShow con jQuery

]]> http://2kblog.net/slideshow-con-jquery/feed/ 0 Búsqueda al vuelo con jQuery http://2kblog.net/busqueda-al-vuelo-con-jquery/ http://2kblog.net/busqueda-al-vuelo-con-jquery/#comments Wed, 29 Jul 2009 19:00:16 +0000 Krato http://2kblog.net/?p=222 Con un sencillo script podremos incluir en nuestra página un buscador al vuelo del tetxo que ésta misma contenga.

Para éste tutorial utilizaremos un plugin externo que se encargará de resaltar el texto que le enviemos. Se trata del Highlight v3 para jQuery. Es muy fácil de usar y nosotros la vamos a utilizar para crear una búqueda “al vuelo” en nuestra página web mediante las herramientas que jQuery nos suministra.

En este caso vamos a crear un campo de texto y con el evnto keyUp de jQuery buscaremos en el texto.

El html de ejemplo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!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>Búsqueda al vuelo con jQuery</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="busca.js" type="text/javascript"></script>
<style type="text/css">
.marca{ background-color: yellow}
 
*{
margin:0;
padding:0;
}
 
li {
	list-style-type:none;
	float:left;
	display:inline;
}
 
p {clear:both; padding-top:30px;}
 
#contenedor{
	margin:30px;
}
 
#muestra {
	padding-left: 10px;
	font-weight:bold;
}
#bus {
	padding-left: 10px;
}
</style>
<body>
<div id="contenedor">
<ul>
  <li><label>
    <input type="text" name="textfield" id="texto" />
  </label></li>
  <li><span id="bus"></span>Texto buscado: <span id="muestra"></span></li>
</ul>
<p>
  Esto es un ejemplo de "búsqueda al vuelo" mediante jQuery. Un sencillo ejemplo  que puedes descargar desde <a href="http://2kblog.net">2kblog.net</a></p>
<p>This is an Example of "fly search" with jQuery. An easy example that can be downloaded from <a href="http://2kblog.net">2kblog.net</a></p>
<p>Este es el código js - This is the js code:</p>
<p>&nbsp;</p>
<code>
$(document).ready(function(){						   
 	jQuery('#texto').keyup(function (e) {
 
			$('body').quitamarca();
			q = $("#texto").val();
			if(q != "") {$('body').marca(q);} else {$("#muestra").text(" ");}
	 });
});
</code>
<p>Bye</p>
</div>
</body>
</html>

Como veis lo único que cargo es el jQuery de google y el js que he hecho.

Ahora veamos el js que es lo con l0 que funciona la búsqueda:

1
2
3
4
5
6
7
8

$(document).ready(function(){
 $(document).ready(function(){
 	jQuery('#texto').keyup(function (e) {
	  $('body').quitamarca();
	  q = $("#texto").val();
	  if(q != "") {$('body').marca(q);} else {$("#muestra").text(" ");}
	 });
});

Vamos a dividir el código:

  1. Le decimos que la función empieze cuando la tecla se levante con la función keyup. Si lo intentamos con el evento keypress no funcionará ya que la tecla que hayamos pulsado aún no se a añadido al campo de texto por lo que fallará. (He estado un buen rato para esa tontería jeje).
  2. Le quitamos la marca (por si hay alguna). Esto hace que si borramos se actualice la búqueda.
  3. Recogemos en la variable q el texto que hay en el campo con id=texto
  4. Si el campo no tiene nada no busca el texto y resetea el span que muestra el texto que hemos buscado. Si existe algo lo marca. Esto es necesario por si borramos el campo que no falle el javascript y la página se quede colgando.

Y ya tenemos nuestro buscador funcionando!

El css del ejemplo es muy simple pero bastante para ver como funciona ;)

Descarga el ejemplo:

Buscador al vuelo

]]> http://2kblog.net/busqueda-al-vuelo-con-jquery/feed/ 2 Tabs con jQuery? Fácil! http://2kblog.net/tabs-con-jquery-facil/ http://2kblog.net/tabs-con-jquery-facil/#comments Sat, 25 Jul 2009 16:23:28 +0000 Krato http://2kblog.net/?p=207 Hay muchas formas de crear tabs en Ajax. Si buscas en google o cualquier otro buscador podrás encontrar cientos de opciones igual de válidas. Pero yo os voy a enseñar una manera fácil de hacerlo en tan solo 10 lineas de código. Además es funcional tanto en Chrome, Firefox, Opera, Safari e incluso Internet Explorer.

Vamos a empezar por lo primero, el código html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQUery Tabs - 2kblog.net</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<link href="tabs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tabs.js"></script>
<script language="javascript" type="text/javascript">
	jQuery(document).ready(function(){
		jQuery("#tabs").tabs();
	});
 </script>
</head>
 
<body>
<div id="tabs">
    <ul class="misTabs"> 
	<li><a href="#blog" class="activa">2kBlog</a></li> 
	<li><a href="#tab1">Tab1</a></li> 
	<li><a href="#tab2">Tab 2</a></li> 
	</ul> 	 
	<div id="blog">
    	Ejemplo 1         
    </div> 
		Ejemplo 2
	</div> 
	<div id="tab2">
		Ejemplo 3
	</div> 
</div>
 
</body>
</html>

Vamos a desribir el código:

  1. Como siempre la llamada a jQuery alojada en google.
  2. La llamada al css y al javascript que haremos
  3. Para que funcione la función javascript deberemos tener una estructura igual a la mostrada en el ejmplo, es decir, un div general, dentro una lista y antes de cerrar el div general los distintos divs a los que llamaremos.
  4. Para que el script funcione debemos llamarle mandandole la id del div general, en mi caso: #tabs

Ahora veamos el js de 10 lineas: (lo pongo comentado para que lo veais)

1
2
3
4
5
6
7
8
9
10

jQuery.fn.tabs = function() {  //Creamos la función
	var elemento = jQuery(this);  //creamos una variable opara recoegr el elemento
	jQuery(elemento).find("div").hide().eq(0).show(); //Escondemos todas menos el primer elemento
	jQuery(elemento).find("ul li a").click(function(){ //para cada elemento clicado
		jQuery(elemento).find("ul li a").removeClass('activa'); //le quitamos la clase por si la tiene activa
		jQuery(this).addClass('activa'); //Añadimos la clase al elemento pulsado
		jQuery(elemento).find("div").hide(); //escondemos todos los divs
		jQuery( jQuery(this).attr('href') ).fadeIn(1000); //mostramos el div al elemento que hemos pulsado
	});
}

Lo único que hay que señalar es que podemos cambiar el modo en que se muestra y la velocidad. En vez de fadeIn podemos usar slideDown o slideToggle o simplemente show. Y en cuanto a la velocidad podemos usar milisegundos, o poner “slow” para lento, “fast” para rápido o “normal” para normal. (recordad que si ponemos 3000 serán 3 segundos)

Un ejmplo de la función con el css del ejemplo:

jQuery tabs - Facil!

Como podes ver podemos incluir texto o video o cualquier cosa que pensemos.

Podeis descargaros el ejemplo desde aquí:

jQuery Tabs

]]> http://2kblog.net/tabs-con-jquery-facil/feed/ 0 Menú en Acordeón en Ajax http://2kblog.net/menu-en-acordeon-en-ajax/ http://2kblog.net/menu-en-acordeon-en-ajax/#comments Wed, 22 Jul 2009 17:21:58 +0000 Krato http://2kblog.net/?p=149 Hoy veremos como crear un menu en forma de acordeón de forma sencilla tan solo con unos pocos pasos. Estos menus suelen estar en algún lateral de una web ya que se expenden o contraen de forma vertical. Éste ejemplo es muy sencillo aunque por supuesto también añadiré la descarga del archivo de ejemplo.

Bueno empecemos. Lo primo que debemos de crear el html que se necesita para que el ejemplo funcione correctamente. Ya que seguimos trabajando con jQuery necesitamos como en los otros ejemplos llamarlo, y que mejor que google. El código html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!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" />
 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script src="menu.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Menu en acordeón</title>
	<!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   </style>
   <![endif]-->
</head>
<body>
<ul id="menu">
	<li>
	 <a href="#">Menu 1</a> <!-- Un Menu  -->
<ul>
	<li><a href="#">Submenu 1</a></li>
<!-- Un SubMenu  -->
	<li><a href="#">Submenu 2</a></li>
</ul>
</li>
	<li>
	  <a href="#">Menu 2</a>
<ul>
	<li><a href="#">Submenu 1</a></li>
	<li><a href="#">Submenu 2</a></li>
</ul>
</li>
	<li><a href="http://www.kratoweb.com">Menu sin submenus</a></li>
</ul>
</body>
</html>

Lo importante:
El código en comentario es para que el ejemplo también funcione correctamente en Internet Explorer 8.

Como veis, debemos crear una lista no ordenada <ul> con el id menu. Y dentro de ese ul cada <li> será un menu (linea 21) y si dentro de cada <li> añadimos otra lista no ordenada con los items, estos serán los submenus (linea 23).

Y ahora el archivo js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function() {
  $('#menu ul').hide();
  $('#menu ul:first').show();
  $('#menu li a').click(
    function() {
      var elemento = $(this).next();
      if((elemento.is('ul')) && (elemento.is(':visible'))) {
		  elemento.slideUp('normal');
        return false;
        }
      if((elemento.is('ul')) && (!elemento.is(':visible'))) {
        elemento.slideDown('normal');
        return false;
        }
      }
    );
});

Es fácil no?  Oculta las <ul>, muestra el pimer grupo de submenus para que quede uno ya activo, y por cada enlace que se pulsa muestra o esconde los submenus.

Tambión podemos cambiar la velocidad, poniendo por ejemplo los segundos que queremos que tarde:

        elemento.slideDown(4000); //4 segundos

Aquí os dejo la descarga que incluye un simple css para que veais como queda con un estilo. Bye!

Menú en acordeón

]]> http://2kblog.net/menu-en-acordeon-en-ajax/feed/ 5 Scroll suavizado – Smooth scroll http://2kblog.net/scroll-suavizado-smooth-scroll/ http://2kblog.net/scroll-suavizado-smooth-scroll/#comments Mon, 20 Jul 2009 14:08:46 +0000 Krato http://2kblog.net/?p=128 En este entrada vamos a poder ver como crear un scroll suavizado con jQuery. Además es muy sencillo y personalizable. Un scroll suavizado o smooth scroll es una manera de desplazarnos entre los link que apuntan a la misma página (mediante los ids). En una página web normal, si pulsamos sobre un enlace que llama a otra parte de esa web esta carga sin hacerlo de una manera bonita. Mediante este plugin la página se desplazará automaticamente hacia esa id.

Comencemos con el código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('a[href*=#]').click(function() {
  var name = jQuery(this).attr('href');
  var no = new Array ('#otro', '#otro');
  var  total = no.length;
  var velocidad = 2000;
 
  for (i=0;i<=total;i++) {
	   if(no[i] == name){
	   return false;
  		}
	} 
 
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var target = jQuery(this.hash);
   target = target.length && target
 
   || jQuery('[name=' + this.hash.slice(1) +']');
   if (target.length) {
  var targetOffset = target.offset().top;
  jQuery('html,body')
  .animate({scrollTop: targetOffset}, velocidad);
    return false;
   }}
  });
});
</script>

A primera parece un poco largo pero es que he añadido algunas mejoras. Entre ellas las siguientes:

  1. Como veis en la primera linea hay que llamar también a jQuery. Lo volvemos a cargar desde google y ya está :rolleyes_tb:
  2. Podemos configurar la velocidad: En la liena 8 está la variable velocidad y tan solo tendremos que cambiar la duración. Recordad que son milisegundos por lo que 2000 son 2 segundos.
  3. Podemos filtrar las anclas (links que hacen referencia a la misma página) que queramos para que no funcione el efecto sobre ellas. Útil por ejemplo si utiliamos tabs en la misma página o tros plugins que utilizan ids. Para ello tan solo debeis añadir las anclas que no querais en el vector (array) no (linea 6).  Podeis añadir los id que querais por ejemplo : 
    var no = new Array ('#uno', '#dos', '#tres', '#cuatro', '#cinco');

    Recodar añadir la almoadilla # antes del nombre.

Y ya está tendreis vuestro scroll suavizado!

Como no, podeis descargaros un ejmplo para ver como funciona. ÉSta vez he creado el estilo en la mísma página.

Scroll suavizado - Smooth Scroll

]]> http://2kblog.net/scroll-suavizado-smooth-scroll/feed/ 6 Fullsize.js ¿Qué es? http://2kblog.net/fullsize-js-%c2%bfque-es/ http://2kblog.net/fullsize-js-%c2%bfque-es/#comments Wed, 15 Jul 2009 20:13:40 +0000 Krato http://2kblog.net/?p=97 Fullsize es proyecto web basado en jQuery que intenta conseguir un nuevo atriobuto en la etiqueta <img> llamado fullsize en la próxima version del HTML. Pero, ¿que añade esa nueva etiqueta? Pues una nueva manera de crear un lightbox de la manera más sencilla.

Tan solo llamandolo mediante el siguiente ejemplo tendríamos el lightbox:

<img src="mimagen-normal.jpg" alt="Imagen" fullsize="imagen-grande.jpg" />

Mientras esperamos que la W3C  acepte el reto de incluirlo en su nueva versión podemos usar el plugin de jquey mediante el atributo longdesc que por ahora sí es válido, de la siguiente manera:

  1. Link de referencia al css y al js
    2. <link href="tu_ruta/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="tu_ruta/fullsize/jquery.fullsize.js"></script>
  2. Lo declaramos: 
    <script type="text/javascript">
 
$("img").fullsize();
 
</script>
  3. Y la llamada al script en la imagen:
<img src="mimagen-normal.jpg" alt="Imagen" longdesc="imagen-grande.jpg" />

Además el js tan solo ocupa 12kb!

No dudes en pasarte por su página y dar tu apoyo a ésta iniciativa. Yo ya lo hecho! Visitar Fullsize

También puedes descargar el archivo desde aquí:

Fullsize

]]> http://2kblog.net/fullsize-js-%c2%bfque-es/feed/ 0