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 for CSS style。

BTW，因为你限制自己创建最多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控件属性的情况下为sharelapoint创建手风琴。这是我工作的方式。

<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':''});
        });

希望这对每个人都有帮助，唯一的问题是在选定的页面加载后手风琴会崩溃。

Sharepoint 2010 - 快速启动菜单手风琴风格

2 个答案: