bitelemental

Eliminar imágenes rotas con jQuery

 05/03/2010

En nuestros diseños, alguna que otra vez, es posible que hayamos referenciado imágenes situadas en servidores ajenos con lo que, si dicho servicio desapareciese o realizase cambios estructurales, las rutas correspondientes a nuestras imágenes se verían afectadas.

Gracias a RibosoMatic he llegado a un script en jQuery que realiza la siguiente tarea: busca todas las imágenes de nuestro diseño y, en caso de que no exista alguna de ellas, la elimina del DOM asociado a nuestro documento.

<script language="javascript">
   $(document).ready(function() {
      $('img').error(function() {
         $(this).remove();
      });
   });
</script>

» Vía: RibosoMatic

Categoría(s): Programación, Web, jQuery
 Imagen, jQuery, trucos
  Sin comentarios

jQuery Grid Plugin

 01/03/2010

Después de este parón/abandono que ha sufrido este espacio debido a problemas personales, vuelvo a la carga con más plugins relacionados con el mundo de la programación en Javascript y, en especial, con jQuery.

Hoy es el turno de hablar del plugin en el que he estado inmerso estos últimos 8 meses: jqGrid o jQuery Grid. Pero, ¿qué es exactamente  y para qué sirve? jqGrid (desarrollado por el equipo de Trirand) es un conjunto de plugins destinados, básicamente, al tratamiento de tablas dinámicas mediante Ajax. Disponible actualmente en su versión 3.6.4, jqGrid intenta poner solución a toda una serie de operaciones que podemos realizar sobre una tabla de datos:

• Consultar datos de una fila.
• Añadir registros.
• Eliminar registros.
• Editar registros.
• Buscar registros.
• …

Una de las principales ventajas de este plugin es que puede integrarse con tecnologías tales como PHP, ASP, Servlets de Java, JSP, ColdFusion y Perl para realizar el tratamiento de la información en el lado del servidor. También contamos con una extensa documentación acerca de la utilización del grid (wiki), ejemplos de uso (demos) y un foro en el que consultar nuestras dudas. Aunque una de las partes más atractivas de este plugin es su combinación con jQuery UI: tenemos la posibilidad de formatear y personalizar nuestras tablas utilizando los themes y aspectos disponibles en la web de de jqueryui.com (que hablaremos más detenidamente otro día).

En el próximo post veremos cómo realizar nuestro primer grid utilizando los diferentes tipos de parseado que disponemos: JSON y XML. También puedes seguir mis acciones y quehaceres de este plugin a través de mi cuenta de Twitter: twitter.com/bitelemental.

» Página oficial de jqGrid.
» Documentación de jqGrid.
» Ejemplos y demostraciones.
» Foro de jqGrid.
» jQuery UI.

Categoría(s): Plugins, Programación, Web, jQuery
 Javascript, jqGrid, jQuery, Plugins
  Sin comentarios

Las funciones callback en jQuery

 14/11/2009

Todo aquel que esté aprendiendo a utilizar este framework seguro que, en repetidas ocasiones, ha echado mano de la documentación de jQuery a través de su página web (si alguien no lo ha hecho creo que debería empezar ya). Navegando entre sus muchas opciones puede que se haya encontrado con un concepto que le suene desconocido. Estoy hablando  del  vocablo “callback”.

Según la documentación de jQuery, una función callback es  una función pasada como argumento de otra función y su ejecución se realizará después de que el elemento padre termine de realizar sus acciones correspondientes. Dicho de esta forma parece un poco confuso, pero viendo un par de ejemplos podremos apreciar el resultado.

El objetivo de nuestros ejemplos es  ocultar un bloque de texto pulsando en un botón y, después de esto, ocultar el botón sobre el que hemos pinchado.

La primera aproximación se ha realizado sin aplicar ninguna función de callback. La ejecución de los efectos se realiza de forma paralela consiguiendo un efecto totalmente distinto al que buscamos (recordemos que primero queremos ocultar el bloque de texto y, después, el botón).
»Ejemplo sin utilizar una función de callback

