search

LukeMurphey / splunk-dashboard-tabs-example

An example of the use of tabs on a Splunk dashboard. #splunk
MIT License
21 stars 11 forks source link

Sub Tabs #4

Open fredclown opened 1 year ago

fredclown commented 1 year ago

This is pretty awesome. I love being able to put tabs on a dashboard. It would be handy if this could support sub tabs. What I mean by that is that if you select a tab you get a set of sub tabs that show up that can be linked to their own rows. I thought maybe I could just do something like this. It kinda works, but not really. The highlighting doesn't work right and the sub_tab section starts off visible.

<row id="tabs">
    <panel>
        <html>
            <ul id="tabs" class="nav nav-tabs">
                <li class="active"><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row1">Tab 1</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row2">Tab 2</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row3">Tab 3</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row4">Tab 4</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="sub_tabs,row5_1,row5_2">Tab 5</a></li>
            </ul>
        </html>
    </panel>
</row>
<row id="sub_tabs">
    <panel>
        <html>
            <ul id="tabs" class="nav nav-tabs">
                <li class="active"><a href="#" class="toggle-tab" data-toggle="tab" data-elements="sub_tabs,row5_1">Tab 5_1</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="sub_tabs,row5_2">Tab 5_2</a></li>
            </ul>
        </html>
    </panel>
</row>
fredclown commented 1 year ago

Maybe a good way to do this would be to add another attribute to the tabs called data-sub-tabs. Like this ...

<row id="tabs">
    <panel>
        <html>
            <ul id="tabs" class="nav nav-tabs">
                <li class="active"><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row1">Tab 1</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row2">Tab 2</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row3">Tab 3</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row4">Tab 4</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row5" data-sub-tabs="sub_tabs">Tab 5</a></li>
            </ul>
        </html>
    </panel>
</row>
...
<row id="row5">
...
</row>
<row id="sub_tabs">
    <panel>
        <html>
            <ul id="tabs" class="nav nav-tabs">
                <li class="active"><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row6">Tab 6</a></li>
                <li><a href="#" class="toggle-tab" data-toggle="tab" data-elements="row7">Tab 7</a></li>
            </ul>
        </html>
    </panel>
</row>
<row id="row6">
...
</row>
<row id="row7">
...
</row>