Quantcast
Channel: Amit Yadav » Adobe AIR
Viewing all articles
Browse latest Browse all 2

jQuery Custom Alertbox Plugin

$
0
0

I was working on an app using Adobe AIR platform. At one stage i was at a point where i needed an alert system that i can customize according to my needs. I searched for some of the plugins that were very good but accidently i bumped into a link where it talks about how to create a jQuery plugin, so i thought of creating my own which i can customize according to my needs.
I am providing the code here so that you can use this code and customize it according to your need.

//PLUGIN FOR THE NEW ALERT BOX
 (function($){  
	 $.fn.extend({   
		 customAlert: function(options) {
			var htmlStr = '<div id="amitOverlay"></div><div id="alertMsgDiv"><div id="aClose">[X]</div><div id="aMessage"></div></div>';
			var defaults = {   
				 bgColor: '#000',  
				 opacity: '0.6',  
				 message: 'This is a test message from the plugin',  
			 };  
			
			var options = $.extend(defaults, options);  
			$("body").append(htmlStr);
			$("#alertMsgDiv").css({'display': 'block', 'width': '100px'});
			$("#amitOverlay").css({'display': 'block', 'top': '0px', 'left': '0px', 'width': $(this).width() + "px", 'height': $(this).height() + "px", 'background-color': options.bgColor, 'opacity': options.opacity});	

			$("#aMessage").html(options.message);
			$("#alertMsgDiv").animate({width: 300}, 300);

			$("#amitOverlay, #aClose").click(function(){	
				$("#alertMsgDiv").remove();
				$("#amitOverlay").remove();									
			});
		 }  
	 });  
 })(jQuery);


/*
 USAGE
 $(document).ready(function(){
	$(document).customAlert({opacity:0.4, bgColor: "#aaa",  message: 'This is a test message' });
 });
 */

Download the code here

Share


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images