Sharepoint2010 - QuickLaunchMenu手风琴风格

问题描述：

我尝试更改我的Sharepoint2010网站的QuickLaunchMenu以使用手风琴风格。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>

任何帮助，将不胜感激。

谢谢！

答

作为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

答

嗨，我已经找到一个方法，使用了改变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':''}); 
     });

希望这有助于每一个添加的代码，唯一的问题将是手风琴崩溃后，选择页面加载。

Sharepoint2010 - QuickLaunchMenu手风琴风格

相关推荐