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 (with processing message)

Input (with overlay window while processing)

Anchor (with confirmation, processing message, and overlay window while processing)

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

The Script

Generic script to support the Button features.

//Abstracted Methods for Button(s)
function buttonClick(requestingElement) {
    var processRequest = true;
    var isAjaxFormPost = (requestingElement.attr("class").indexOf("ajaxFormPost") >= 0);

    if (isAjaxFormPost) {
        //Ajax Form Post - Validation
        processRequest = isFormValid(requestingElement);
    }

    if (processRequest) {
        //Confirm Action
        if (isAttrDefined(requestingElement.attr("data-confirmActionMessage")) && requestingElement.attr("data-confirmActionMessage").length > 0) {
            processRequest = confirm(jsonValueCleanUp(requestingElement.attr("data-confirmActionMessage")));
        }
    }

    if (processRequest) {
        //Overlay Window
        if (requestingElement.attr("data-overlayWindowWhileProcessing") == "true") {
            $("#hdivLoadingOverlay").dialog("open");
            $("#hdivLoadingOverlay").dialog("moveToTop");
        }

        //Processing Message
        if (isAttrDefined(requestingElement.attr("data-processingMessage")) && requestingElement.attr("data-processingMessage").length > 0) {
            var divMessageElement = document.createElement("div");
            divMessageElement.id = requestingElement.attr("id") + "_processingMessage";
            divMessageElement.innerHTML = requestingElement.attr("data-processingMessage");
            requestingElement.after(divMessageElement);
            requestingElement.hide();
        }

        //Ajax Form Post - Call
        if (isAjaxFormPost) {
            postAjaxForm(requestingElement, false);
        }
    }

    return processRequest;
}

function buttonClickRequestComplete(requestingElement) {
    $("#hdivLoadingOverlay").dialog("close");
    $("#" + requestingElement.attr("id") + "_processingMessage").hide();
    requestingElement.show();
}

//Enable Button(s)
$(parentElementSelector + " .button").each(function () {
    $(this).click(function () {
        return buttonClick($(this));
    });
});

Script specific to these Button examples to simulate Ajax/DHTML logic calls.

function simulatedAjaxOrDhtmlCall1() {
    self.setTimeout("buttonClickRequestComplete($('#hbtnTest1'))", 2000);
}

function simulatedAjaxOrDhtmlCall2() {
    self.setTimeout("buttonClickRequestComplete($('#hbtnTest2'))", 2000);
}

function simulatedAjaxOrDhtmlCall3() {
    self.setTimeout("buttonClickRequestComplete($('#lbtnTest2'))", 2000);
} 

The CSS

 
/* General Buttons */
input.buttonStrong, a.buttonStrong, a.buttonStrong:link, a.buttonStrong:visited,
input.buttonNormal, a.buttonNormal, a.buttonNormal:link, a.buttonNormal:visited,
input.buttonWeak, a.buttonWeak, a.buttonWeak:link, a.buttonWeak:visited,
input.buttonDisabled, a.buttonDisabled, a.buttonDisabled:link, a.buttonDisabled:visited
{
     display:inline-block; margin:0px 0px 0px 0px; padding:1px 6px 2px 6px; border:0; text-decoration:none; text-align:left; white-space:nowrap; cursor:pointer; text-transform:lowercase;
}
a.buttonStrong, a.buttonStrong:link, a.buttonStrong:visited,
a.buttonNormal, a.buttonNormal:link, a.buttonNormal:visited,
a.buttonWeak, a.buttonWeak:link, a.buttonWeak:visited,
a.buttonDisabled, a.buttonDisabled:link, a.buttonDisabled:visited
{
     padding:2px 9px 2px 9px;
}
.ie9 input.buttonStrong, .ie9 input.buttonNormal, .ie9 input.buttonWeak, .ie9 input.buttonDisabled { padding:2px 9px 2px 9px; }
.ie8 input.buttonStrong, .ie8 input.buttonNormal, .ie8 input.buttonWeak, .ie8 input.buttonDisabled { padding:2px 9px 2px 9px; }
.ie7 input.buttonStrong, .ie7 input.buttonNormal, .ie7 input.buttonWeak, .ie7 input.buttonDisabled { padding:0px 0px 0px 0px; text-align:center; }
/* General Buttons : Hover */
input.buttonStrong:hover, a.buttonStrong:hover, a.buttonStrong:visited:hover,
input.buttonNormal:hover, a.buttonNormal:hover, a.buttonNormal:visited:hover,
input.buttonWeak:hover, a.buttonWeak:hover, a.buttonWeak:visited:hover,
input.buttonDisabled:hover, a.buttonDisabled:hover, a.buttonDisabled:visited:hover
{
    text-decoration:none;
}
/* Strong Button */
input.buttonStrong, a.buttonStrong, a.buttonStrong:link, a.buttonStrong:visited { background-color:#6D8F3A; color:#FFF; }
input.buttonStrong:hover, a.buttonStrong:hover, a.buttonStrong:visited:hover { color:#50692A; }
/* Normal Button */
input.buttonNormal, a.buttonNormal, a.buttonNormal:link, a.buttonNormal:visited { background-color:#8C857B; color:#FFF; }
input.buttonNormal:hover, a.buttonNormal:hover, a.buttonNormal:visited:hover { color:#403C35; }
/* Weak Button */
input.buttonWeak, a.buttonWeak, a.buttonWeak:link, a.buttonWeak:visited { background-color:#B8AFA2; color:#FFF; }
input.buttonWeak:hover, a.buttonWeak:hover, a.buttonWeak:visited:hover { color:#403C35; }
/* Disabled Button */
input.buttonDisabled, a.buttonDisabled, a.buttonDisabled:link, a.buttonDisabled:visited { background-color:#CCC; color:#FFF; cursor:text; }