X-NotificationsBar: HTML5 Web Component

Just finished my new endeavour in the amazing world of HTML5 Web Components, called X-NotificationsBar and based on an earlier CSS3-only driven solution. Here’s how to use it, after you check the demo and eventually download it:

[sourcecode language=”xml”]
<acidjs-x-notifications-bar bgcolor="#016fba" expanded="true" message="random" loop="5000">
    <acidjs-x-notifications-bar-message>
        HTML5 Web Components enable truly encapsulated and reusable components for the web.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        You can browse the other examples of HTML5 Web Components on <a href="http://experiments.wemakesites.net/html5-web-components.html" target="_blank">this page</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        More info regarding this exciting new technology:
        <a href="http://webcomponents.org/" target="_blank">WebComponents.org</a>,
        <a href="http://polymer-project.org/" target="_blank">Google Polymer</a>,
        <a href="http://x-tags.org/" target="_blank">Mozilla X-Tag</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        <p>If you like this solution, you can also check my
        <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>,
        <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>,
        <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>,
        <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
         follow me on <a href="https://twitter.com/wemakesitesnet" target="_blank">Twitter</a>
         or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;amp;hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        If you prefer a pure CSS3 solution of this example, you will
        <a href="http://experiments.wemakesites.net/css3-hello-bar.html" target="_blank">find it here</a>.
    </acidjs-x-notifications-bar-message>
</acidjs-x-notifications-bar>
[/sourcecode]

The <acidjs-x-notifications-bar></acidjs-x-notifications-bar> Tag Attributes:

• bgcolor – Optional background color. Default value: “#e34c26”.
• expanded – Boolean, optional. Default: “true”.
• message – Zero-based index or “random”. “0” means that the content of the first <acidjs-x-notifications-bar-message> will be set. If “random” is set, a random message will be displayed. Default: “0”
• loop – Optional timeout in milliseconds for looping messages. Default null.

The <acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message> Tag:

It should be used to set messages to the notifications bar, one message at a time. The tag does not support any attributes and accepts any HTML.

Have fun and enjoy the weekend!