ansaurus

Question

Answer 1

+1 A:

Sure you can, JavaScript is really dynamic:

    this.prepend(
        $("<span></span>").text(options.text)
    ).css({color: "white", backgroundColor: "black"});

You can replace the native call to this.prepend() with the jQuery function you pass in the options object as a parameter.

Since most jQuery methods behave on a current set of elements (the this object in your plugin) you need to use apply or call to make it work. This way you can call the options.insertionCallback function with the current this object as its context.

Something like:

    options.insertionCallback.call(this, // pass the current context to the jQuery function
        $("<span></span>").text(options.text)
    ).css({color: "white", backgroundColor: "black"});

Edit

However you can't access jQuery methods directly from the $ namespace, you need a constructed jQuery object to access its methods, or simply use $.fn.functionName as Nick Craver pointed out.

alert($.prepend); // won't alert the function

alert($.fn.prepend); // will alert the function

Luca Matteis 2010-07-09 10:13:26

Could you please elaborate your example a little more? I cannot grasp the exact syntax. I get *options.insertionCallback is undefined* no matter what I do.

Álvaro G. Vicario 2010-07-09 10:40:05

@Álvaro G. Vicario: That's because $.prepend (or $.append) is undefined. I elaborated a bit more in the answer.

Luca Matteis 2010-07-09 10:43:25

You can access the methods directly, `$.fn.prepend` ;)

Nick Craver 2010-07-09 10:44:04

Oh right, thanks Nick.

Luca Matteis 2010-07-09 10:47:03

That did the trick in my sample code: use `$.fn.prepend` to set and `options.insertionCallback.call(this,...)` to call. I understand the callback execution must normally start the method chain if previous methods change the element selection but it's a reasonable drawback. Nick's string trick is also neat.

Álvaro G. Vicario 2010-07-09 11:04:46

Answer 2

+1 A:

extend it like so:

(function($){
    $.fn.foo = function(options){
        var options = $.extend({
            text: "Foo!",
            cb: null
            }, options
        );

        if($.isFunction(options.cb)){
           // optimal also pass parameters for that callback
           options.cb.apply(this, []);
        }

        this.prepend(
            $("<span></span>").text(options.text)
        ).css({color: "white", backgroundColor: "black"});

        return this;
    };
})(jQuery);

I don't really understand what you mean with

Can I pass a jQuery method as an argument and use it inside the plugin in the middle of a chain?

Why would you want to pass a jQuery method ? it's already in there so you can just call it on any jQuery object.

jAndy 2010-07-09 10:14:40

What I mean is being able to do this inside the plugin: `this.insertionCallback($("<span></span>").text(options.text)).css({color: "white", backgroundColor: "black"});`

Álvaro G. Vicario 2010-07-09 10:35:17

Answer 3

+1 A:

You can also do this string based to keep it simple, like this:

(function($){
  $.fn.foo = function(options){
    var options = $.extend({
        text: "Foo!",
        insertionCallback: "append"
        }, options
    );
    return this[options.insertionCallback]($("<span></span>").text(options.text))
               .css({color: "white", backgroundColor: "black"});
  };
})(jQuery);

Then your call looks like this:

$(function(){
  var optionsFoo = {
    text: "Foo!",
    insertionCallback: "append"
  }
  var optionsBar = {
    text: "Bar!",
    insertionCallback: "prepend"
  }
  $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"});
});

You can test it here, this would allow you to use append, prepend, html and text, giving you a few options to set the content. In this case we're just taking advantage of JavaScript being a dynamic language, where this.prepend(something) is equal to this["prepend"](something).

Nick Craver 2010-07-09 10:54:04

Neat! JavaScript syntax will never stop surprising me...

Álvaro G. Vicario 2010-07-09 11:08:19

Answer 4

A:

Not an answer to your question, but the recommended style is:

<script type="text/javascript">

  //this
  jQuery(function($) {
    //... stuff using the jQuery lib, using the $
  });

  //not this
  $(function() {
    //...
  });

  //or this
  (function($) {
    //...
  })(jQuery);

</script>

Justice 2010-07-09 10:58:38

The last one is the "Custom Alias in plugin code" described at http://docs.jquery.com/Plugins/Authoring#Custom_Alias but I take note of the alias in page code, which I was not aware of.

Álvaro G. Vicario 2010-07-09 11:49:48

Right, this is for page code. Plugin code should always use the last style example instead of the first.

Justice 2010-07-09 12:58:11

ansaurus

tags:

views:

answers:

Use jQuery method as callback parameter

Update: myprogress so far

related questions