Si observamos el segundo ejemplo podemos comprobar la funcionalidad deseada. El bloque texto se oculta y, después de esto, es el propio botón el que desaparece.
»Ejemplo utilizando una función de callback

El código javascript asociado a este último ejemplo es el siguiente:

<script language="JavaScript">
	$(document).ready(function() {
		$("#btn").click(function(){
			$("#content").hide('slow', function(){
				$("#btn").hide('slow');
			});		
		});
	});
</script>

Espero que estas pequeñas demostraciones hayan servido para comprender con un poco más de detalle algunos de los aspectos que jQuery nos brinda.

Categoría(s): jQuery, tutoriales
 callback, jQuery, tutorial
  2 comentarios

Bordes redondeados sin imágenes utilizando jQuery

 08/10/2009

Son muchos los efectos que podemos aportar a nuestros diseños utilizando alguna librería Javascript, como es el caso de jQuery. Uno de los más utilizados y más vistos  es el de redondear las esquinas de las cajas de texto, efecto que otorga elegancia y estilismo a nuestra página.

Si hacemos una mirada retrospectiva, para realizar el efecto comentado siempre teníamos que echar mano de imágenes:  elaborábamos el “background” deseado  y lo aplicábamos sobre la capa que necesitáramos mediante el uso de CSS. Aparte de ser una medida bastante arcaica y molesta, era la única a la que podíamos acudir si nuestro objetivo era conseguir unos bordes ovalados. Con Javascript la cosa ha cambiado bastante. Existe un plugin denominado NiftyCube que hace precisamente eso, sin la ayuda de ningún tipo de elemento adicional.

Además, tenemos la opción de configurar el grado de curvatura de nuestro borde. Y no sólo es aplicable a los elementos de tipo “div” (como muchos estarán pensando), sino que también podemos redondear los márgenes de elementos tales como  “p”, “h2″, “inputs”… Basta con descargar el archivo javascript y su hoja de estilos asociada. Una vez tengamos estos dos archivos, realizamos la siguiente llamada:

<script language="javascript">
   $(document).ready(function() {
      Nifty("div#id_elemento", "tipo_de_borde");
   });
</script>

Podéis ver todas las opciones disponibles a través de la página de NiftyCube.

» Ejemplo bordes redondeados sin imágenes utilizando jQuery | Descargar NiftyCube

Categoría(s): jQuery, tutoriales
 bordes, jQuery, tutorial
  3 comentarios

Cheat Sheet o “chuleta” de jQuery 1.3

 25/09/2009

Para todos los fans de este framework, entre los que me incluyo, Antonio Lupetti (de Woork) ha dado a luz a una hermosísima “chuleta” con la que podremos realizar todos nuestros scripts de una forma más cómoda. En 6 páginas hace una referencia a toda la API del framework (en su versión 1.3) incluyendo detalles y descripciones. Y si a todo esto le sumamos un diseño elegante y simple, ¿qué más podemos pedir?

» Descargar: jQuery Visual Cheat Sheet

» Via: aNieto2k

Categoría(s): jQuery
 cheat, jQuery
  Sin comentarios

Formulario de contacto en pop-up con jQuery

 18/09/2009

Buscaba exactamente esto y lo encontré. En la página oficial de Eric Martin, programador avanzado de aplicaciones web en Java, tenemos varios proyectos y plugins (todos ellos basados en jQuery) que podemos descargar. Entre los que más destacan podemos encontrar un formulario de contacto en el que la información se nos presenta en forma de ventana modal (o pop-up) y el envío de datos se realiza mediante Ajax.

Siempre viene bien tener a mano esta serie de plugins por si en el apartado “Contactar” de cualquier web queremos mostrar información adicional de contacto, que no un simple formulario. Por ejemplo, podríamos poner un enlace en el que se acceda a dicho formulario, pero también visualizar el teléfono de contacto y su correspondiente correo electrónico, todo en la misma página.

