Tabs con jQuery y CSS

Desde hace un tiempo empezé a amar jQuery y todo su potencial y como siempre quiero aprender algo nuevo, estuve buscando tabs con jQuery y CSS simples, fáciles de usar y que cumplan bien su función.

Haciendo eso encontré esto: Simple Tabs with CSS & jQuery, y me encantaron. Son tan simples que hasta un gato puede hacerlas (?), pero lo bueno es que son 100% funcionales y utilizan un efecto fadeIn al presionar una tab, lo que las hace agradables a la vista.

Para implementarlas sólo debemos hacer lo siguiente:

Primero creamos la estructura de nuestras tabs, de la siguiente forma:

<ul class="tabs">
    <li><a href="#tab1">Galería</a></li>
    <li><a href="#tab2">Formulario</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        Aquí va tu galería
    </div>
    <div id="tab2" class="tab_content">
       Aquí tu formulario
    </div>
</div>

Ahora, debemos agregar los scripts a nuestra página, que son 2:
Seguir Leyendo esta Entrada

Usar jQuery desde Microsoft CDN

En este época donde todo es dominado por Google, incluso el uso de librerías AJAX, Microsoft no quiere dejarse vencer tan fácilmente y es por eso que ha liberado el uso de jQuery desde su propio CDN.

Ya mucho se ha hablado sobre la velocidad de carga de un sitio, que debe ser buena, ya que es un factor de posicionamiento, y gran parte de los desarrolladores han optado por utilizar las librerias desde Google, ya que su servicio es muy rápido, pero ¿usarlas desde Microsoft tendrá alguna diferencia?

La diferencia, en velocidad, es muy poca, en algunos lugares en mejor que en otros, por lo tanto no creo que sea mala idea probarlo.

Para agregarlo a nuestra web tan solo debemos agregar esta línea de código:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

Recuerda que no debes agregar este framework si ya utilizas el de Google, ya que sería un completo desperdicio de tiempo.

Si programas en ASP deberías darte una vuelta por su web, donde encontrarás otro framework con el cuál trabajar.

Tooltips con jQuery y TinyTips

Los tooltips son muy utilizados en este tiempo por su simpleza y eficacia al momento de mostrar contenido, de una forma muy elegante. En este post veremos como agregar tooltips con jQuery y TinyTips.

TinyTips es un plugin jQuery especial para este efecto, muy ligero y fácil de instalar, que nos permitirá tener tooltips en nuestra web muy facilemente.

Para agregarlo a nuestra página debemos:

Agregar los scripts y CSS.

Esto es muy sencillo, sólo debemos agregar unas cuantas líneas a nuestro código HTML.

<link rel="stylesheet" type="text/css" media="screen" href="tinyTips.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="tinyTips.js"></script>

El framework jQuery lo llamamos desde Google, es mucho más rápido.

Ahora agregamos el JavaScript que hará funcionar el plugin.
Seguir Leyendo esta Entrada

Usar Frameworks AJAX desde Google

Cargar frameworks AJAX desde Google es algo que muchos hacen, incluso lo usamos para cargar todos nuestros scripts, pero quizás se pregunten ¿qué frameworks puedo cargar?

Desde la API de bibliotecas AJAX de Google podemos ver todos los frameworks disponibles para utilizar y en este post los encontrarán listos, copiar y pegar en nuestra página.

jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

jQuery UI

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js'></script>

Prototype

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script>

Seguir Leyendo esta Entrada