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:

<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>

x-tab

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.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s