Example of jQuery UI Tabs Progressive Enhancement

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>