Copied to clipboard

Flag this post as spam?

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


  • Ivan 165 posts 542 karma points
    Jan 17, 2013 @ 21:27
    Ivan
    0

    Hide tabs programmatically using API

    Hi guys.

    How do I hide/show tabs using API?

    I need dynamically show/hide tabs based on template alias selected.

    So for example, when alias = "template1", then the page should be loaded with 1 tab on it.When alias = "template2", then the page should have 2 tabs.

     

  • Lee Kelleher 3945 posts 15163 karma points MVP 10x admin c-trib
    Jan 18, 2013 @ 13:13
    Lee Kelleher
    0

    Hi Ivan,

    Wouldn't it be simpler to have different Document Types to handle the tabs/properties for those different templates?

    Cheers, Lee.

  • Ivan 165 posts 542 karma points
    Jan 18, 2013 @ 13:39
    Ivan
    0

    Hi Lee.

    I was thinking about it. The problem is that I won't be able to switch between layouts afterwards, because it's not possible to change Doc. Type after the page has been created.

  • Hendy Racher 861 posts 3844 karma points MVP 2x admin c-trib
    Jan 18, 2013 @ 13:44
    Hendy Racher
    101

    Hi Ivan, thought this was worth a mention, it may be useful (but certainly not best practice!) to hack (ahem) customise the back office, I've used the uComponents Render Macro to inject custom JS into the page via a datatype property, and then used these helper methods:

    var UmbracoScriptHelper = UmbracoScriptHelper || (function () {
    
        function getTab(tabName) {
    
            return jQuery('span > nobr')
                    .filter(function () {
                        return jQuery(this).html() == tabName;
                    })
                    .parentsUntil('li', 'a').parent();
    
        }
    
        function getTabArea(tabName) {
    
            return jQuery('div#' + getTab(tabName).attr('id') + 'layer_contentlayer div.tabpageContent');
    
        }
    
        function activateTab(tabName) {
    
            getTab(tabName).find('a:first').click();
    
        }
    
        function hideTab(tabName) {
    
            getTab(tabName).hide();
    
        }
    
        function findPropertyInTab(tabName, propertyName) {
    
            return getTabArea(tabName)
                    .find('div.propertyItemheader')
                    .filter(function () {
                        return jQuery(this).html() == propertyName;
                    })
                    .parentsUntil('div.tabpagecontent', 'div.propertypane');
    
        }
    
        function movePropertyToTop(tabName, propertyName) {
    
            findPropertyInTab(tabName, propertyName).prependTo(getTabArea(tabName));
    
        }
    
        return {
    
            activateTab: activateTab,
            hideTab: hideTab,
            findPropertyInTab: findPropertyInTab,
            movePropertyToTop: movePropertyToTop
    
        };
    
    } ());
    
    

    HTH, Hendy

  • Ivan 165 posts 542 karma points
    Jan 18, 2013 @ 13:47
    Ivan
    0

    Hi Hendy.

    JavaScript would be just fine. Thanks for the solution, I'll give it a try.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies