Multi Instance Plugin Issue

Multi Instance Plugin Issue

Hey all,
I'm in the process of writing a JQuery Plugin, and have ran into a bit of a snag. When I create multiple instances of a plugin, it always ends up returning the last instance that was created.

Can any of you JQuery wizards help me out?

Here is an example of the code that I'm using. I'm currently testing this in chrome.

  2. <html>
  3. <title>Sample</title>
  4. <head>
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  6. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js"></script>
  7. <script language="javascript" type="text/javascript">
  8. $(document).ready(function () {

  10. $('#hello').samplePlugin('Hello Plugin');
  11. $('#by').samplePlugin('By Plugin');

  13. $('#clickme').click(function () {
  14. $('#hello').DisplayShowTitle();
  15. $('#by').DisplayShowTitle();
  16. });
  17. });


  20. (function ($) {
  21. $.samplePlugin = function (el, title, options) {
  22. // To avoid scope issues, use 'base' instead of 'this'
  23. // to reference this class from internal events and functions.
  24. var base = this;

  26. // Access to jQuery and DOM versions of element
  27. base.$el = $(el);
  28. base.el = el;

  30. // Add a reverse reference to the DOM object
  31. base.$el.data("samplePlugin", base);

  33. base.init = function () {
  34. if (typeof (title) === "undefined" || title === null) title = "null";

  36. base.title = title;

  38. base.options = $.extend({}, $.samplePlugin.defaultOptions, options);

  40. // Put your initialization code here
  41. };

  43. // Sample Function, Uncomment to use
  44. base.showTitle = function (paramaters) {
  45. return base.title;
  46. };



  50. // Run initializer
  51. base.init();

  53. $.fn.DisplayShowTitle = function () {
  54. var message = base.showTitle();
  55. alert(message);
  56. return message;
  57. };

  59. };


  62. $.samplePlugin.defaultOptions = {
  63. };

  65. $.fn.samplePlugin = function (title, options) {
  66. return this.each(function () {
  67. (new $.samplePlugin(this, title, options));
  68. });
  69. };

  71. })(jQuery);

  73. </script>
  74. </head>
  75. <body>
  76. <div id="hello" name="hello">
  77. Hello</div>
  78. <div id="by" name="by">
  79. By</div>
  80. <input id="clickme" name="clickme" type="button" value="click" />
  81. </body>
  82. </html>

Thanks for any help