Native AJAX Loading Overlays as HTML5 Web Components

I’ve just deployed my latest experiment related to the exploration of HTML5 Web Components I started lately. X-Overlay is a custom tag, with a bunch of handy methods, attributes, getters and setters that can be used to display loading overlays on any element during AJAX calls. Using it is easy as:

[sourcecode language=”html”]
<acidjs-xoverlay
    id="overlay-01"
    spinner="AcidJs.XOverlay/styles/images/loading-02.gif"
    parent=".ajax-updating-box-01"
    hidden>
</acidjs-xoverlay>

<acidjs-xoverlay
   id="overlay-02">
</acidjs-xoverlay>

<acidjs-xoverlay></acidjs-xoverlay>
[/sourcecode]

The <acidjs-xoverlay> Tag Attributes:

Any known HTML attribute (id, class, data-*, style) is supported, plus the component-specific:

• parent: the element (CSS selector, for instance body, #my-div, .my-class-name, etc.), which will be blocked when X-Overlay’s show() method is used. If no parent attribute is set, body will be used by default.
• spinner: Optional spinner image URL (default dimensions are 32 x 32 pixels and are set in the AcidJs.XOverlay/styles/XOverlay.css). The default URL is "AcidJs.XOverlay/styles/images/loading-02.gif"
• hidden: if attribute is set, the component will not be visible on the page and could be set to visible either by removeAttribute("hidden") or by using component’s show().

The <acidjs-xoverlay> Tag Methods, Getters and Setters:

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. as well as their jQuery or other libraries aliases), plus the component-specific:

• show(): to show the overlay, for example:
  jQuery:
  $("#overlay-1").get(0).show();
JavaScript:
  document.getElementById("overlay-1").show()
document.querySelector("#overlay-02").show()
• hide(): to hide the overlay, for example:
  jQuery:
  $("#overlay-1").get(0).hide();
JavaScript:
  document.getElementById("overlay-1").hide()
document.querySelector("#overlay-02").hide()
• destroy(): to fully remove the overlay from the DOM, for example:
  jQuery:
  $("#overlay-1").get(0).destroy()
JavaScript:
  document.getElementById("overlay-1").destroy()
document.querySelector("#overlay-02").destroy()

Make sure you don’t miss the demo or some of my other HTML5 Web Components, CSS3 or JavaScriptexperiments!