Button

As part of a new UI library, I have created a Button feature in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Button supports the following features:

• Fully integrates with the UI Library - Ajax Form feature.
• Option to confirm the action before sending a request.
• Option to hide the button while the request is being processed and display a message in it's place.
• Option to overlay the entire window while the request is being processed.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Simple Implementation

The Demo

Input (type=submit)

Input (type=button)

Anchor (LinkButton)

The Markup

Just some basic button element options (<input type="button">, <input type="submit">, <a>, etc.), with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can implement the Button by simply setting the Button element's class attribute to "button" (or "ajaxFormButton" if using Ajax Form functionality), and setting the desired optional custom data attributes.

That sounds like a DRY solution to me (see UI Manifesto).

<input id="hbtnTest1" type="submit" class="button buttonStrong" value="Add Item"
    data-confirmActionMessage=""
    data-processingMessage="Adding..."
    data-overlayWindowWhileProcessing="false" /> 
<h3>Input (type=button)</h3>
<input id="hbtnTest2" type="button" class="button buttonStrong" value="Add Item"
    data-confirmActionMessage=""
    data-processingMessage=""
    data-overlayWindowWhileProcessing="true"
    onclick="simulatedAjaxOrDhtmlCall1()" /> 
<h3>Anchor (LinkButton)</h3>
<a id="lbtnTest2" class="button buttonStrong"
    data-confirmActionMessage="Are you sure?"
    data-processingMessage="Adding..."
    data-overlayWindowWhileProcessing="true"
    onclick="simulatedAjaxOrDhtmlCall2()">Add Item</a>

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the markup, CSS, and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)
• UI Library - Window
  (with supporting jQuery UI)