SharePoint 2010 + jQuery

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.

WPeditorcontenido

 PropiedadesContent             image

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 : 

Contentmetercodigo

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):

PropiedadesHtml

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 128×128 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:

jQdock2

 jQdock3   jQdock5jQdock4

 Saludos.

Jesús.

Un comentario en “SharePoint 2010 + jQuery”

Deja un comentario

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