Condenada Informatica y la @#!"¿$.... de tu madre: empezando con JQuery y JQuery UI

De seguro has escuchado en mas de una oportunidad lo genial que es JQuery y lo magnifico que quedan los efectos que se logran con el ,desde selectores de fechas hasta la explocion de un Div.
Sin duda el aprender a implementar Jquery con toda su potencialidad te ayudara a construir sitios mas dinamicos y competitivos.
Por ello les mostrare de manera rapida y practica como implementar Jquery y sus funcionalidades.De antemano les digo que tratare de ser lo mas consiso y practico posible, la idea es poder usar jquery con exito lo antes posible.

1-lo primero es descargar e instalar JQuery , ¿pensaras que es un setup o algo parecido?, pues no, Jquery es una libreria de javaScript,por lo que no es mas que un archivo de texto con funiones de javaScript NADA MAS.

En esta oportunidad lo descargaremos de la pagina JQueryUI, JQuery UI es otra libreria que se complementa a al JQuery para dar "efectos especiales" a tu desarrollo.Al descargar tendremos un archivo que incluye al JQuery (normal, indispensable para usar cualquier libreria que utilize JQuery) y JQuery UI que es una libreria para dar efectos interesantes a nuestra interfaz grafica.

2-ahora que ya hemos descargado la carpeta con los codigos necesarios (js's,css's,etc...) nos disponemos a implementar Jquery con toda la potencialidad que nos da el JQuery UI,¿como lo hacemos?, pues nada mas facil que llamando estos archivos desde nuestro HTML y ya esta !!!

<head>
  <script type="text/javascript" 
  src="jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js">
  /*incluimos a JQuery,indispensable para trabajar 
  con cualquer libreria basa da en JQuery,como lo es JQuery UI*/
  </script>
  
  <script type="text/javascript" 
  src="jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js">
  /*incluimos a JQuery UI,libreria que agrega efectos a nuestra interfaz grafica 
  usando como base a JQuery*/
  </script>
  
  <LINK href='jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.css' 
  type=text/css rel=stylesheet>
  <!--Todos los efectos necesitan de CSS,en esta ocacion utilizamos el 
  css del estilo smoothness (grises),existen muchos mas velos en la pagina de JQuery UI-->
</head>

3-Ahora solo hace falta usar JQuery, ¿como se hace esto?, solo hace falta inicializarlo en el momento cuando se carga el documento HTML, bueno en realidad solo basta con
aprenderse esto:

<script>

 /*Aqui inicializamos a JQuery*/
  $(document).ready(function(){//en el evento ready(hayas cargado el DOM) 
   //todo lo que este aqui       de document, ejecuta todo lo que este dentro de '{....})' 
   //se ejecutara al momento 
   //de cargar e documento       
    alert("hola que pasa !!!");//esta linia si quieres la quitas xD
  }) 

 </script>

bueno esto lo debes poner el el body , ya que es una funcion javascript

4-Bueno ahora que ya sabes como inicializar JQuery junto con JQuery UI, hagamos algo mas imprecionante
como por ejemplo cun selector de fecha, el famoso 'datepicker',esto lo hacemos gracas a JQuery UI y sus hermosas funciones, solo debemos crear un :

<input type='text' name='miCalendario' id='calendario'/>

y lo enlazamos con su atributo ' id ' de esta manera:

        <script>
 /*Aqui inicializamos a JQuery*/
  $(document).ready(function(){
   alert("hola que pasa !!!");
   $( "#calendario" ).datepicker();
  })
 </script>

De esta manera cuando ejecutemos nuestro HTML tendremos un hermoso selector de fecha,mejor llamado datepicker conclusion:

Descargar Jquery Y JQuey UI desde JQueryUI
Enlazar los archivos descargados a nuestro archivo HTML
Inicializar Jquery con $(document).ready(function(){....})

ejecutar funciones de JQuery UI enlazandolos con el id del input HTML

Condenada Informatica y la @#!"¿$.... de tu madre

sábado, 8 de junio de 2013

empezando con JQuery y JQuery UI

No hay comentarios:

Publicar un comentario