Hey Guys,

i want to create a Plugin:
If you call it like this:

1. $('#box').myPlugin({color: '#12345', size: 4});

the Plugin have to append a new div with a text:

1. (function($){
2.         $.fn.myPlugin = function(options) {
3.                 var defaults = {
4.                         color: '#ff0000',
5.                         size: 3
6.                 };
7.        
   
8.                 var options = $.extend(defaults, options);
9.                 return this.each(function() {
10.                         $(this).after('<div><p id="test">Hello World!</p></div>');
11.                         $('#test').css('color',options.color);
    
12.                 });
    
13.         }
14. })(jQuery);
    

That works fine for me, but now i want to do something like that:

1. $('#box').myPlugin('alert_it');

To do that, ive changed the Plugin Code like that:

1. (function($){
2.         $.fn.myPlugin = function(options) {
3.                 var defaults = {
4.                         color: '#ff0000',
5.                         size: 3
6.                 };
7.                 if(typeof(options) === 'string' && options === 'alert_it') {
8.                         alert_it();
9.                         return false;
   
10.                 }
    

1.                 var options = $.extend(defaults, options);
2.                 return this.each(function() {
3.                         $(this).after('<div><p id="test">Hello World!</p></div>');
4.                         $('#test').css('color',options.color);
   
   
5.                 });
   
   
6.         }
7. })(jQuery);
8. function alert_it() {
9.         alert('Your chosen color was '+options.color);
   
10. }
    

But these would'nt work, i don't know how to access the options :(