Recommend this page to a friend! |
Download .zip |
Info | Screenshots | View files (13) | Download .zip | Reputation | Support forum | Blog | Links |
Last Updated | Ratings | Unique User Downloads | Download Rankings | |||||
2011-05-18 (5 years ago) | Not enough user ratings | Total: 347 | All time: 101 This week: 22 |
Version | License | JavaScript version | Categories | |||
genie-alert 1.0 | GNU General Publi... | 2.0 | HTML |
Description | Author | |||||||||||||
This object can display alert messages similar to JavaScript alert windows. |
|
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> |
Screenshots | ||
Files |
File | Role | Description | ||
---|---|---|---|---|
images (8 files) | ||||
geniealert.inc.js | Class | GenieAlert class file | ||
LICENSE.txt | Lic. | LICENSE | ||
readme.txt | Doc. | Readme file | ||
sample.html | Example | Sample file for GenieAlert implementation | ||
style.css | Data | Css for the alert window |
Files | / | images |
File | Role | Description |
---|---|---|
alert.png | Icon | alert icon |
button.png | Icon | button background |
error.png | Icon | Error icon |
h-left.png | Icon | header-left |
h-middle.png | Icon | header-middle |
h-right.png | Icon | header-right |
info.png | Icon | Information icon |
trans.png | Icon | Background image for the alert window |
Version Control | Unique User Downloads | Download Rankings | |||||||||||||||
0% |
|
|
Applications that use this package |
If you know an application of this package, send a message to the author to add a link here.
Related pages |
Application URL Application host URL |
github GitHub Source URL |
Google Code Source at Google Code |