X-Tabs – HTML5 Web Component Built with Mozilla X-Tags

Last night I introduced a new “html5 web components” category on my HTML5, CSS3 and JavaScript Experiments and Insight Website, so now all of the examples, which deal with this new and amazing technology are separated from the CSS and the JavaScript demos. Apart from that, I released a new component, based on Mozilla’s X-Tag and utilizing the JavaScript-less tabstrip solution I blogged about a sometime ago.

The component is called X-Tabs and allows declarative creation of fully functional tabs without any JavaScript:

[sourcecode language=”xml”]
<acidjs-xtabs width="100%" height="200" selectedtab="0" name="my-x-tab-01">
    <acidjs-xtabs-pane label="Home" hint="Go to our homepage">
        <h3>Home</h3>
        <p>Lorem ipsum.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="About Us" hint="More info about us">
        <h3>About Us</h3>
        <p>Sed ut perspiciatis?</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Downloads" hint="Visit our downloads section">
        <h3>Downloads</h3>
        <p>At vero eos et accusamus.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Contact Us" hint="Give us a shout">
        <h3>Contact Us</h3>
        <p>Howdy?</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Disabled Tab" hint="Give us a shout" enabled="false">
        <h3>Disabled Tab</h3>
        <p>Just a disabled tab.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Yet Another Tab" hint="And Yet Another Tab">
        <h3>Disabled Tab</h3>
        <p>Lorem ipsum dolor sit amet.</p>
    </acidjs-xtabs-pane>
</acidjs-xtabs>
[/sourcecode]

Have fun with the demo and feel free to modify and use the source code. If you like what I’m doing, follow me on Twitter or check my other posts about HTML5 Web Components, CSS3 or JavaScript.