martes, 8 de noviembre de 2011

Jquery UI en SharePoint 2010


1- Descargue el componente que desea utilizar desde la pagina http://jqueryui.com/download
2- Descomprima el archivo y visualizara el siguiente contenido:

3- Copiar la carpeta css y js a sharepoint designer



4- Crear una pagina en el sitio de sharepoint
5- Editar la pagina
6- Adicionar web part  "editor de contenido"

7- Editar el contenido
8- En "Format Text",se ubica en el control y en  "HTML" la opción "Edit HTML Source"

- jquery es el  nombre del sitio

<link href="/jquery/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/><script src="/jquery/js/jquery-1.6.2.min.js" type="text/javascript"></script><script src="/jquery/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script><script type="text/javascript">

$(function(){

// Accordion
$("#accordion").accordion({ header: "h3" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); }, 
function() { $(this).removeClass('ui-state-hover'); }
);
});</script><style type="text/css">
.demoHeaders {
MARGIN-TOP: 2em
}
#dialog_link {
POSITION: relative; PADDING-BOTTOM: 0.4em; PADDING-LEFT: 20px; PADDING-RIGHT: 1em; TEXT-DECORATION: none; PADDING-TOP: 0.4em
}
UL#icons {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL#icons LI {
POSITION: relative; PADDING-BOTTOM: 4px; LIST-STYLE-TYPE: none; MARGIN: 2px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FLOAT: left; CURSOR: pointer; LIST-STYLE-IMAGE: none; PADDING-TOP: 4px
}
UL#icons SPAN.ui-icon {
MARGIN: 0px 4px; FLOAT: left
}</style>



9-  Se ubica sobre la pagina y accede a la opción  en  "HTML" la opción "Edit HTML Source" y adiciona el objeto jquery.

<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

10-  Lo siguiente que puede hacer es adicionar una libreria o lista, o el objeto sharepoint que desee asi:






11- Copia el codigo generado para el objeto sharepoint.
12- Por ultimo editar el content editor, en "Format Text",se ubica en el control y en  "HTML" la opción "Edit HTML Source", busca  los divs de contenido y reemplaza el codigo :


<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>

por:

<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false"><div class="ms-rtestate-notify  ms-rtestate-read f61712fb-bbda-4644-8c40-5e22adbc0306" id="div_f61712fb-bbda-4644-8c40-5e22adbc0306"></div>
<div id="vid_f61712fb-bbda-4644-8c40-5e22adbc0306" style="display: none"></div></div>




Como se muestra a continuación:

<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>

<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false"><div class="ms-rtestate-notify  ms-rtestate-read f61712fb-bbda-4644-8c40-5e22adbc0306" id="div_f61712fb-bbda-4644-8c40-5e22adbc0306"></div>
<div id="vid_f61712fb-bbda-4644-8c40-5e22adbc0306" style="display: none"></div></div>



</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

13- De esta manera puede personalizar sus paginas en sharepoint.




No hay comentarios:

Publicar un comentario