Page Operations
Browse Space
The jQuery UI Tabs widget is a great example of how a widget's API can encourage progressive enhancement from the start. While there's still a lot of room for growth in this widget, I really like how its author, Klaus Hartl, has built the widget with a markup-driven approach. In my mind, this is much more successful than a JSON-based approach because it uses HTML markup as both a way of specifying data for the widget and as a source of graceful degradation.
<div id="tabsAndPanels"> <!-- The tabs themselves are marked up here as a simple unordered list with anchors for each tab title. --> <ul id="tabs"> <li id="catsTab"><a href="#catsPanel" tabindex="-1"><span>Cats</span></a></li> <li id="dogsTab"><a href="#dogsPanel" tabindex="-1"><span>Dogs</span></a></li> <li id="hamstersTab"><a href="#hamstersPanel" tabindex="-1"><span>Hamsters</span></a></li> <li id="alligatorsTab"><a href="#alligatorsPanel" tabindex="-1"><span>Alligators</span></a></li> </ul> <!-- The panels associated with each tab are marked up as divs --> <div id="panels"> <div id="catsPanel"> Cats meow. </div> <div id="dogsPanel"> Dogs bark. </div> <div id="hamstersPanel"> Hamsters wheel. </div> <div id="alligatorsPanel"> Alligators bite. </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#example > ul").tabs(); }); </script>