Diferencia entre revisiones de «Usuario:Juanda/jQuery/Plugins»

De WikiEducator
Saltar a: navegación, buscar
(Instalación)
(Conceptos básicos)
Línea 17: Línea 17:
 
<div class="slide">
 
<div class="slide">
  
=== Conceptos básicos ===
+
=== Pasos previos ===
*jQuery es una librería de funciones JavaScript:
+
*Para poder usar el plugin deberemos añadir las siguientes líneas en nuestros scripts:
 +
<source lang="javascript">
 +
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
 +
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
 +
</source>
 +
 
 +
*Directorio dist:
 +
:Se encuentran los scripts propios de validación.
 +
:Hay versión de desarrollo y versión de producción
 +
:El fichero additional_methods.js tiene librerías adicionales de validación, las menos habituales.
 +
 
 +
*Directorio lib:
 +
:Librerías útiles, como distintas versiones de jQuery (necesarias para el correcto funcionamiento del plugin).
 +
:jquery.forms.js:
 +
:jquery.mockjax.js:
 +
 
 +
 
 
*'''“Write less, do more”''' (escribe menos, haz más)
 
*'''“Write less, do more”''' (escribe menos, haz más)
 
*Funcionalidad:
 
*Funcionalidad:
Línea 30: Línea 46:
  
 
<div class="slide">
 
<div class="slide">
 +
 
===Primer ejemplo===
 
===Primer ejemplo===
 
*Versión actual de jQuery: '''1.10.2''' y '''2.0.3'''
 
*Versión actual de jQuery: '''1.10.2''' y '''2.0.3'''

Revisión de 22:33 27 nov 2013


Instalación

Pasos previos

  • Para poder usar el plugin deberemos añadir las siguientes líneas en nuestros scripts:
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
  • Directorio dist:
Se encuentran los scripts propios de validación.
Hay versión de desarrollo y versión de producción
El fichero additional_methods.js tiene librerías adicionales de validación, las menos habituales.
  • Directorio lib:
Librerías útiles, como distintas versiones de jQuery (necesarias para el correcto funcionamiento del plugin).
jquery.forms.js:
jquery.mockjax.js:


  • “Write less, do more” (escribe menos, haz más)
  • Funcionalidad:
Selección y manipulación de elementos HTML y CSS
Funciones de eventos en HTML
Efectos y animaciones de JavaScript
AJAX
Compatibilidad con todos los navegadores

Primer ejemplo

  • Versión actual de jQuery: 1.10.2 y 2.0.3
  • Licencia MIT
  • La funcionalidad es la misma
  • La rama 2.x no es compatible con IE 6-8
  • La rama 2.x es algo más ligera
  • Usaremos la rama 1.x:
Misma funcionalidad
Mayor compatibilidad

Mensajes de error

  • Versión de producción:
Minified y comprimida
Aproximadamente 90KB
  • Versión de desarrollo:
Sin comprimir
Aproximadamente 3 veces más pesada, en torno a 270KB
  • La rama 2.x pesa un 10% menos, resulta inapreciable
  • Versión de producción:
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  • Versión de desarrollo
	<script type="text/javascript" src="jquery-1.10.2.js"></script>

Reglas y métodos de validación personalizados

Datagrid