2011-06-16 34 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

相關問題