Modern Web Development: Understanding domains, technologies, and user experience (Developer Reference) by Dino Esposito

Author:Dino Esposito
Language: eng
Format: mobi, epub
Publisher: Pearson Education
Published: 2016-02-21T22:00:00+00:00

* * *

Tab strips

Tabs are a collection of views displayed one at a time with a top menu to allow selection. Bootstrap supports a few variations of tabs, including the classic tab strip and navigation pills. The required HTML template is similar.

Let’s see classic tab strips first:

Click here to view code image

<div class="tabbable">

<ul class="nav nav-tabs" id="myTabStrip">

<li><a class="btn btn-primary" href="#profile" data-toggle="tab">Profile</a></li>

<li><a class="btn btn-primary" href="#preferences" data-toggle="tab">Preferences</a></li>

<li><a class="btn btn-primary" href="#friends" data-toggle="tab">Friends</a></li>

</ul>

</div>

A first DIV wrapping a UL element defines the list of clickable tabs. Any time the user clicks any tab, the current content is hidden so that the content related to the clicked tab can be displayed. The href attribute of the LI element indicates the path to the child DIV that stores the tab content. The data-toggle attribute set to tab is also crucial because it instructs the component to act as a tab and hide and show content on demand.

Tab content follows in the same page, one after another. The visibility of these DIVs is automatically managed by the script code that comes with the tab-strip component:

Click here to view code image

<div class="tab-content">

<div id="profile" class="tab-pane">

...

</div>

<div id="preferences" class="tab-pane">

...

</div>

<div id="friends" class="tab-pane">

...

</div>

</div>

It’s important to specify the tab-content and tab-pane CSS classes in the content DIV elements for the tabs. The tab strip gets its own styles from Bootstrap defaults. From the outside, you can select the colors of the tabs using button styles such as btn-primary, btn-danger, and the like. As usual, though, the default Bootstrap styles can be overridden in the application’s or single page’s scope. The tab that’s initially selected is indicated via the active class.

An interesting feature you might want to consider is adding a JavaScript call to remove the outline that typically decorates any clickable area after the click. Here’s the call you need to add to the LI elements of the tab strip:

onclick="this.blur()"

A tab strip renders horizontally, one tab after the next. Another slightly different view is navigation pills. In this case, the text of tabs is rendered without borders and a separator and only the selected pill has some padding and different colors. The behavior is the same; it’s just the aesthetics are different:

Click here to view code image

<ul class="nav nav-pills" role="tablist">

<li class="active">

<a class="btn btn-primary" href="#profile" data-toggle="tab">Profile</a>

</li>

<li> ... </li>

<li> ... </li>

</ul>

The pills also can be stacked vertically. You achieve that by adding the style nav-stacked.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.