Advanced Search

Return to Snippet

Revision: 18835
at January 29, 2010 14:10 by adamcoulombe
Updated Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>simple hello world jQuery plugin</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
 $.fn.extend({
 
 	helloWorld : function(options) {
		// define some default variables in case none are passed in
		var defaults = {
			foo: 'hello ',
			bar: ' world'
		};
		
	  var options = $.extend(defaults, options);
	  
	  return this.each(function() {
			 // apply any manipulations to the selected object by simply using the $(this) selector
			$(this).html(options.foo+options.bar);
		
	  });
	  
	}//,
	// if you needed to add more methods (functions) to your plugin, you would uncommment the comma on the line above
	// and simply add another function similar to our helloWorld function above.

 });
})(jQuery);


$(function(){
$('#test').helloWorld();
//outputs "hello world" #test
$('#test2').helloWorld({foo:'good ', bar:' bye'});
//outputs "good bye" into #test2
});
</script>
</head>

<body>
<div id="test"></div>
<div id="test2"></div>
</body>
</html>

Revision: 18834
at October 9, 2009 16:32 by adamcoulombe
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>simple hello world jQuery plugin</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
 $.fn.extend({
 
 	helloWorld : function(options) {
		// define some default variables in case none are passed in
		var defaults = {
			foo: 'hello ',
			bar: ' world'
		};
		
	  var options = $.extend(defaults, options);
	  
	  return this.each(function() {
			 // apply any manipulations to the selected object by simply using the $(this) selector
			$(this).html(options.foo+options.bar);
		
	  });
	  
	}//,
	// if you needed to add more methods (functions) to your plugin, you would uncommment the comma on the line above
	// and simply add another function similar to our helloWorld function above.

 });
})(jQuery);


$(function(){
$('#test').helloWorld();
//outputs "hello world" #test
$('#test2').helloWorld({foo:'good ', bar:' bye'});
//outputs "good bye" into #test2
});
</script>
</head>

<body>
<div id="test"></div>
<div id="test2"></div>
</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
A Simple Template for Building a jQuery Plugin

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, plugin, template, simple, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery