En este post explicaré como podemos personalizar nuestro Quick Launch para que tenga un efecto Collapsible haciendo uso de jquery.
He tomado como referencia el código de esta página: http://www.sharepoint2010guru.com/sharepoint2010architecture/knoxblog/SitePages/navdemo2.aspx es uno de los mejores que he encontrado para SharePoint 2010.
En el código al presionar el botón Make Navigation Collapsible el Quick launch cambia, sin embargo debido que yo quiere tener este efecto al cargar la página hice unas pequeñas modificaciones y copie el código en mi archivo actions.js que explique como utilizar en mi post anterior.
El código a copiar en actions.js debe ser el siguiente:
//Con la sección $(document).ready especifico que se ejecute la función Collapsible cuando la página este lista.
$(document).ready(function(){
makeLNCollapsible() ;
});
function makeLNCollapsible()
{
$(«div.menu-vertical>ul.root>li.static>a span.menu-item-text»).append(
« <img src=’_layouts/images/plus.gif’ border=’0′ class=’collapser’/>»);
$(«img.collapser»).toggle(
function () {
$(«>ul», $(this).parent().parent().parent().parent()).show(«fast»);
$(this).attr(‘src’,’_layouts/images/minus.gif’);
},
function () {
$(«>ul», $(this).parent().parent().parent().parent()).hide(«fast»);
$(this).attr(‘src’,’_layouts/images/plus.gif’);
}
);
$(«div.menu-vertical>ul.root>li.static>ul.static»).css(«display»,»none»);
}
El resultado final debería ser el siguiente:
