|
|
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 23:33 27 nov 2013
jQuery
Tutorial para desarrollar en Web mediante jQuery.
Validación de Formularios
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>
- 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.
- 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
- Minified y comprimida
- Aproximadamente 90KB
- Sin comprimir
- Aproximadamente 3 veces más pesada, en torno a 270KB
- La rama 2.x pesa un 10% menos, resulta inapreciable
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
Reglas y métodos de validación personalizados
Datagrid