How to make a tabbed widget

How to make a tabbed widget

DL6

Well-known member
#1
DL6 submitted a new resource:

How to make a Widget with tabs - This guide show you how to make a widget with tabs with more widgets inside

In this guide i show you how to make a widget with tabs.
First you need to configure the widgets you want in tabs without position (Write down the widgets keys)
Now create a widget html and in the template put something like this
Rich (BB code):
<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a...
Read more about this resource...
 

Mr Lucky

Well-known member
#5
I'm aware this is unmaintained, but if somebody could help with a small issue that would be great.

I have made a tabbed widget to show
in tab 1 = members online
in tab 2 = statistics

Code:
<div class="block">
            <div class="block-container">
                <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist"><span class="hScroller-scroll"><a href="/online/" class="tabs-tab is-active" role="tab" aria-controls="forum_overview_members_online">Members Online</a><a href="" class="tabs-tab" id="forum_overview_forum_statistics" role="tab">Statisiics</a></span>
                </h2>
                <ul class="tabPanes widget--tab">
                    <li class="is-active" role="tabpanel" id="forum_overview_members_online">
                        <xf:widget key="forum_overview_members_online" /></li>
                    <li role="tabpanel" aria-labelledby="forum_overview_forum_statistics">
                        <xf:widget key="forum_overview_forum_statistics" /></li>
                </ul>
            </div>
        </div>
(CSS in extra.less)

It's all working fine, except that members online is empty when viewed by unregistered/not logged in.

Can anyone please help?
 

DL6

Well-known member
#6
I'm aware this is unmaintained, but if somebody could help with a small issue that would be great.

I have made a tabbed widget to show
in tab 1 = members online
in tab 2 = statistics

Code:
<div class="block">
            <div class="block-container">
                <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist"><span class="hScroller-scroll"><a href="/online/" class="tabs-tab is-active" role="tab" aria-controls="forum_overview_members_online">Members Online</a><a href="" class="tabs-tab" id="forum_overview_forum_statistics" role="tab">Statisiics</a></span>
                </h2>
                <ul class="tabPanes widget--tab">
                    <li class="is-active" role="tabpanel" id="forum_overview_members_online">
                        <xf:widget key="forum_overview_members_online" /></li>
                    <li role="tabpanel" aria-labelledby="forum_overview_forum_statistics">
                        <xf:widget key="forum_overview_forum_statistics" /></li>
                </ul>
            </div>
        </div>
(CSS in extra.less)

It's all working fine, except that members online is empty when viewed by unregistered/not logged in.

Can anyone please help?
The guests have permissions to see the member list?
I recommend changing the template with something like this
Code:
<xf:if is="$xf.visitor.canViewMemberList()">
    <div class="block">
        <div class="block-container">
            <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist"><span class="hScroller-scroll"><a href="/online/" class="tabs-tab is-active" role="tab" aria-controls="forum_overview_members_online">Members Online</a><a href="" class="tabs-tab" id="forum_overview_forum_statistics" role="tab">Statisiics</a></span>
            </h2>
            <ul class="tabPanes widget--tab">
                <li class="is-active" role="tabpanel" id="forum_overview_members_online">
                        <xf:widget key="forum_overview_members_online" /></li>
                <li role="tabpanel" aria-labelledby="forum_overview_forum_statistics">
                    <xf:widget key="forum_overview_forum_statistics" /></li>
            </ul>
        </div>
    </div>
<xf:else />
    <xf:widget key="forum_overview_forum_statistics" />
</xf:if>
 

Mr Lucky

Well-known member
#7
Thanks, but that just removes the member list totally for guests.

What I want is for guests to see the member list when the widget is tabbed.

Guests see the member list when it is a normal widget (as they do on this site) it's just that just when I make it a tab, then it shows as empty to guests, neither staff nor members.
 

DL6

Well-known member
#8
Is a permissions issue, i try to see members online as guest in your site and i can't see.
1514997517755.png
The widget works with the same permission, you can see in the file src\XF\Widget\MembersOnline.php
1514997693052.png
 
#10
Hi guy,
I want to build multi widgets in a block like this, but use multi dropdown to select and show widgets content instead tabs.
How can i do?
Thanks
 
#12
I'm a lttle bit confused.
I create a widget html and in the template put the code.
But what i have to do to display it at Forum Overview?
 
#13
I'm a lttle bit confused.
I create a widget html and in the template put the code.
But what i have to do to display it at Forum Overview?
Affect the position "Forum view" to your html widget. But no position to the widgets you want to put in tabs cause they are sticked to the html
 

Creaky

Active member
#16
Stupid question time.

I'm going to use to show Most Replied, Most Liked & Most Viewed. How do you find the links needed for each tab?
 

DL6

Well-known member
#17
Stupid question time.

I'm going to use to show Most Replied, Most Liked & Most Viewed. How do you find the links needed for each tab?
If the content does not have a page dedicated to that content, you can change this part
Rich (BB code):
<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="url to the content"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="widget key 1">Tab title 1</a>
                 <a href="url to the content"
                        class="tabs-tab"
                        id="widget key 2"
                        role="tab">Tab title 2</a>
                 <a href="url to the content"
                        class="tabs-tab"
                        id="widget key 3"
                        role="tab">Tab title 3</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="widget key 1">
                 <xf:widget key="widget key 1" />
             </li> 
             <li role="tabpanel" aria-labelledby="widget key 2">
                 <xf:widget key="widget key 2" />
             </li>
             <li role="tabpanel" aria-labelledby="widget key 3">
                 <xf:widget key="widget key 3" />
             </li>
         </ul>
     </div>
</div>
With this
Code:
                 <span class="tabs-tab is-active"
                        role="tab"
                        aria-controls="widget key 1">Tab title 1</span>
                 <span
                        class="tabs-tab"
                        id="widget key 2"
                        role="tab">Tab title 2</span>
                 <span  class="tabs-tab"
                        id="widget key 3"
                        role="tab">Tab title 3</span>
 

imno007

Well-known member
#18
@DL6
I notice in your demo that the widget titles aren't displayed beneath the tab titles, and I'm wondering how this is controlled? I used your example, creating tabs for new threads, new posts, and profile posts, and on half of my styles (the UI.X ones) the widget titles are shown beneath all three tabs. On the rest, including the Xenforo style, it only shows beneath Latest threads, like so:



Is there a way to suppress this, maybe with extra.less, on all tabs for all styles?
 
Top