Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Celebration

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,459,097
Community Members
 
Community Events
176
Community Groups

User Macros For Creating Tabs

Have you ever wanted to create tabs on your page? Well, of course you have! Tabs are a great way of organizing a page to keep it looking uncluttered. Below are two user macros you can create that will give you the ability to put tabs on your Confluence pages.

How it looks in the editor

image.png

How it looks when viewing the page

image.png

image.png

The User Macro Code

Macro Name:
tab_group

Macro Title:
Tab Group

Description:
This macro is used with the Tab macro. It controls the tab direction and responsiveness of the tab macros within it.

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 03/31/2022
## @param Vertical:title=Vertical Orientation|type=boolean|desc=Display the tabs vertically vs horizontally.|default=false
## @param Responsive:title=Responsive|type=boolean|desc=If checked tabs that overrun the width of the screen will be placed inside a menu.|default=false

##############################
## Create a unique id value ##
##############################
#set( $id=$action.dateFormatter.calendar.timeInMillis )

###########################################################################
## These are used for getting around velocity issues when writing jQuery ##
###########################################################################
#set( $d = '$' )
#set( $p = '#' )

#if ( $paramVertical == true )
    #set( $direction = "vertical-tabs" )
#else
    #set( $direction = "horizontal-tabs" )
#end

#if ( $paramResponsive == true )
    #set( $responsive = ' data-aui-responsive="true"' )
#else
    #set( $responsive = "" )
#end

<div id="tabGroup$id" class="aui-tabs $direction"$responsive>
<ul class="tabs-menu"> </ul>
$!body
</div>

<script type="text/javascript">
    AJS.toInit(function(){
        var html$id = '';
        //Only one active tab
        if(AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').length > 1 || AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').length == 0) {
            AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').removeClass('active-pane');
            var firstTab$id = AJS.${d}('#tabGroup$id > .tabs-pane').get(0);
            AJS.${d}(firstTab$id).addClass('active-pane');
        }
        
        AJS.${d}('#tabGroup$id > .tabs-pane').each(function(index) {
            var active$id = '';
            
            if(AJS.${d}(this).hasClass('active-pane')) {
                active$id = ' active-tab';
            }
            html$id += '<li class="menu-item' + active$id + '"><a href="#' + AJS.${d}(this).attr('id') + '" id="aui-tab-uid-' + AJS.${d}(this).attr('id') + '" class="tabs-menu-anchor"><strong>' + AJS.${d}(this).attr('data-tab-name') + '</strong></a></li>';
        });
        
        AJS.${d}('#tabGroup$id > .tabs-menu').append(html$id);
        
        AJS.tabs.setup();
        
        // Prevent scrolling the page to the tab
        AJS.${d}(".tabs-menu-anchor").click(function(e){
            AJS.tabs.change(AJS.${d}(this), e)
            e.preventDefault()
            e.stopImmediatePropagation();
        });
    });
</script>

 

Macro Name:
tab

Macro Title:
Tab

Description:
This macro is used with the Tab Group macro. Place one or more of these inside a Tab Group macro to create tabs on your page.

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 03/31/2022
## @param TabName:title=Tab Name|type=string|required=true|desc=Specify a name for this tab.
## @param TabID:title=Tab ID|type=string|required=false|desc=Specify a id for this tab. (optional)
## @param Active:title=Active|type=boolean|desc=Only one tab may be the active one. (optional)|default=false
 
##############################
## Create a unique id value ##
##############################
#set( $id=$action.dateFormatter.calendar.timeInMillis )

#if ( $paramActive == true )
    #set( $active = " active-pane" )
#else
    #set( $active = "" )
#end

#if ( $paramTabID && $paramTabID != "" )
    #set( $tabID = "tab_$paramTabID" )
#else
    #set( $tabID = "tab_$id" )
#end

<div class="tabs-pane$!active" id="$tabID" data-tab-name="$!paramTabName">
$!body
</div>

 

6 comments

Hi,

 

Thank you for this one.  It is very useful.

I would be great to have a repository with this and other existing user macros.  One option could be to have something similar to this space for JIRA Admin: https://jaus.atlassian.net/wiki/spaces/JAUS/overview 

Like # people like this

I've thought for a long time it would be nice to have a place where people could do this ... kinda like the Atlassian Marketplace but for user macros.

Like Nicolai Sibler likes this

Thanks @Davin Studer , wonderful job!

Could you please point out where to incease the width of the tab's titles when displayed vertically (or to word wrap the line)?

Sorry for bothering, but in German we just need some more space for our beloved word monstrosities ;-)

tabs.jpg

Like # people like this

This is actually using built-in Atlassian UI functionality. So, it would behave the same way with anything that uses their UI framework. A quick look at the CSS and it looks like this is the rule that is constraining the width. So, you would need to override that CSS rule.

.aui-tabs.vertical-tabs>.tabs-menu {
width: 11em;
}
Like # people like this

Hi @Nicolai Sibler

Were you able to get the vertical tab names to wrap?

Thanks,
Larry

Adding style="white-space: normal;" to the <strong> attribute within the <li><a href...> in the tab group macro worked for me.

<strong style="white-space: normal;">' + AJS.${d}(this).attr('data-tab-name') + '</strong></a></li>';

Annotation 2022-12-30 142009.png

Comment

Log in or Sign up to comment
TAGS

Atlassian Community Events