Advanced Search

jQuery Plugin Template

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. (function($){
  4.  $.fn.extend({
  5.  
  6.  	helloWorld : function(options) {
  7. 		// define some default variables in case none are passed in
  8. 		var defaults = {
  9. 			foo: 'hello ',
  10. 			bar: ' world'
  11. 		};
  12.  
  13. 	  var options = $.extend(defaults, options);
  14.  
  15. 	  return this.each(function() {
  16. 			 // apply any manipulations to the selected object by simply using the $(this) selector
  17. 			$(this).html(options.foo+options.bar);
  18.  
  19. 	  });
  20.  
  21. 	}//,
  22. 	// if you needed to add more methods (functions) to your plugin, you would uncommment the comma on the line above
  23. 	// and simply add another function similar to our helloWorld function above.
  24.  
  25.  });
  26. })(jQuery);
  27.  
  28.  
  29. $(function(){
  30. 	$('#test').helloWorld();
  31. 	//outputs "hello world" #test
  32. 	$('#test2').helloWorld({foo:'good ', bar:' bye'});
  33. 	//outputs "good bye" into #test2
  34. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.