Os dejo con un ejemplo del formulario y el enlace a su descarga. He realizado la traducción del plugin al español para todo aquel que quiera utilizarlo en sus proyectos. Su configuración es muy trivial y no requiere de muchos cambios. Espero que os sirva de ayuda.

» Ejemplo de formulario de contacto en pop-up con jQuery | »Descargar

Puedes descargar todos los demás plugins, todos ellos realizados por Eric Martin a través de su página web de proyectos.

Categoría(s): jQuery, tutoriales
 formulario, jQuery, Plugins
  31 comentarios

Menú de navegación por pestañas con jQuery

 16/09/2009

Si el otro día ya enseñé un menú en el que se nos mostraba un texto descriptivo al realizar el hover sobre cada elemento, hoy os traigo el famoso menú de navegación por pestañas (tabs) realizado también con jQuery.

Aunque existen plugins que facilitan mucho toda esta tarea de desarrollo (jQuery UI), Héctor Guedea en su blog personal, elaboró un script que cumplía dicho objetivo de una forma muy trivial. Yo le he dado un toque personal sacándole más partido al método animate.

Este es el código jQuery:

<script language="javascript">
	$(document).ready(function() {
		$("#tabNav li.tab").click(function() {
 
			$(".current").removeClass('current');
			$(this).addClass('current');
			$(".container").animate({opacity: 0}, 500).hide('slow');
 
			var elemento = $(this).attr("title");
			$("#"+elemento).show('fast', function() {
				$(this).animate({opacity: 1000}, 'fast');
			});
		});
	});
</script>

Mi hoja de estilos:

body {
	font: 70% "Trebuchet MS", sans-serif;
}
 
#tabContainer {
	width: 400px;
	height:100px;
	padding: 5px;
	background: #ccc;
	border: 1px solid #999;
	margin-top: -6px;
}
 
#tabNav ul li {
	display: inline;
	padding: 5px 20px;
	cursor: pointer;
	background: #ccc;
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
}
 
#tabNav2, #tabNav3 {
	display:none;
}
 
#tabNav li.current {
	border-bottom: 1px solid #ccc;
}

Y el HMTL asociado:

<div id="tabNav">
<ul>
	<li class="tab current" title="tabNav1">Tab 1</li>
	<li class="tab" title="tabNav2">Tab 2</li>
	<li class="tab" title="tabNav3">Tab 3</li>
</ul>
</div>
<div id="tabContainer">
<div id="tabNav1" class="container">
        	Texto para la <strong>primera</strong> pestaña. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit ut mi malesuada rhoncus. Integer consequat, justo ullamcorper egestas semper, elit mi pretium est, vitae consequat velit justo nec risus.</div>
<div id="tabNav2" class="container">
        	Texto para la <strong>segunda</strong> pestaña. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit ut mi malesuada rhoncus. Integer consequat, justo ullamcorper egestas semper, elit mi pretium est, vitae consequat velit justo nec risus.</div>
<div id="tabNav3" class="container">
        	Texto para la <strong>tercera</strong> pestaña. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit ut mi malesuada rhoncus. Integer consequat, justo ullamcorper egestas semper, elit mi pretium est, vitae consequat velit justo nec risus.</div>
</div>

» Ejemplo menú de navegación por pestañas con jQuery

Categoría(s): jQuery, tutoriales
 jQuery, menu, tutorial
  Sin comentarios

Convertir un div entero en enlace con jQuery

 15/09/2009

Interesante script que he descubierto en Intenta, en el que convertimos un bloque div completo en un enlace utilizando jQuery.

Código Javascript:

<script language="javascript">
 
	$(document).ready(function() {  
		$("#enlace").click(function() {
     		window.location = $(this).find("a").attr("href");
     		return false;
		});
	});
 
</script>

Código HTML:

