Advanced Search

A Simple Template for Building a jQuery Plugin

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. 	<title>simple hello world jQuery plugin</title>
  6. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. (function($){
  9.  $.fn.extend({
  10.  
  11.  	helloWorld : function(options) {
  12. 		// define some default variables in case none are passed in
  13. 		var defaults = {
  14. 			foo: 'hello ',
  15. 			bar: ' world'
  16. 		};
  17.  
  18. 	  var options = $.extend(defaults, options);
  19.  
  20. 	  return this.each(function() {
  21. 			 // apply any manipulations to the selected object by simply using the $(this) selector
  22. 			$(this).html(options.foo+options.bar);
  23.  
  24. 	  });
  25.  
  26. 	}//,
  27. 	// if you needed to add more methods (functions) to your plugin, you would uncommment the comma on the line above
  28. 	// and simply add another function similar to our helloWorld function above.
  29.  
  30.  });
  31. })(jQuery);
  32.  
  33.  
  34. $(function(){
  35. $('#test').helloWorld();
  36. //outputs "hello world" #test
  37. $('#test2').helloWorld({foo:'good ', bar:' bye'});
  38. //outputs "good bye" into #test2
  39. });
  40. </script>
  41. </head>
  42.  
  43. <body>
  44. <div id="test"></div>
  45. <div id="test2"></div>
  46. </body>
  47. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.