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!