Advanced Search

Skeleton for a JQuery plugin

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*  
  2. From the article http://www.learningjquery.com/2007/10/a-plugin-development-pattern
  3. */
  4.  
  5. //
  6. // create closure
  7. //
  8. (function($) {
  9. 	//
  10. 	// plugin definition
  11. 	//
  12. 	$.fn.hilight = function(options) {
  13. 		debug(this);
  14. 		// build main options before element iteration
  15. 		var opts = $.extend({}, $.fn.hilight.defaults, options);
  16. 		// iterate and reformat each matched element
  17. 		return this.each(function() {
  18. 			$this = $(this);
  19. 			// build element specific options
  20. 			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
  21. 			// update element styles
  22. 			$this.css({
  23. 				backgroundColor: o.background,
  24. 				color: o.foreground
  25. 			});
  26. 			var markup = $this.html();
  27. 			// call our format function
  28. 			markup = $.fn.hilight.format(markup);
  29. 			$this.html(markup);
  30. 		});
  31. 	};
  32. 	//
  33. 	// private function for debugging
  34. 	//
  35. 	function debug($obj) {
  36. 		if (window.console && window.console.log)
  37. 		window.console.log('hilight selection count: ' + $obj.size());
  38. 	};
  39. 	//
  40. 	// define and expose our format function
  41. 	//
  42. 	$.fn.hilight.format = function(txt) {
  43. 		return '<strong>' + txt + '</strong>';
  44. 	};
  45. 	//
  46. 	// plugin defaults
  47. 	//
  48. 	$.fn.hilight.defaults = {
  49. 		foreground: 'red',
  50. 		background: 'yellow'
  51. 	};
  52. //
  53. // end of closure
  54. //
  55. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.