LoadingMessage, es un pequeño plugin que hice en jQuery para brindar una retroalimentación al usuario que haya dado click sobre un enlace en la aplicación, este regresa un mensaje de cargando, el cual puede ser personalizado.$.fn.LoadingMessage = function (a){Cómo funciona:
var attr, loading,href;
$(this).click(function(event){
var href=$(this).attr('href');
if(a.attr=='text'){ if($(this).attr('title')!=''){ attr=$(this).attr('title'); } else { attr=$(this).text();}}
else if (a.attr=='url'){attr=href;}
loading = '<div id="'+a.css+'">'+a.text+' '+attr+'<\/div>';
$('body').prepend(loading);
if(a.type=='asyn'){
event.preventDefault();
$(a.loadhere).load(href, function() {
$('#'+a.css).remove();
});} });
return false; };
$('#enlaces a').LoadingMessage({Aquí estoy diciendo que especificamente los enlaces dentro del #enlaces mostrarán el mensaje de cargando, claro puedo decir que todos los enlaces en mi aplicación muestren el mensaje con: $('a').
text:'Cargando',
attr:'text',
css:'loading'
});
$('#enlaces a.asyn').LoadingMessage({
text:'Cargando',
attr:'text',
css:'loading',
type:'asyn',
loadhere:'#contenido'
});
Hoy por la tarde, en la asignatura de Diseño de Aplicaciones para Internet, expuse sobre "JavaScript Frameworks". Antes de hablar sobre los FrameWorks como tales, hable sobre la breve historia del javascript, sus inicios, el porque fue creado, por que su nombre, y el resurgimiento que le dio la tecnología AJAX a JavaScript. Lamentablemente, mucha información no fue agregada a las diapositivas, por cuestiones de tiempo, a manera de sintexis se dijo: 
No cabe duda que es complicado acordarse de todas las sintaxis, elementos, y demás en cada lenguaje de programación web, ahora acordarse para todos es aun más complicado, es por eso que tuve la tarea de buscar algunos acordiones (cheat sheets) que nos simplificarán el trabajo a la hora de desarrollar.
Ayer por la noche estuve pensando que sería bueno postear con relación a los Video tutoriales de jQuery, así que para darles un poco de práctica me puse a crear un pequeño TAB con jQuery y CSS.Resultado:
<ul>
<li><a href="#">BLOGS</a></li>
<li><a href="#">webs</a></li>
<li><a href="#">contenido</a></li>
</ul>
<ul>
<li><a href="#">Blog sobre Diseño Web</a></li>
<li><a href="#">Blog sobre PHP</a></li>
<li><a href="#">Blog sobre jQuery</a></li>
<li><a href="#">Blog sobre AJAX</a></li>
</ul>
<ul>
<li><a href="#">Web sobre PHP</a></li>
<li><a href="#">Web sobre jQuery</a></li>
<li><a href="#">Web sobre AJAX</a></li>
<li><a href="#">Web sobre Tecnlogía</a></li>
</ul>
<ul>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>
Dar Formato a nuestro Tab (CSS):<div id="contenedor">
<h1>jQuery Tab</h1>
<div id="tab_contenedor">
<ul class="titulos">
<li><a href="#" title="contenido_1" class="tab activo">BLOGS</a></li>
<li><a href="#" title="contenido_2" class="tab">webs</a></li>
<li><a href="#" title="contenido_3" class="tab">contenido</a></li>
</ul>
<div id="tab_contenido">
<div id="contenido_1" class="contenido">
<ul>
<li><a href="#">Blog sobre Diseño Web</a></li>
<li><a href="#">Blog sobre PHP</a></li>
<li><a href="#">Blog sobre jQuery</a></li>
<li><a href="#">Blog sobre AJAX</a></li></ul>
</div>
<div id="contenido_2" class="contenido">
<ul>
<li><a href="#">Web sobre PHP</a></li>
<li><a href="#">Web sobre jQuery</a></li>
<li><a href="#">Web sobre AJAX</a></li>
<li><a href="#">Web sobre Tecnlogía</a></li>
</ul>
</div>
<div id="contenido_3" class="contenido">
<ul>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>
</div></div>
<!--Color de la página, color de letra y tipo de letra-->Resultado:
body{font-family:Arial, Helvetica, sans-serif; background: #023c4b; color:#FFFFFF;}
<!--Quitaremos el estilo a las Listas, para que dejen de tener esas bolitas a los lados jiji XD-->
ul,li{list-style:none;}<!--Contenedor de todo el sitio, le asignamos un tamaño al igual lo Centramos con margin:10px auto-->
#contenedor{width:600px; margin:10px auto;}<!-- TabContenedor es donde se encontrara el TAP, no el Cuerpo si no el TODO, en cambio TabContenido es el contendor del Contenido mostrado por cada encabezado-->
<!--El Encabezado del TAB, se mostrara en Linea (display:inline)-->
#tab_contenedor{padding:8px 8px; width:300px; background:#097793; border:1px solid #000000;}
#tab_contenido{padding:5px; background:#FFFFFF; border:1px solid #04667f;}
ul.titulos{margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }
ul.titulos li{display:inline;}<!--Cada enlace del encabezado, se convertirá en Mayusculas, importante darle un Borde, para que se note que no esta activo, al igual que el Padding-->
<!--Aquí los Enlaces del Encabezado, lo que le da la gracia a que parezca TAB, es el border cambia a blanco en su parte de abajo, asi le da la perspectiva de que esta unido al contenido-->
ul.titulos li a{
color:#097793;
padding:5px 10px 6px 10px;
text-transform:uppercase;
border:1px solid #04667f;
background:#FFFFFF;}ul.titulos li a:hover{border:1px solid #CCCCCC;}
<!--SUPER IMPORTANTE que el contenido_2 y 3 se encuentren en NO display, ya que con el jQuery, haremos que aparezcan al dar click sobre cada enlace relacionado.-->
ul.titulos li a.activo{color:#000000;
border-bottom: 1px solid #ffffff; background:#FFFFFF; }
a.tab{font: bold 15px Arial, Helvetica, sans-serif; text-decoration:none;}
<!--Un poco de estilo a las listas del contenido.-->
.contenido ul{margin:10px 0px; padding:0 11px;}
.contenido ul li{ margin-bottom:3px; font-size:15px;}
.contenido ul li a{color:#3f4c4f;}
.contenido ul li a:hover{color:#899fa5;}#contenido_2, #contenido_3 { display:none; }
<script type="text/javascript">
// Cuando cargue el documento
$(document).ready(function(){
// Cuando el enlace del encabezao sea clickeado
$("a.tab").click(function () {
// Apaga el Activo
$(".activo").removeClass("activo");
// Cambia Activo
$(this).addClass("activo");
// Despliega, escondiendo
$(".contenido").hide('slow');
// Muestra el contenido, obteniendo del atributo title del enlace (p.e. contenido_1), y muestra con 'show' el contenido
var muestra = $(this).attr("title");
$("#"+muestra).show('slow');
});
});
</script>
jQuery es uno de los frameworks más conocido y eficaz de JavaScript. Permitiendo manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web de forma muy simple. jQuery lleva en alto su bandera de ser una librería que ayuda al desarrollador a escribir menos código, y hacer más, de hecho su slogan: Write less... do more! (escribe menos, has más).