Login   Register  
Icontem

File: readme.txt

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Prakash Mohankumar  >  Genie Alert  >  readme.txt  >  Download  
File: readme.txt
Role: Documentation
Content type: text/plain
Description: Readme file
Class: Genie Alert
Customized Javascript Alert
Author: By
Last change:
Date: 2011-05-02 22:38
Size: 3,381 bytes
 

Contents

Class file image Download
The JavaScript Source at https://github.com/prakashm88/geniealert and http://code.google.com/p/geniealert/
Created by: Prakash Mohankumar | http://itechgenie.com/ 

GenieAlert - Customized Javascript Alert
This product is distributed under the GNU General Public License Version 2 (License.txt)
Release date: 27th March 2011

GenieAlert is a customized Alert alternated for the javascript alert box. 

The GenieAlert provides the features to add custom buttons and functions to be called upon click of each. The Title and the alert icon to be disaplyed can also be configured as per the user need. 

Note: Note the default alert box of the javascript will be completely overridden by this utility.

USAGE:

1. Include the geniealert.inc.js and style.css in the header.
	<script type="text/javascript" src="geniealert.inc.js" />
	<link href="style.css" rel="stylesheet" type="text/css" />
2. Place all the images in the "images" folder.
3. Arguments for the customized alert, Alert Message, Array of Button names, Array of function names (with the arguments if necessary), Title for the alert window, URL for the image to be show in the alert window.
4. On Calling the default show method without arguments the alert window with default title as "Alert!" and an "information" icon will be shown.
5. Create a Array of Text to be shown in the Alert Box, Create Array of function names to be called when the corresponding buttons are clciked, a Title for the Alert and the URl of the image to be shown inside the alertbox. (Make sure the image is 32px X 32px).
6. Call the function as follows. 

<script type="text/javascript" >

// ARGS: 
// title - Title to be shows in the alert window.
// buttonLabels - Array of Buttons labels to be shown in the Alert Box (accepts null).
// buttonFunctions - Array of Function names to be called when the corresponding buttons are clicked  (accepts null).
// image - URL for the image to be shown insode the alert box (accepts null).

// METHODS:
// show(String) - Fires the GenieAlert showing the Alert window in the screen. This will disable all the other items in the page and enabling only the buttons in the alert window.

// Example: 

// Create an instance of the GenieAlert. This can be done inside a function to retain the scope of the alert window.
var genieAlert = new GenieAlert();

function YourFunctionName()
{

genieAlert.title = "Sample Alert Box" ;  // Title for the Alert window.
genieAlert.buttonLabels = ["Yes", "No", "Cancel"] ;  // Array of Button Labels to be shown in the alert window.
genieAlert.buttonFunctions = ["YesFunction()", "NoFunction()", "CancelFunction()"] ;  // Array of function names to be called while respective buttons (Buttons labels in the same index of 'buttonLabels') are clicked.
genieAlert.image = "images/alert.png"  // URL of the image location to be shown in the Alert window.
genieAlert.show("Click on the following buttons to call the corresponding methods.");  // fire the alert window with the message,

}

function YesFunction()
{
    // Your Code here 
}

function NoFunction()
{
    // Your Code here 
}

function CancelFunction()
{
   // Your Code here 
}

7. Pressing Escape key will close the Alert window without firing any further actions.

// Note: Older browser will see standard alerts boxes only.

</script>