Primero hay que incluir los scripts del spinner en nuestro template, en este caso se utilizan los siguientes:
{ script src="/coblibs/spinner/spin.min.js" }{/script}
{ script src="/coblibs/spinner/cob-spinner.js" }{/script}
Hay que recordar que estos scripts, se incluyen dentro de la seccion HEAD del html.
Declaracion de nuestra variable spinner:
$(document).ready(function() {
//Spinner
var spinnerTarget = document.getElementById('mainPanel');
var spinner = new Spinner(spinner_options);
});
Aqui se declara la variable spinner, haciendo uso de una funcion JQuery, esta funcion ready() se ejecuta cuando se termino de cargar todo el documento, hasta entonces se declara la variable spinner.
Tambien se indica, cuan va a ser el elemento target donde se va a dibugar nuestro spinner. En este caso se va a crear en el elemento mainPanel.
Este elemento, hay que declararlo dentro del cuerpo BODY de nustro html.
debe ser un elemento que abarque preferentemente toda la pantalla, es decir deberia de ser el primer elemento de nustro documento, tal como se define en el ejemplo spinner1.html
{ div id='mainPanel' }
...
{ /div }
Hasta ahora ya tenemos, dclarado nuestro spinner, y el area donde va a aparecer cuando se active.
Faltaria, el evento que lo active, cuando se pulse el boton enviar del formulario.
Activar el spinner, con el boton de enviar del formulario:
Para esto, se declara un evento, usando JQuery, que se dispara al momento que el usuario hace click en el boton enviar o SUBMIT:
$( "#forma1" ).submit(function( event ) {
spinner.spin(spinnerTarget); //mostrar el spinner
});
Este evento, se puede declarar dentro de lamisma funcion ready, de jquery, para que toda completa quede de esta forma:
$(document).ready(function() {
//Spinner
var spinnerTarget = document.getElementById('mainPanel');
var spinner = new Spinner(spinner_options);
$( "#forma1" ).submit(function( event ) {
spinner.spin(spinnerTarget); //mostrar el spinner
});
});
De esta forma, cuando se termine de cargar todo el documento, declara nuestra variable spinner, y aparte define un evento submit para el formulario forma1.
forma1, seria el ID para nuestro formulario, que deberia quedar declarado asi:
{ FORM id="forma1" action="./spinner2.html" method="POST" }
...
{ /FORM }
Con todo esto junto trabajando, cuando el usuario haga click en el boton ENVIAR o SUBMIT, se dispara el evento SUBMIT de la forma, que lo que hace es activar el spinner, que sera dibujado dentro del target mainPanel.
