A Simple Template for Building a jQuery Plugin


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



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.