Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Benjamin Vejs 3 posts 23 karma points
    Jun 04, 2014 @ 01:45
    Benjamin Vejs
    0

    Tabs in content

    Hey Umbracians,

    I'm new to Umbraco, but have a been programming ASP.NET MVC for some time now. I also want to thank those people who doing a great work with making umbraco.

    I got this problem that have bothering me for some days now. I'm coding a site with umbraco 7.0.4 in VS.

    The trouble I'm having is, how that I haven't be able to find a solution yet on how to make dynamic tabs with additional content in. And I have both search here on the forum and on google.

    I need to make a subpage with some content, and in the bottom of I need a Tabs with more content in them.

    Example:

    tab 1: Description

    tab 2: Before/after pictures

    tab 3: brochures

    and so on...

    I have made these tabs and generics properties, in the Document Type: Subpage

    Tab: Content - with these generic properties:

    property: Title

    property: Content

    Tab: Additional - with these generic properties:

    property: Description

    property: BeforeAfterPictures

    property: Brochure

    I have implemented a Macropartials in my Subpage: SubpageNavItem

    @{
    
        Node current = Node.GetCurrent();
        DocumentType dt = DocumentType.GetByAlias(current.NodeTypeAlias);
    
    
    }
    
    
    <div class="additionalMenuNavigation">
        @if (dt != null)
        {
            <ul class="nav nav-justified">
                @foreach (var tab in dt.getVirtualTabs)
                {
    
                    if (tab.Id == 1013)
                    {
    
                        foreach (var propertyType in tab.PropertyTypes)
                        {
                            string name = propertyType.Name;
                            <li>
                                <a href="#" id="@propertyType.Name" onclick="ShowAdditional(this)" class="additionalMenuNavigation-a"  >
                                    <div class="additionalMenuDivider">
                                        @name
                                    </div>
                                </a>
                            </li>
                        }
                    }
                }
            </ul>
        }
    </div>
    <script>
        function ShowAdditional(btnClicked) {
    
            var id = $(btnClicked).attr('id');
    
            $.ajax({
                url: "/base/Relations/ShowAdditional/"+id,
                type: "GET",
    
            })
                .done(function (partialVeiwResult) {
                    $("#string").html(partialVeiwResult);
                });
        }
        </script>
    

    And the Subpage:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        Layout = "Layout.cshtml";
    }
    <div class="row">
        @Html.Partial("~/Views/Partials/breadcrumb.cshtml")
    </div>
    <div class="container">
        <div class="row-fluid">
            <div class="col-lg-3" style="height:100%;">
                @Html.Partial("~/Views/Partials/ContentVerticalList.cshtml")
            </div>
            <div class="col-lg-9">
                <h3>@Umbraco.Field("title")</h3>
            </div>
            <div class="col-lg-6">
                @Umbraco.Field("content")
            </div>
            <div class="col-lg-3">
                <div class="testimonial">
                    <h3>"</h3>@Umbraco.Field("testimonial")
                </div>
    
            </div>
            <div class="col-lg-9">
                @Umbraco.RenderMacro("SubpageNavItem")
            </div>
            <div class="col-lg-9">
                <div id="string"></div>
    @*            <div id="usual1" class="usual">*@
    @*                <ul>*@
    @*                    <li><a class="selected" href="#tab1">Tab 1</a></li>*@
    @*                    <li><a href="#tab2">Tab 2</a></li>*@
    @*                    <li><a href="#tab3">Tab 3</a></li>*@
    @*                </ul>*@
    @*                <div id="tab1">This is tab 1.</div>*@
    @*                <div id="tab2">More content in tab 2.</div>*@
    @*                <div id="tab3">Tab 3 is always last!</div>*@
    @*            </div>*@
    @**@
    @*            <script type="text/javascript">*@
    @*                $("#usual1 ul").idTabs();*@
    @*            </script>*@
    
            </div>
        </div>
    </div>
    

    What i need is for the Tabs to show the additional information to the user, without the hole page reloading for each click on a tab. I also want to avoid making children document types, to make the backoffice page more userfriendly and I have a contentVerticalList(Menu) which shows all children pages of the site.

    I'm not sure if the best solution would be to do some Tabs with JQuery, ajax or if there is a plugin that would work for what I want to achive.

    Something like this http://www.sunsean.com/idTabs/#usual

    I hope someone with more experince and knowledge in umbraco can guide me in the right direction.

    Best Regards

    Benjamin

  • Benjamin Vejs 3 posts 23 karma points
    Jun 04, 2014 @ 02:25
    Benjamin Vejs
    0

    Solved it, Bootstrap and JQuery tabs, Worked the way I needed it for the site.

Please Sign in or register to post replies

Write your reply to:

Draft