One thing I envy about more advanced programming languages is their heavy use of XML to set the properties of controls. This demo is my attempt to use jQuery’s XML processing capabilities to mimic similar behavior. In particular, this demo will display notifications of various types with some robust customization options all within a nicely formed XML file.

1. Giving our notifications some default styling

The boxes follow a familar color scheme to indicate what type of message it is. You can of course change these criteria in the CSS file, but as you will find later, most of these properties will be available to be changed in the XML notifications file when a new message is created. These are the default styles that are used when no styles are included in the XML notifications file.

CSS

/* Common Syles */
.jQN-warning-style, .jQN-success-style,
.jQN-caution-style, .jQN-information-style
  {
    position:relative;
    width:500px;
    margin-top:30px;
    padding:15px;
    padding-left:75px;
    padding-bottom:25px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  }

/* Warning box styles */
.jQN-warning-style
  {
    border:1px solid #999;
    color:#999;
    background-color:#ddd;
    background:#ddd url('../images/milky (117).png') no-repeat 15px 15px;
  }

/* Success box styles */
.jQN-success-style
  {
    border:1px solid #009E00;
    color:#009E00;
    background-color:#85F56D;
    background:#85F56D url('../images/milky (50).png') no-repeat 15px 15px;
  }

/* Caution box styles */
.jQN-caution-style
  {
    border:1px solid #B9BE86;
    color:#B9BE86;
    background-color:#FEEA98;
    background:#FEEA98 url('../images/milky (26).png') no-repeat 15px 15px;
  }

/* Information box styles */
.jQN-information-style
  {
    border:1px solid #6A64A5;
    color:#6A64A5;
    background-color:#C6D8EF;
    background:#C6D8EF url('../images/milky (66).png') no-repeat 15px 15px;
  }

/* Customize the look of boxes here */
.jQN-warning-style
  {
    border:1px solid #FF0000;
    color: #FF0000;
    background-color: #FFB0C3;
  }

2. Initializing the plug-in

After downloading the plug-in you need to reference either the included jQuery library or one of your own, the jQNotifications.js file, and the default styles CSS file

<!-- HTML -->

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jQuery/jquery-1.4.2.js">
<script type="text/javascript" src="jQuery/jQNotifications.js">
<script type="text/javascript">
  $(function(){

    // Load a specific notifications xml file (loads notifications.xml if not defined here)
    $("body").jQNotifications({xmlLoad: "notifications1"});

  });
</script>

3. Create and customize your notifications in the notifications.xml file

As the following XML indicates, there are four types of notifications you can group your messages into: warnings, successes, cautions, and informations. This gives you 4 default notification styles but each message is fully customizable regardless of what group the notification is placed. Here is a list of properties that can be changed on an individual notification message: custom class name [custom-name], styles [width, font-color, background-color, border-color, background-image, display(none)], the actual message

[/text]

, and which element the notification will appear after [placement]. **The notification will not appear unless the placement element is defined and it must be a valid class or id for an element in your html file. Placement will accept jQuery selectors minus the quotes. For example, .foo works as will .foo, #bar because these are valid jQuery selectors. Additionally, by default the injected notification will have 2 class names that are dependent on where the notification is placed in the XML file. Namely, if the notification is placed in the warnings block, the classes jQN-warning-style and jQN-warning-message-[number] will be added to the notification block. The [number] indicates the number of the notification in the warning block (e.g. the third notification will have the class jQN-warning-message-3). If a custom-name is indicated, in addition to those two classes, an additional class as you defined will be added to the notification block. The display(none) element is useful for AJAX style notifications where an event triggers the notification (e.g. a successful form submit).

<!-- XML -->

<?xml version="1.0" encoding="UTF-8"?>
-<messages>
    +<styles>
    -<warning>
      -<message>
         <custom-name>fooBar</custom-name>
        -<styles>
          <apply-style>custom</apply-style>
          <width>150px</width>
          <display>none</display>
        </styles>
        <text>Please enter a number from 0 - 100000000000</text>
        <placement>.bar</placement>
      </message>
      -<message>
        <text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</text>
        <placement>#foo</placement>
       </message>
    </warning>
    +<success>
    +<caution>
    +<information>
    +<custom>
</messages>

4. View and download the Demo

Please click the button to see a demo and also download the plugin.