# jQuery MsgBox v1.3

MsgBox is compatible and fully tested with Safari 4+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

## Setup

Upload every files of MsgBox to your server (images, css and javascript) and add the following lines between the HEAD tag on your page:

    <script type="text/javascript" src="javascript/jquery.min.js"></script>

    <script type="text/javascript" src="javascript/msgbox/jquery.msgbox.js"></script>
    <link rel="stylesheet" type="text/css" href="javascript/msgbox/jquery.msgbox.css" />

## Documentation

    $.msgbox(message, [options], [callback]);

#### message

The message can either be a plain text or an html string.

Example:

    $.msgbox("Your Message.");

#### options

- type: (text)
  - alert
  - info
  - confirm
  - prompt
  - error

Example:

    $.msgbox("Your Message.", {type:"error"});

- buttons: (array)
  - {type: "submit", value: "Accept"}
  - {type: "cancel", value: "Cancel"}

Example:

    $.msgbox("Your Message.", {
      type:"alert",
      buttons: [
        {type: "submit", value: "OK"}
      ]
    });

Another example:

    $.msgbox("Your Message.", {
      type: "confirm",
      buttons: [
        {type: "submit", value: "Yes"},
        {type: "cancel", value: "No"}
      ]
    });

- inputs: (array)
  - {type: "text", value: "Default Value", label: "YourLabel", required: false }
  - {type: "password", value: "", label: "YourLabel:", required: false }

Example:

    $.msgbox("Insert your name below:", {
      type: "prompt",
      inputs: [
        {type: "text", value: "", label: "Name:", required: true }
      ]
    });

#### callback

A function to be called when the msgbox is submitted and removed. Returns the value of the button pressed.

    function(result, [ result2 ], [ resultN ]) {}

Example:

    $.msgbox("Are you sure?", {
      type: "confirm",
      buttons: [
        {type: "submit", value: "Yes"},
        {type: "cancel", value: "No"}
      ]
    }, function(result) {
      if (result) {
        alert('You have pressed Yes');
      }
    });

Another example:

    $.msgbox("Example data", {
      type: "prompt",
      inputs: [
        {type: 'text', value: '1', label: 'Text1'},
        {type: 'text', value: '2', label: 'Text2'},
        {type: 'text', value: '3', label: 'Text3'},
        {type: 'text', value: '4', label: 'Text4'},
        {type: 'text', value: '5', label: 'Text5'}
      ]
    }, function(e1, e2, e3, e4, e5) {
      if (e1) { // user have pressed Accept
        alert('Text4: ' + e4);
      }
    });

## Examples

#### Example 1

To simply call MsgBox like you would a regular alert command:

    $.msgbox("The selection includes process white objects. Overprinting such objects is only useful in combination with transparency effects.");

#### Example 2

To add a couple extra buttons with different values:

    $.msgbox("Are you sure that you want to permanently delete the selected element?", {
      type: "confirm",
      buttons : [
        {type: "submit", value: "Yes"},
        {type: "submit", value: "No"},
        {type: "cancel", value: "Cancel"}
      ]
    }, function(result) {
      $("#result2").text(result);
    });

    Result:

#### Example 3

    $.msgbox("jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.", {type: "info"});

#### Example 4

    $.msgbox("An error 1053 ocurred while perfoming this service operation on the MySql Server service.", {type: "error"});

#### Example 5

    $.msgbox("Insert your name below:", {
      type: "prompt"
    }, function(result) {
      if (result) {
        alert("Hello " + result);
      }
    });

## Advanced Examples

#### Advanced Example 1

    $("#advancedexample1").click(function() {
      $.msgbox("<p>In order to process your request you must provide the following:</p>", {
        type    : "prompt",
        inputs  : [
          {type: "text",     label: "Insert your Name:", value: "George", required: true},
          {type: "password", label: "Insert your Password:", required: true}
        ],
        buttons : [
          {type: "submit", value: "OK"},
          {type: "cancel", value: "Exit"}
        ]
      }, function(name, password) {
        if (name) {
          $.msgbox("Hello <strong>"+name+"</strong>, your password is <strong>"+password+"</strong>.", {type: "info"});
        } else {
          $.msgbox("Bye!", {type: "info"});
        }
      });
    });