Sharepoint2010 - QuickLaunchMenu手風琴風格

Question

我嘗試更改我的Sharepoint2010網站的QuickLaunchMenu以使用手風琴風格。

如何獲取當前選定的項目？是否有可能向當前（活動）導航項添加一個CSS類？ 如何添加第三個層次結構？

這是我的jQuery代碼：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#s4-leftpanel-content li.static>ul.static").each(function(){ 
       $(this).hide(); 
      }); 
      $("#s4-leftpanel-content ul.root>li.static>a").click(function(ev){ 
       //ev.preventDefault(); 
       var child = $(this).parent().children('ul');    
       $("#s4-leftpanel-content li.static>ul.static").each(function(){ 
         $(this).hide();    
       }); 
       child.toggle(); 
      }); 
      //disable heading click 
      $("#s4-leftpanel-content ul.root>li.static>a").toggle(
       function() {}, 
       function() {} 
      ); 
     }); 
    </script> 

，這是我的快速啓動控制：

<SharePoint:UIVersionedContent UIVersion="4" runat="server"> 
         <ContentTemplate> 
          <SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" 
           DataSourceId="QuickLaunchSiteMap" 
           UseSimpleRendering="true" 
           UseSeparateCss="false" 
           SelectStaticItemsOnly="true" 
           CustomSelectionEnabled="true" 
           Orientation="Vertical" 
           StaticDisplayLevels="3" 
           MaximumDynamicDisplayLevels="2" 
           SkipLinkText="" 
           CssClass="s4-ql"> 
          </SharePoint:AspMenu> 
         </ContentTemplate> 
        </SharePoint:UIVersionedContent> 

任何幫助，將不勝感激。

謝謝！

Answer 1

作爲AspMenu選自Menu類（器WebControls命名空間的一部分）和

對於活動繼承的，見SelectedItem屬性

msdn.microsoft.com/EN-US/library/0f4wwt2y

對於CSS，有StaticSelectedStyle，DynamicSelectedSytle和LevelSelectedSytles 就你而言，你創建了3個級別的靜態菜單和2個級別的動態菜單。看看StaticSelectedStyle和DynamicSelectedSytle的CSS樣式。

順便說一句，當你限制自己創建動態菜單的最大2級時，我相信這就是爲什麼你不能創建3級。

<DynamicSelectedStyle 
     BackColor="color name|#dddddd" 
     BorderColor="color name|#dddddd" 
     BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double| 
      Groove|Ridge|Inset|Outset" 
     BorderWidth="size" 
     CssClass="string" 
     Font-Bold="True|False" 
     Font-Italic="True|False" 
     Font-Names="string" 
     Font-Overline="True|False" 
     Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small| 
      Medium|Large|X-Large|XX-Large" 
     Font-Strikeout="True|False" 
     Font-Underline="True|False" 
     ForeColor="color name|#dddddd" 
     Height="size" 
     HorizontalPadding="size" 
     ItemSpacing="size" 
     OnDisposed="Disposed event handler" 
     VerticalPadding="size" 
     Width="size" 
    /> 
    <StaticSelectedStyle 
     BackColor="color name|#dddddd" 
     BorderColor="color name|#dddddd" 
     BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double| 
      Groove|Ridge|Inset|Outset" 
     BorderWidth="size" 
     CssClass="string" 
     Font-Bold="True|False" 
     Font-Italic="True|False" 
     Font-Names="string" 
     Font-Overline="True|False" 
     Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small| 
      Medium|Large|X-Large|XX-Large" 
     Font-Strikeout="True|False" 
     Font-Underline="True|False" 
     ForeColor="color name|#dddddd" 
     Height="size" 
     HorizontalPadding="size" 
     ItemSpacing="size" 
     OnDisposed="Disposed event handler" 
     VerticalPadding="size" 
     Width="size" 
    /> 

看看這個。 http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.aspmenu_members.aspx

http://msdn.microsoft.com/en-us/library/ms476607.aspx

Answer 2

嗨，我已經找到一個方法，使用了改變ASP的控制屬性的SharePoint快速啓動手風琴。 這是我工作的方式。

<script type="text/javascript" src="/_layouts/Scripts/jquery-1.4.4.min.js"></script>  
<script type="text/javascript" src="/_layouts/Scripts/jquery.easing.js"></script> 
<script type="text/javascript" src="/_layouts/Scripts/jquery.dimensions.js"></script> 
<script type="text/javascript" src="/_layouts/Scripts/jquery.accordion.js"></script> 
<script type="text/javascript" src="/_layouts/Scripts/navaccord.js"></script> 

低於「navaccord.js」文件

jQuery().ready(function(){  
    // second simple accordion with special markup 
    jQuery('.root ').accordion({ 
     header: '.menu-item', 
     navigation: true, 
     event: 'click',   
     animated: 'easeslide', 
     active: '.tab4', 
     selectedClass: 'active' 

    }); 

    // bind to change event of select to control first and seconds accordion 
    // similar to tab's plugin triggerTab(), without an extra method 
    var accordions = jQuery('.root'); 

    jQuery('#switch select').change(function() { 
     accordions.accordion("activate", this.selectedIndex-1); 
    }); 
    jQuery('#close').click(function() { 
     accordions.accordion("activate", -1); 
    }); 
    jQuery('#switch2').change(function() { 
     accordions.accordion("activate", this.value); 
    }); 
    jQuery('#enable').click(function() { 
     accordions.accordion("enable"); 
    }); 
    jQuery('#disable').click(function() { 
     accordions.accordion("disable"); 
    }); 
    jQuery('#remove').click(function() { 
     accordions.accordion("destroy"); 
     wizardButtons.unbind("click"); 
    }); 
}); 
$(function() { 
$("ul>li>ul>li>a").removeClass("menu-item"); 
$("ul>li>ul").css({'display':'none', 'height':''}); 
     }); 

希望這有助於每一個添加的代碼，唯一的問題將是手風琴崩潰後，選擇頁面加載。