2011-06-16 49 views
3

我正在打造SharePoint 2010,并且我默认隐藏功能区,并在用户单击向下箭头时显示。用户可以通过点击隐藏图标再次隐藏它。 JQuery的切换和toggleClass工作带来极大的SharePoint 2010功能区隐藏/ {在库项目选择或其他事件上显示}

<div id="ribbonHide"> 
     <a class="toolTipHover" href="#"> 
      <div class="downArrowSmall" onclick="JavaScript:$('#s4-ribbonrow').toggle();$(this).toggleClass('downArrowSmall upArrowSmall');"> 
       <span class="ribbonHideToolTipOpen">Display the Ribbon</span><span class="ribbonHideToolTipClose">Hide the Ribbon</span> 
      </div> 
     </a> 
    </div> 

当用户点击一个库项目的选择复选框,整个标题行消失,因为它更换当色带选择库工具选项卡/库窗格中的问题。但丝带仍然隐藏。网站标题横幅也是如此。

问题:如何侦听触发功能区更改的页面事件(任何),以便我可以再次显示它?

谢谢!

回答

4

好的,我回来了。答案是在masterpage和CSS中更改s4-titlerow div的id。这将它从Ribbon定位系统中隐藏起来。

然后,为了防止功能区定位系统在点击某些选项卡并且功能区再次隐藏后打破布局,我在功能区的显示/隐藏脚本中添加了对功能区自己的“修复程序”功能的调用:

<div id="ribbonHide"> 
    <a class="toolTipHover" href="#"> 
     <div class="downArrowSmall" onclick="JavaScript:$('#s4-ribbonrow').toggle();$(this).toggleClass('downArrowSmall upArrowSmall');FixRibbonAndWorkspaceDimensions();"> 
      <span class="ribbonHideToolTipOpen">Display the Ribbon</span> <span class="ribbonHideToolTipClose"> 
       Hide the Ribbon</span> 
     </div> 
    </a> 
</div> 

我不能与this simple solution快乐,并用丝​​带反对本身!

+0

您是否会善于分享您如何设计上下箭头和相应的文本,因为用户可以打开或关闭功能区?意味着很多! – Athapali 2012-11-07 17:48:06

+0

对不起,我从来没有重新访问这个线程。我使用了箭头的精灵和跨度的悬停技巧: .downArrowSmall { position:absolute; height:10px; width:10px; background-image:url('/ _ layouts/images/fgimg.png'); background-position:-2px -632px; background-repeat:no-repeat; } .upArrowSmall { position:absolute; height:10px; width:10px; background-image:url('/ _ layouts/images/fgimg.png'); background-position:0px -445px; background-repeat:no-repeat; } – 2013-04-30 15:42:34

+0

a.toolTipHover { position:relative; display:block; z-index:24; } a.toolTipHover span { display:none; } a.toolTipHover:hover .downArrowSmall .ribbonHideToolTipOpen { position:relative; display:inline-block; white-space:nowrap; top:2em; left:2em; 边框:1px纯灰色; color:#FFFFFF; } a.toolTipHover:hover .upArrowSmall。ribbonHideToolTipClose { position:relative; display:inline-block; white-space:nowrap; top:2em; left:2em; 边框:1px纯灰色; color:#FFFFFF; } – 2013-04-30 15:44:13