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 *