HTML and CSS Reference
In-Depth Information
<div class="section">
<h2><a name="news">Latest news</a></h2>
<p>Latest news contents [...]</p>
</div>
<div class="section">
<h2><a name="sports">Sports</a></h2>
<p>Sports contents [...]</p>
</div>
<div class="section">
<h2><a name="economy">Economy</a></h2>
<p>Economy contents [...]</p>
</div>
</div>
Note that the containing element has the class name
tabbed-panel
. This
is all we need to know. The script built on top of this structure could simply look
for all elements with the class name
tabs
that contain an ordered list (navigation)
and sub-elements with class name
section
. Once this structure is identified, the
script can convert the structure into a tabbed panels widget, so long as the required
functionality can be inferred to work.
In the basic version we could possibly leave out the navigational markup, and
add it in via script. However, using anchors as a “jump to” menu can easily make
sense in a non-scripted version, and it frees us from too much script-based markup
building.
This sort of markup also lends itself to easier styling. The default styles for
div.tabbed-panel
will target the basic solution, aimed at environments in
which the panels are presented as a series of vertically stacked text boxes. The
script that converts the structure into tabs and panels can add a single class name
to the containing element to trigger a separate view intended for the script-driven
tabs and panels look. This way the script simply enables the functionality, and CSS
is still in complete control of the visual presentation.
9.2.3 TDD and Progressive Enhancement
Incidentally, the progressive enhancement style of user interface coding goes well
with test-driven development. By cleanly separating structure, layout, and behavior
we can keep the interface between script and markup at a minimum, enabling us
to unit test most of the logic without requiring the DOM. Enabling TDD creates
a positive circle as code written guided by tests tends to focus even more strongly
on a clean separation of concerns. The resulting decoupling allows for better code
reuse and faster tests.
