JQuery desde mi Portal con SharePoint 2010 – Parte 2 (Mi primera animación jquery)

En el post anterior aprendimos a referenciar nuestra librería jquery desde nuestro Master Page.

En este post aprenderemos a utilizar código jquery desde nuestro portal en SharePoint para poder personalizar nuestras interfaces e incorporar animaciones.

Comenzaremos con un ejemplo sencillo que no contempla el uso de componentes de SharePoint como listas, bibliotecas o elementos, simplemente insertando una animación jquery.

A continuación los pasos a seguir:

1. El primer paso es abrir SharePoint designer 2010 y en All Files, Style Library, Scripts (carpeta que deberemos haber creado) agregaremos un archivo actions.js

 2. A continuación deberemos editar nuestro Master Page y debajo de donde referenciamos a nuestra librería jquery deberemos referenciar al archivo actions.js (aquí pondremos nuestras funciones jquery y javascript):

<script src=”/style%20Library/Scripts/actions.js” type=”text/javascript”></script>

 3. A continuación editaremos nuestro archivo actions.js para ingresar el siguiente código jquery:

function animandoCaja(){

$(“#d1″).animate({width:400},”slow”);

$(“#d1″).animate({height:400},”slow”);
   
$(“#d1″).animate({width:50},”fast”);   
$(“#d1″).animate({height:50},”fast”);
   

$(“#d1″).animate({height:100},”slow”);
 
$(“#d1″).animate({width:100},”slow”);
$(“#d1”).fadeOut(1000);
$(“#d2”).fadeIn(1000);

 }

4. Finalmente crearemos una nueva página de SharePoint en blanco e insertaremos el siguiente HTML:

<input type=”button” value=”Animar” Onclick=”animandoCaja()”/>
<div id=”d1″ style=”background:#98bf21;height:100px;width:100px;position:relative”></div>
<div id=”d2″ style=”display:none”>FIN</div>

 5. El Resultado final debería ser el siguiente (Al dar clic en el bóton Animar podrán ver la animación completa) :

Seguire posteando sobre este tema tan interesante!

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *