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 543 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 4026 posts 15836 karma points MVP 13x 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 543 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 863 posts 3849 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 543 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.

Please Sign in or register to post replies

Write your reply to:

Draft