Posts Tagged ‘ jQuery ’

Ebook: LEARNING FROM JQUERY

Si se siente cómodo con jQuery, pero un poco inestable con JavaScript esta breve guía le ayudará a ampliar su conocimiento del idioma, especialmente el código jQuery que cubre para usted. Muchos devotos jQuery escribir tan poco código como sea posible, pero con un poco de JavaScript en el cinturón, se puede evitar errores, reducir los gastos generales, y hacer que su código de aplicación más eficiente.

Este libro explora el manejo de eventos, prototipos, y trabajar con el DOM y AJAX a través de ejemplos y un montón de código. Usted aprenderá las convenciones y patrones comunes en JavaScript y si usted nunca ha codificado con JavaScript antes-un tutorial te llevará a través de los conceptos básicos.

  • Mejore su código jQuery utilizando constructores de objetos y prototipos
  • Reducir los gastos generales y tener un mayor control por el manejo de eventos con JavaScript Trabajar con el DOM mucho más rápido con JavaScript que usted puede con jQuery
  • Enviar algunas peticiones AJAX sin tener que cargar toda la biblioteca jQuery
  • Comprender la importancia de las normas de JavaScript de código, comentarios, reutilización de código, y anti-patrones
  • Conseguir recursos de JavaScript, como un buen IDE, un comprobador de sintaxis, y control de versiones

Enlace de Descarga

http://prefiles.com/8pqawx289nv1/Oreilly.Learning.from.jQuery.Jan.2013.rar
Anuncios

Agregar clase Active al menu de navegación basada en la URL actual

Creo que el titulo lo dice todo, esta es la mejor forma de resaltar el item del menu.

     <nav >
          <ul>
               <li><a href="/">Inicio</ a></li>
               <li><a href="/acercade/">acercade</ a></li>
               <li><a href="/clientes/">clientes</ a></li>
               <li><a href="/contactenos/">contactenos</ a></li>
          </ul>
     </nav >

y si ud esta en esta URL:

http://sitio.com/acercade

     $(function() {
       $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
     });

Llamado Ajax con Javascript y jQuery

Algunos conocieron el Ajax con jQuery o el mismo Mootools, pero realmente los llamados asincrónicos son tan viejos como el mismo Javascript.

En esos tiempos donde las cuentas de hotmail eran de 10MB y buscábamos resultados en la web a través de Altavista y no de Google, los llamados asincronicos eran diferentes:

ajax desde javascript nativo


  var xmlhttp;
  xmlhttp = GetXmlHttpObject();
  if(xmlhttp == null){
    alert("Boo! Your browser doesn't support AJAX!");
    return;
  }
  xmlhttp.onreadystatechange = stateChanged;
  xmlhttp.open("GET", "http://www.google.com", true);
  xmlhttp.send(null);

  function stateChanged(){
    if(xmlhttp.readyState == 4){
      // do something with the response text
      alert(xmlhttp.responseText);
    }
  }
  function GetXmlHttpObject(){
    // IE7+, Firefox, Chrome, Opera, Safari
    if(window.XMLHttpRequest){
      return new XMLHttpRequest();
    }

    //IE5, IE6
    if(window.ActiveXObject){
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
  }

y las cosas han cambiado y mucho

ajax desde jQuery


  $.ajax({
    url: 'http://www.google.com',
    success:function(data){
      alert(data);
    }
  });

Como se puede ver claramente, el método AJAX jQuery es mucho más fácil. Se le da una URL de solicitar, y después se le da un conjunto de instrucciones si se realiza una solicitud exitosa. Fácil!

Obtener el año actual con Javascript y jQuery

Para obtener el año actual por medio de javascript usaremos la función

getFullYear()

que nos devuelve el año correspondiente del objeto fecha en formato completo.

	var fecha = new Date();
	var ano = fecha.getFullYear();
	alert('El año actual es: '+ano);

En jQuery podemos sacar insertar dinámicamente el valor del año actual por ejemplo de la siguiente forma (dentro de un elemento con id: fecha):

	var anio = (new Date).getFullYear();

	$(document).ready(function() {
	  	$("#fecha").text( anio );
	});

Maxlength de un TextAreacon jQuery

En este tutorial te mostraré cómo utilizar jquery.maxlength.js en algunos campos del formulario común

Para empezar, tendrá que descargar una copia de la biblioteca jQuery http://docs.jquery.com/Downloading_jQuery .
Este plugin funciona con 1.2.6 y 1.3.x
Usted también tendrá que descargar el plugin de jquery.maxlength. js

Una vez que haya descargado la copia que tendrá que incluir en el archivo.

  
    
  

  


Próximo paso incluir la librería

  
    
    
  
  
  

 

Ahora a la parte divertida, la forma de aplicar la funcionalidad de su guión.

Opciones del plugin

$(document).ready(function(){    
  $('#textarea_1_1').maxlength({   
    events: [], // Array of events to be triggerd    
    maxCharacters: 10, // Characters limit   
    status: true, // True to show status indicator bewlow the element    
    statusClass: "status", // The class on the status div  
    statusText: "character left", // The status text  
    notificationClass: "notification",	// Will be added when maxlength is reached  
    showAlert: false, // True to show a regular alert message    
    alertText: "You have typed too many characters.", // Text in alert message   
    slider: false // True Use counter slider    
  }); 
});

Ver código fuenteDemo y Pagina del autor

Libro: jQueryUI Theme – Guía para principiantes

jQuery UI Themes Beginners Guide_Front Cover

Detalles del libro

  • Paperback: 268 páginas
  • Autor: Packt publicación (julio de 2011)
  • Idioma: Inglés
  • ISBN-10: 184951044X
  • ISBN-13: 978-1849510448
  • Tamaño del archivo: 3.9 MiB

Descripción del libro

Aplicaciones web de hoy en general, utilizar al menos algo de JavaScript para mejorar la apariencia de la interfaz de usuario.El kit de herramientas de interfaz de usuario jQuery ofrece a los desarrolladores web un conjunto de widgets, así como un marco para el desarrollo y la aplicación de temas. Sigue leyendo

jQAPI Muy Buena Alternativa de jQuery Documentación 1.4.4

jQAPI

La documentación de jQuery es grande, muy completo, muy bien escrita y con una gran cantidad de ejemplos y demostraciones. Lo único que me molesta es la manera que tenemos que encontrar la documentación adecuada toca buscar demasiado, por ejemplo traten de buscar la función .is() . Más de 100 lugares antes de la función real que estoy buscando? :-(  Y es una estructura fija que significa que incluso en la pantalla grande que tenga que desplazarse hasta el fondo y tienen que buscarlo.

encontré una herramienta muy buena llamada JQApi, un sitio alternativa con la documentación de este framework javascript, pero un poco más accesible, y que no difiere de la documentación original, incluso los ejemplos oficiales están aquí.

incluso hay versiónes descargables en HTML y AIR para instalar la documentación y siempre tenerla a mano

Download HTML Version. Documentation for jQuery version 1.4.4 – 1.6MB – 11/12/10

Download AIR Version. Documentation for jQuery version 1.4.4 – 1.5MB – 11/12/10

Pagina oficial de la herramienta

A %d blogueros les gusta esto: