NetCódigo e Internet

Mejorando formulario de contacto con JQuery

Después de publicar el post sobre cómo realizar un formulario de contacto más dinámico de lo habitual usando JQuery, y estudiando algo más de JQuery me dí cuenta que el código de dicho post se puede mejorar para no tener que jugar con la posición del formulario. Para no repetir el post estos son los cambios.

1. Un poco en el css.

2. El código HTML para usar el nuevo estilo.

</fieldset>
</form>
</div>
<img id="BtnContacto" src="img/contactobtn.jpg" width="197" height="20" />
</div>

3. El código JQuery

// MUESTRA FORMULARIO
$("#BtnContacto").click(function(){
// COMPROBAMOS SI ESTÁ OCULTO O NO
if ($("#FormContact").is(":hidden"))
{
$("#FormContact").slideDown("slow");
}
else
{
$("#FormContact").slideUp("slow");
}

});

// OCULTA FORMULARIO
$("#BtnCancelar").click(function(){
$("#FormContact").slideUp("slow");
});

});

Aquí pueden observar el cambio.

Formulario de contacto con JQuery

Veremos hoy cómo hacer un formulario de contacto que, de entrada está oculto, y mediante animación y JQuery haremos que se muestre. Es una forma distinta de mostrar cosas con JQuery.

El ejemplo lo pueden ver aquí.

Para realizar el ejemplo, y como ya es habitual, usaremos css, dom y jquery. Veamos primero el css.

Muy simple, posicionamos el formulario tal que quede solo a la vista del usuario la imagen para mostrarlo. Para ellos usamos posicionamiento absoluto.

Ahora el html.

</fieldset>
</form>
<img id="BtnContacto" src="img/contactobtn.jpg" width="197" height="20" />
</div>

No tiene ciencia, un sencillo formulario, lo único especial es el botón Cancelar, que lo utilizaremos para ocultar el formulario.

Y ahora, el código JQuery. Dos sencillos pasos.
1. Asociamos al evento click de la imagen que muestra el formulario la animación para que lo muestre. Primero comprobamos si el formulario ya está mostrado o no, para así realizar la animación de mostrar u ocultar.
2. Asociamos al evento click del botón de cancelar la animación de ocultar el formulario.

// MUESTRA FORMULARIO
$("#BtnContacto").click(function(){
// COMPROBAMOS SI ESTÁ OCULTO O NO
if ($("#formulario").css("top") == "-215px")
{
$("#formulario").animate({top:("10px")},1000);
}
else
{
$("#formulario").animate({top:("-215px")},1000);
}

});

// OCULTA FORMULARIO
$("#BtnCancelar").click(function(){
$("#formulario").animate({top:("-215px")},1000);
});

});

</div>

Hasta aquí.

Añadir imagen a links por tipo. CSS

Lo que quiere decir el título es cómo hacer, por medio de estilos, el que aparezca una imagen en un lateral de los links dependiendo del tipo de destino que sea. Por ejemplo, asociar una imagen a todos los links que abran un pdf, o zip, o png, o lo que sea.

Es realmente sencillo, el css en cuestión es como este:

Lo que hace este css es que si encuentra en el link una cadena que sea ".pdf" o "mailto" asociará este código a dicho link. Con esto, lo único que tendremos que hacer es repetir dicho código para cada uno de los tipos de asociaciones que deseemos. El resultado sería como el que sigue:

Con esto nos podemos olvidar de tener que asociar una imagen a cada link que creemos.

Espectacular. Microsoft Charting Control

Espectacular. Realmente no encuentro otro calificativo para Microsoft Charting Control. En mi opinión, los mejores controles para crear gráficos estadísticos gratuitos que se pueden encontrar en la red.
Permiten una manipulación total sobre los gráficos, incluyendo AJAX. Esta vez, incluso en los ejemplos y la documentación creo que Microsoft lo ha hecho espectacular. Funcionan tanto para ASP.Net como para Windows Forms. Ejemplos:

El único incoveniente es que se necesita Microsoft .Net Framework 3.5 SP1
Estos son los links.

• Microsoft Chart Controls
• VS 2008 Tool Support for the Chart Controls
• Microsoft Chart Controls Samples
• Microsoft Chart Controls Documentation
• Microsoft Chart Control Forum

Consumir RSS Feeds

Veremos en este post cómo consumir una fuente de datos rss feeds, concretamente con su última versión, la 2.0. Para conocer más sobre rss feeds pueden visitar la web de w3c que trata sobre el tema.
El consumo de esta fuente de datos se puede realizar con distintos controles de servidor que nos provee asp.net, datalist, gridview o repeater. Para este post usaremos el control repeater ya que nunca he hablado de él. Es un control contenedor enlazado a datos que genera una lista de elementos individuales, en nuestro caso, estos elementos serán cada uno de los registros que nos devuelva la fuente de feeds. Nos permite utilizar plantillas para albergar contenido, usaremos una tabla para ello. Las plantillas que provee son:

1. ItemTemplate. Usado para diseñar cada row impar.
2. AlternatingItemTemplate. Usado para diseñar cada row par.
3. HeaderTemplate y FooterTemplate. Usado para diseñar la cabecera y el pie.
4. SeparatorTemplate. Usado para diseñar los separadores entre dos elementos.

También proporciona eventos para todo el control del mismo. En esta ocasión no nos hará falta usar ningún evento. El elemento DOM que usaremos para incrustrar en el control repeater será un table.

Enlace con la fuente de datos.

El archivo de datos debe apuntar a la url que nos proporcione la fuente de feeds y el separador de cada registro será el elemento item de la especificación 2.0 de feeds. Simplemente con esto ya tenemos configurado el origen de datos.

Ahora diseñemos el control repeater. Es muy sencillo, incluiremos en cada plantilla del control los elementos necesarios para su correcta visualización, he incluido algo de estilos para que no quede muy feo.

CSS.

#table-rss th tr
{
padding: 8px;
font-weight: normal;
font-size: 13px;
color: #039;
background: #b9c9fe;
}

#table-rss td
{
padding: 8px;
border-top: 1px solid #fff;
color: #669;
}
#table-rss .normal
{
background: #e8edff;
}
#table-rss .alternate
{
background: #b9c9fe;
}

</style>

Cuando vean el resultado recuerden lo mal diseñador que soy....

Ahora el código del repeater:

Una imagen del resultado:

Esto es todo.