Apprise

An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality. Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

Demo

Download

Apprise is tiny. Like, really tiny. 5kb in total for the full and 3kb for the minified version.

Implementing

To function properly, Apprise requires the javascript framework jQuery. One of the easiest ways to add jQuery is to include the hosted version by adding the following line to your head section.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

Don't forget to add the Apprise source files to the head section as well.

<script type="text/javascript" src="js/apprise-1.5.full.js"></script>
<link rel="stylesheet" href="css/apprise.css" type="text/css" />

Now that everything is in it's place, you can call the apprise() function anywhere you would have typically called the alert() function.

<a href="http://google.com" onclick="apprise('You are now leaving our site');">Leave the site</a>

Callbacks work similarly to the standard confirm function, returning true if "Ok" or "Yes" is clicked and false if "Cancel" or "No" is clicked. If the input is used, only the user inputted text or false will be returned.

<script>
$(document).ready(function()
  {
  apprise('Ready to begin?', {'verify':true}, function(r)
    {
    if(r)
        {
        // user clicked 'Yes'
        ...
        }
    else
        {
        // user clicked 'No'
        ...
        }
    });
  });
</script>

Make sure you pass in altered variables to get the effect you desire. By default, the apprise box will show only an "Ok" button along with your message. The confirm option adds the "Cancel" button, whereas the verify option uses "Yes" and "No" buttons instead. You can also edit the default text for your buttons, or send in new values with each call to Apprise. Input is just that, an input box. Animate is a simple slide down effect, and can be set to true or the desired speed, with the default being 400.

{
'confirm' : false, // Ok and Cancel buttons
'verify' : false, // Yes and No buttons
'input' : false, // Text input (can be true or string for default text)
'animate' : false, // Groovy animation (can true or number, default is 400)
'textOk' : 'Ok', // Ok button default text
'textCancel' : 'Cancel', // Cancel button default text
'textYes' : 'Yes', // Yes button default text
'textNo' : 'No' // No button default text
}

Customization

The stylesheet (apprise.css) is the key everything; simply edit the styles declared within to adjust the look and feel. Because this is actually injecting elements into the DOM, you want to make sure you close all tags as these can cause apprise to fail and give you an unnecessary headache.

The interface is supposed to resemble that of an OS but appear web-ish. I do plan on releasing some more themes, but that will depend on whether or not anyone actually downloads and uses Apprise. I tried to keep everything as simple as possible, with only 5 (at most) elements being injected. The downside of that is the style is limited to those few elements.

Discussion