<div id="enlace">
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum luctus mauris, vitae laoreet ligula pulvinar sed. Maecenas tincidunt egestas tortor ac dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae velit mattis justo faucibus ullamcorper. In quis est nec metus lobortis dapibus.
    <br />
    <br />
    <a href="http://bitelemental.es">Leer m&aacute;s [+]</a>
 
</div>

» Ejemplo convertir div en enlace con jQuery

Recuerda que puedes aprender más acerca de este framework a través de su página oficial.

Categoría(s): jQuery, tutoriales
 jQuery, tutorial
  Sin comentarios

Menú animado con descripción utilizando jQuery

 14/09/2009

Como ya todos sabréis, o si no os lo recuerdo, jQuery es un framework Javascript con el que podemos realizar infinidad de efectos para nuestros diseños web. En una entrada anterior ya expliqué como empezar a estudiar este lenguaje exponiendo algunos enlaces a páginas que pueden resultar de interés.

En mi práctica diaria aprendiendo esta estupenda librería, he llegado a elaborar un menú (basándome en unos ejemplos sencillos) bastante simple, pero que puede resultar interesante para algunos de vosotros. Se trata de un menú horizontal animado, en donde al realizar un hover sobre los elementos aparece una pequeña descripción. Dicha descripción representa el atributo “title” de la etiqueta “<a>” dentro del menú.

El código Javascript asociado es el siguiente:

<script type="text/javascript">
 
$(document).ready(function() {
	$(".menu a").append("<small></small>");
 
	$(".menu a").hover(function() {
		$(this).find("small").animate({opacity: "show", top: "40"}, "slow");
		var hoverText = $(this).attr("title");
	        $(this).find("small").text(hoverText);
	}, function() {
		$(this).find("small").animate({opacity: "hide", top: "5"}, "fast");
	});
});
</script>

Y la parte html del menú:

<ul class="menu">
	<li>
		<a href="#" title="Volver a la p&aacute;gina de inicio">Inicio</a>		
	</li>
	<li>
		<a href="#" title="Todo lo referente a mi trabajo">Acerca de</a>
	</li>
	<li>
		<a href="#" title="A trav&eacute;s de formulario web, e-mail o tel&eacute;fono">Contacto</a>
	</li>
</ul>

Y con un poco de CSS puedes tener un resultado como el que he conseguido yo. Puedes ver un ejemplo de su funcionamiento a través de este enlace:
» Ejemplo menú horizontal con descripción utilizando jQuery

Espero que les haya sido de ayuda.

Categoría(s): jQuery, tutoriales
 jQuery, menu, tutorial
  1 comentarios

Primeros pasos con jQuery: manuales del framework de Javascript

 05/05/2009

En mi afán por especializarme en este framework, voy a comentar algunos aspectos que considero importantes para todo aquel que quiera empezar o intensificar su conocimiento con jQuery.

Para los que no lo sepan y les interese, jQuery es un framework (conjunto de librerías que nos ayudarán a organizar las partes de un proyecto) de Javascript con el que podremos realizar tareas tales como:

• Animaciones y efectos.
• Manipular las hojas de estilo.
• Manejar eventos.
• Interactuar con AJAX.
• etc.

Podéis ver algunos ejemplos de su funcionalidad pinchando AQUÍ. La sencillez de su sintaxis y su poca extensión de código hacen de este framework de Javascript uno de los más potentes, aparte de ser uno de los más utilizados.

Si queremos empezar a manejarlo, lo primero que tendremos que hacer es descargarnos la última versión de jQuery y, a continuación, estudiar en qué consisten dicho conjunto de librerías y cómo utilizarlas. Para poder hacer esto, he recopilado una serie de enlaces a manuales que considero más convenientes y que serán de gran ayuda para romper mano con este bellísimo framework.

Seguir leyendo Primeros pasos con jQuery: manuales del framework de Javascript…

Categoría(s): jQuery, tutoriales
 jQuery, manual, tutorial
  2 comentarios