Skeleton for a JQuery plugin


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



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.