如何在页面上创建localNav样式的选项卡式布局

Question

I want to have a page that has two tabs, and I can see how to do this in AdminMenu.cs using LocalNav() BUT I need this on a third level item.

My page structure is

Admin Menu

• My module
  • Content Item 1
    • Tab 1
    • Tab 2
  • Content Item 2
    • Tab 1
    • Tab 2

I can't get these to appear as it only seems to support having tabs off the "my module" link, and not the lower level links.

Is there another way to display the tabbed interface on my "content item 1" and "content item 2" pages?

Answer 1

I don't believe there is a way to do this using Orchard's Navigation provider alone. I've done something similar, but I had to handle the tertiary level separately, and implement the menu UI myself from my own controller.

You will still need to add the third level in your module's Navigation Provider, as this will then mark the LHS menu and Tab selections correctly. Something along the lines of:

namespace Company.MyModule {
    public class TileSortAdminMenu : INavigationProvider {

        private Localizer T { get; set; }

        public string MenuName { get { return "admin"; } }

        public void GetNavigation(NavigationBuilder builder) {

            builder
                .AddImageSet("mymodule")
                .Add(T("My Module"), "5", menu => menu
                    .LinkToFirstChild(true)
                    .Add(T("Content Item 1"), "1", item => item
                        .LocalNav()
                        .LinkToFirstChild(true)
                        .Add(T("Tab 1"), "1", tab => tab
                            .LocalNav()
                            .Action("Index", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                        .Add(T("Tab 2"), "2", tab => tab
                            .LocalNav()
                            .Action("Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                    )
                    .Add(T("Content Item 2"), "2", item => item
                        .LocalNav()
                        .LinkToFirstChild(true)
                        .Add(T("Tab 1"), "1", tab => tab
                            .LocalNav()
                            .Action("ContentItem2Tab1", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                        .Add(T("Tab 2"), "2", tab => tab
                            .LocalNav()
                            .Action("ContentItem2Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                    )
                );
        }
    }
}

In your View, you can maintian Orchard's styling by using something like:

<ul class="localmenu localmenu-submenu">
    <li class="selected"><a href="@Url.Action("Index", "MyModuleAdmin", new { area = "Company.MyModule"})">Tab 1</a<</li>
    <li><a href="@Url.Action("Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})">Tab 2</a></li>
</ul>

Where the class localmenu-submenu is a styling hook for your own style tweaks, and you add the class selected to whichever tab you're viewing.

Alternatively, depending on what you're trying to achieve, you could just implement jQuery UI's Tabs (available through the Orchard.jQuery resource manifest), and just update the styling to look Orchard-y.