Fancy Jquery ajax Form

Demo | Download

A simple AJAX website with jQuery

DemoDownload

Create an AJAX-driven shopping cart

All the products are going to be stored in a MySQL database, with PHP showing and processing the data. jQuery will drive the AJAX-es on the page, and with the help of the simpletip plugin will add to an interactive check out process.

Demo | Shopping Car
Tutorial | Tutorial
Download | Files

MultiSelect Items

Its a easy-to-use, paginated, filterable multi-select widget built on MooTools. Es muy facil de usar, paginacion, filtrado multiseleccion desarrollado con MooTools.

Fuente | ajaxrain.com
Demo | http://www.justindonato.com/demo/mtmultiselect/

Crear un efecto de puerta corredera con jQuery

 

 

Aprende a realizar un impresionante cuatro esquinas de deslizamiento efecto fácilmente con jQuery. Es una solución elegante, único y genial para la galería de imágenes en miniatura. Este tutorial incluye una explicación detallada que le guiará a través de todo el proceso.

 

Fuente:www.ajaxrain.com 

Tutorial: http://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery 

Demo:http://www.queness.com/resources/html/slicing/index.html

Delectable - A jQuery Plugin

Detactable es un plugin diseñado para integrar de una forma mas visual cualquier sitio web o un projecto, podras mostrar cualquier link de una forma "deliciosa", este plugin tambien dispone de caracteristicas para habiltar y mostar en el browser a travez de tags.


Fuente:www.ajaxrain.com
Tutorial:http://theodin.co.uk/blog/development/delectable-jquery-plugin.html
Demo:http://theodin.co.uk/tools/tutorials/jqueryTutorial/plugins/delectable/?

jQuery Moving Tab and Sliding Content Tutorial

Aprenda a crear una ficha de lámpara de lava y de deslizamiento de contenido todos juntos con sólo código jQuery simple. Este guión es bueno para la barra lateral que muestra los últimos mensajes, comentarios y noticias de la comunidad.

Fuente:www.ajaxrain.com
Tutorial: http://www.queness.com/post/655/jquery-moving-tab-and-sliding-content-tutorial
Demo:http://www.queness.com/resources/html/movetab/index.html

Articulos relacionados con miniaturas de Blogger

Si deseas mejorar las paginas vistas de los usuarios que acceden a tu blog, pues te propongo hacer lo siguiente:

Luego de terminar el ejercicio veras despues de cada post en su interior algo como esto:

 

Sigue los siguientes pasos para poder incluir el widget a tu pagina:

Login > Configuracion > Diseño > Edicion HTML > marca la casilla ( Expandir plantillas de artilugios ) como se muestra acontinuación:

Ahora dentro de tu codigo antes de terminar la etiqueta </head>

incrusta el siguiente codigo 




<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs20.js' 
type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 

Luego busca el div o p con la clase css, algo asi: <div class="post-footer"/> ó <p class="post-footer"/> e incrusta inmediatamente despues este codigo acontinuación:

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + 
&quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;
max-results=6
&quot;' 
type='text/javascript'/></b:if></b:loop><a 
href='http://www.bloggerplugins.org/2009/08/related-posts-
thumbnails-blogger-widget.html'
style='display:none;'>Related Posts with thumbnails for blogger</a><a
href='http://www.bloggerplugins.org/' 
style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs(); 
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Y listo veras despues de cada post tus relacionados que super no ? 


Fuente: http://www.bloggerplugins.org/ 
Mas info: http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html

comentarios y/o sugerencias preguntame, para ayudarte a resolver tus inquietudes

DHTML AutoComplete

Algo que es full interesante es realizar un autocomplete de cualquier palabra dentro de un textobox aca le dejo un ejemplo de como se hace y como puede mejorar nuestras vidas jejeje

Fuente:Ajaxdaddy.com
Demo:http://www.ajaxdaddy.com/demo-dhtml-autocomplete.html

Dejen sus comentarios y /o sugerencias

jQuery Carousel

jQuery Carousel


Los artículos, que pueden ser de contenido estático HTML o cargados con (o sin) de AJAX, puede desplazar hacia atrás y hacia adelante (con o sin animación).
Varios ejemplos ilustran las posibilidades de jCarousel.
Para utilizar el componente jCarousel, incluir la librería jQuery, la fuente jCarousel archivo, el archivo de hoja de estilos jCarousel núcleo y una hoja de estilo jCarousel piel dentro de la etiqueta de su documento HTML.
jCarousel ajusta automáticamente el código HTML necesario alrededor de la lista.

Demo:http://www.ajaxdaddy.com/demo-jquery-carousel.html

Ediccion como Flickr

Flickr Como editar
Leer más y descargar "Flickr Como editar"
Si usted no está familiarizado con la forma en flickr maneja los datos de la edición, he aquí un breve resumen.
- Mostrar usuario el ámbito normal de los datos (por ejemplo: el título de una imagen)
- Cuando la rueda del ratón sobre el título, que el fondo de la palabra amarillo
- Si el usuario hace clic en la palabra, cambiar la palabra a un cuadro de entrada con la palabra en ella. También muestran una "guardar" y "Cancelar"
- Un usuario puede cambiar el nombre de la imagen y luego presionar "Guardar".
- Ejecutar un pequeño script que actualiza el nombre en la base de datos
- Quitar el cuadro de entrada y los botones y volver a la pantalla del título original (actualizado con el nuevo título).

Se muestra cómo escribir un poco de código HTML para emular flickr editar efecto de estilo casi a la perfección.
El guión no está utilizando las bibliotecas de terceros. Hay un montón de código HTML que participan, yo no lo recomiendo
Si usted va a utilizar un 'plugin' como editar en el script lugar. Además de eso, PHP y HTML se mezcla el sentido más difícil de personalizar la secuencia de comandos.

Demo:http://www.ajaxdaddy.com/flickr-like-edit-in-place.html

jQuery UI Multiselección

Otro intento de un ordenable widget, seleccionar varias de búsqued.


Depende de 1,3 jQuery y jQuery UI 1.7. El widget es styleable utilizando Themeroller. Funciona de una manera discreta, con sólo girar HTML entradas de selección múltiple en un equivalente más sexy. No hay margen de beneficio extra necesario.

     * Para las instrucciones de instalación por favor, eche un vistazo a la blogpost correspondiente
     * El código fuente está disponible en Github
     * En caso de que usted está buscando la versión original, se ha trasladado aquí
     * Bleeding Edge Demo está siempre disponible aquí (gracias a GitHub Pages)

 

Fuente:Ajaxrain.com

Demo:http://www.quasipartikel.at/multiselect/ 

Widgets con JQuery

Les presento en esta oportunidad una herramienta para hacer nuestras aplicaciones con una interactividad estupenda

 

 

Fuente:jQuery.com
Demo: Widgets

Utilizando Opacidad para mostar enfoque / JQuery

Cuando te ubicas sobre una imagen todas exepto la imagen escojida se opacan dando enfoque a tu imagen de eleccion.


Ejemplo : JQuery Example
Fuente:

Div flotantes con JQuery

Div flotantes con JQuery una caracteristica muy genial
Ejemplo (Codigo fuente):Codigo
Fuente:Ajax Rain

API de Twitter: Cómo crear un flujo de mensajes Monitter similares con PHP y jQuery

Lluvia de Ajax
Este tutorial muestra una forma muy sencilla de trabajar con la API de Twitter con el fin de ejecutar una búsqueda en el calendario Twitter público y mostrar los resultados de búsqueda con un flujo de mensajes animados (tweets) similar a Monitter

Fuente: AjaxRain

Gritter para jQuery (gruñido)

Lluvia de Ajax
Un limpio e inteligente notificación burbuja / popup que aparece en la parte superior derecha de su escritorio "¡Asegúrate de comprobar la demo!

Demo: Gritter

Fuente: Ajax Rain