Add a dependency-free JavaScript TabPanel control with Wijmo

We recently added a TabPanel control to Wijmo’s nav module, which also includes our TreeView control. The TabPanel control is used in a lot of applications (including most of our “Intro” samples). It's been on our roadmap for quite some time, but we kept postponing it because it's so common that it's included in many layout frameworks including Bootstrap, Material Design Lite, and others.

Using the Bootstrap TabPanel adds overhead to apps

Using Bootstrap’s Tab control is easy, but it introduces dependencies on bootstrap.js and jQuery. That adds about 50k of code to your apps and the usual versioning challenges. In addition, you must add some code to invalidate hosted Wijmo controls when tabs become visible.

The new TabPanel control allows us to remove the dependencies on bootstrap.js and jQuery from all our “Intro” samples and simplifies their code and markup.

Here’s a simple example. Our TreeViewIntro sample has several topics with tabs that show HTML, JavaScript, and CSS tabs. Using Bootstrap tabs, the markup used to look like this:

<div>
    <ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#gsHtml" role="tab" data-toggle="tab">HTML</a>
        </li>
        <li>
            <a href="#gsJs" role="tab" data-toggle="tab">JS</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active pane-content" id="gsHtml">
            <!-- HTML Markup -->
        </div>
        <div class="tab-pane pane-content" id="gsJs">
            // JavaScript code
        </div>
    </div>
</div>

The tab div contains two elements: an unordered list (ul) with the tab headers, and a div containing the tab panes. These elements are linked via IDs and require non-trivial markup to specify class names and ARIA attributes. Keeping all the IDs unique and synchronized throughout the application can be challenging, and mistakes are not always easy to spot. Adding or reorganizing the tabs requires care, because the tab headers and the content are hosted in different parts of the document.

The result looks like this:

Wijmo TabPanel simplifies markup

Using the new Wijmo TabPanel, the markup becomes a lot simpler:

<div class="source-tab">
    <div>
        <a>HTML</a>
        <div>
            <!-- HTML Markup -->
        </div>
    </div>
    <div>
        <a>JS</a>
        <div>
            // JavaScript code
        </div>
    </div>
</div>

The main TabPanel element contains one child for each tab pane. The tab panes contain exactly two children: the tab header and the corresponding pane. You don’t have to add IDs or ARIA attributes to the child elements. Adding or reorganizing tabs is easier since they're self-contained units.

Best of all, if any of the tabs contain other Wijmo controls, they'll automatically refresh when you switch tabs. No extra code is needed.

And, of course, using the TabPanel control allows us to remove the bootstrap.js and jQuery dependencies from the app.

The result looks like this:

To learn more about the new TabPanel control, please see our TabPanelIntro sample. To learn more about the TreeView control that is also included in the wijmo.nav module, please see the TreeViewIntro sample. To see examples using both controls, please see the LearnWijmo sample.

Get Wijmo 2018 v1 Release now