Recién instalada la beta de SharePoint 2010 lo primero que se me ocurrió fue intentar migrar mis andanzas con jQuery a la nueva plataforma, tras la “aventura” de instalarlo (gracias a la inestimable ayuda JC´s) en vhd bootable de x64 (no hay mas remedio) sobre un Windows Server 2008 R2, pude empezar a trastear.
Lo primero que he encontrado muy cambiado es la web part Content Editor, con el nuevo estilo de navegación, la que podemos encontrar en el grupo Medios y contenidos, además ya no disponemos de los botones que nos permitían la edición de código fuente y editor de texto enriquecido que teníamos en 2007.
Pero hay una solución (gracias a JC´s de nuevo), situados en la web part podemos movernos en la ribbon a un opción que si nos permite modificar el código en la pestaña formato de texto –> HTML (desplegable) –> Editar código fuente :
Ahí meteríamos nuestro código, que como se puede ver en la captura utilizaremos jqDock para crear un menú deslizante que nos agranda el elemento por el que naveguemos.
También se puede realizar la inserción de código mediante la web part formulario de HTML, ya que esta si nos permite directamente la edición y ese código queda fijo en la pagina (con la web part editor de contenido he observado que mete código de mas para ajustar estilos):
Para este apartado me cree un directorio en 14/Template/Images llamado Dock, el cual contiene todo lo necesario para que el menú funcione correctamente, necesitaremos la librería jQuery, el javascript de jqDock, hojas de estilo y las imágenes. En este enlace encontraremos ejemplos de estilos y diferentes opciones que nos permite jqDock, aunque no especifican compatibilidad con SharePoint… pero funciona xD.
A continuación comparto mi código que va incrustado en la web part de formulario HTML, el cual principalmente tiene las llamadas a jQuery, jqDock y a las hojas de estilo, el siguiente paso es definir las opciones del Dock y finalmente jugar con los enlaces y las imágenes (recomiendo imágenes cuadradas 128x128 px para no descompensar el menú):
|
<link type="text/css" rel="stylesheet" href="/_layouts/Images/dock/dock.css" />
<script type='text/javascript' src='_layouts/Images/Dock/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='_layouts/Images/Dock/jquery.jqDock.js'></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var options1 =
{
size:48,
align: 'top',
labels: 'tc'
};
jQuery('#menu1').jqDock(options1);
});
</script>
<h1>Ejemplo de Menú jqDock</h1>
<p>Pasa el mouse sobre las imagenes del menú y veras el efecto</p>
<div id='menu1'>
<a href='http://ciin.es' title='CIIN'>
<img src='_layouts/Images/dock/logo.png' alt='' />
</a>
<a href='http://www.microsoft.com/windows/windows-xp/default.aspx' title='Disco XP'>
<img src='_layouts/Images/dock/disc.png' alt='' />
</a>
<a href='http://windows.microsoft.com/en-US/windows7/products/features/windows-media-player-12' title='Media Player'>
<img src='_layouts/Images/dock/Audio.png' alt='' />
</a>
<a href='http://windowsupdate.microsoft.com/' title='Windows Update'>
<img src='_layouts/Images/dock/WU.png' alt='' />
</a>
<a href='' title='Date And Time'>
<img src='_layouts/Images/dock/Date And Time.png' alt='' />
</a>
<a href='jqDockMenu.html' title='Panle de Control'>
<img src='_layouts/Images/dock/Control.png' alt='' />
</a>
<a href='' title='Papelera'>
<img src='_layouts/images/dock/papelera.png' alt='' />
</a>
</div>
|
Y la hoja de estilos:
|
#menu1 {
position:relative; top:-300; right:5%; padding:50px; width:50px;
}
div.jqDock {background-color:transparent;}
div.jqDockLabel {
border:0px none; padding:0px ; font-weight:bold; font-size:18px; font-style:italic;
white-space:nowrap; color:#0055DD; background-color:transparent;
}
div.jqDockLabelLink {cursor:pointer;}
div.jqDockLabelImage {cursor:default;}
|
El resultado:
Saludos.
Jesús.
Comparte este post: