Native AJAX Loading Overlays as HTML5 Web Components

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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]

x-overlay

The <acidjs-xoverlay> Tag Attributes:

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

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:

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

Categories and Tags
Links

© 2006 - 2018 Martin Ivanov