HTML and CSS Reference
In-Depth Information
padding: 3px 8px;
}
.js-tabs a.active-tab {
background: #fff;
border-bottom-color: #fff;
color: #000;
text-decoration: none;
}
All the style rules are prefixed with “.js-tabs”, which means that they will only
take effect if the script in Listing 9.10 completes successfully. Thus, we have a nice
tabbed panel in browsers that support it and fall back to inline bookmarks and
vertically presented panels of text in unsupporting browsers.
Implementation of the unobtrusive tabs might strike you as a bit verbose and
it is not perfect. It is, however, a good start—something to build on. For instance,
rather than coding the panel handling inline as we just did, we could create a
tabbedPanel
object to handle everything. Its
create
method could receive the
outer
div
element as argument and set up a
tabController
and offer something
like the
getPanel
function as a method. It could also improve the current solution
in many ways, for example, by checking that the tabs do not activate panels outside
the root element.
By implementing the
tabController
separately, it can easily be used for
similar, yet different cases. One such example could be building a tabbed panel
widget in which the links referenced external URLs. The
onTabChange
callback
could in this case be used to fetch the external pages using
XMLHttpRequest
.By
design, this tabbed panel would fall back to a simple list of links just like the panel
we just built.
Because the original unobtrusive example used the jQuery library, we could
of course have done so here as well. By using it where appropriate, we'd end up
shaving off quite a few lines of code. However, although the script would end up
shorter, it would come with an additional 23kB (minimum) of library code. The
unobtrusive tab controller we just built weigh in at less than 2kB, have no external
dependencies, and work in more browsers.
As a final note, I want to show you a compact idiomatic jQuery solution as
well. Listing 9.13 shows the tabbed panel implemented in about 20 lines of (heavily
wrapped) code. Note that this solution does not check markup before enabling the
panel, and cannot be reused for other similar problems in a meaningful way.
