HTML and CSS Reference
In-Depth Information
padding: 3px 8px;
.js-tabs {
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.
Search WWH ::

Custom Search