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:

PLAIN TEXT
<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

Publicado el: 23/05/2010
Publicado en la Categoria: CSS
Publicado en la Categoria: JuanK
Este post tiene: 2 Comentarios »

Post Similares


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:

PLAIN TEXT
<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.

Publicado el: 15/05/2010
Publicado en la Categoria: JavaScript
Publicado en la Categoria: JuanK
Este post tiene: 2 Comentarios »

Post Similares


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.

PLAIN TEXT
<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

Publicado el: 08/05/2010
Publicado en la Categoria: jQuery
Publicado en la Categoria: JuanK
Este post tiene: 5 Comentarios »

Post Similares


Distinto CSS para cada Navegador

Un día tuve que buscar una solución para un diseño que estaba armando. El problema era que en Google Chrome se veía mal mi diseño, pero en IE y Firefox se veía sin problemas, la solución que encontré fue la siguiente:

CSS Browser Selector, un excelente script que nos permite utilizar distinto CSS en cada navegador.

Dependiendo del navegador podremos utilizar distintos diseños y lo único que necesitamos es agregar un script a nuestra página.

Copia y pega el siguiente código dentro de <head> y </head> de tu  página:

PLAIN TEXT
<script type='text/javascript' src='http://blooging.googlecode.com/files/css-selector.js'></script>

Modo de uso:

En este ejemplo usaremos el div #nav.

CSS distinto en Google Chrome:

PLAIN TEXT
.chrome #nav {aquí tus estilos}

CSS distinto en Opera:

PLAIN TEXT
.opera #nav {aquí tus estilos}

CSS distinto en Safari:

PLAIN TEXT
.webkit #nav {aquí tus esilos}

Es muy simple de aplicar y no necesita mayor conocimiento, sólo debemos agregar un "class" antes de cada "div" que queramos cambiar, en nuestra hoja de estilos.

Puedes ver más ejemplos en la web oficial:

Enlace: CSS Browser Selector

Publicado el: 03/04/2010
Publicado en la Categoria: CSS
Publicado en la Categoria: JuanK
Este post tiene: 9 Comentarios »

Post Similares


Página 1 de 712345...Última »