I am trying to access plugin through this, in order to refer to methods added later down in the chain.
$.fn.test = function(){
console.log(this);
}
but this refers to the elements I have used to call the plugin, and not the plugin itself.
How can I access the plugin, and thus any methods attached to it?
Use $(this) if you want the jQuery object.
You can also try this to add plugin to jQuery.
(function($){
$.extend($.fn, {
test: function(){
//Plugin code here
//here this will point to jQuery object
}
};
})(jQuery);
Related
I use a jQuery plugin called ColorPicker.
The source that I include is here.
So, my code is just $("#some_id").ColorPicker(some_options), as indicated in the doc and it works fine.
But now, I want to use only one function from the source, function HexToHSB(), but I do not know how to use it as I do not completely understand jQuery plugins import.
I tried $.ColorPicker.HexToHSB() but it did nothing.
You would not be able to do this as these functions are private to the module ColorPicker and you do not have access to them. This is how you can understand the plugin to be working:
// ColorPicker is an object with public methods, but no access to the private variables and functions in it.
// The function is being invoked at runtime, returning an object
var ColorPicker = function(){
var privateVariables;
var privateFunction = function(){...};
...
return {
publicFunction1 = function(){...},
publicFunction2 = function(){...},
}
}();
// jQuery is extended here
$.fn.extend({
ColorPicker: ColorPicker.publicFunction1,
ColorPicker: ColorPicker.publicFunction2,
});
There are two ways to fix your problem:
Copy the relevant functions out from that jQuery library and use them
Add code to the jQuery library to expose the private functions (e.g. add a custom function to line 375 that calls HexToHSB() and then extend jQuery with this function in line 478)
I am writing a jQuery plugin which, ideally I would like in it's own namespace.
So far, this seems to work (in terms of namespace nesting)
(function($) {
$.fn.nspace = {
foo: function() {
// Does not work becuase $(this) is not the correct selector.
$(this).show();
}
}
})(jQuery);
So given then example above, I might call my function like so:
$("html, body").nspace.foo();
but $(this) is not [html, body]...How can I solve this?
EDIT: To clarify (based on user comments)...
$("html, body").nspace.foo(); should call foo for [html, body] but, $(this) inside nspace resolves to nspace...so it's trying to call nspace.foo();
You shouldn't do this, but just because I dislike when someone says "You can't" in programming (often untrue, especially in Javascript) - here's how you could do this:
The jQuery object is constructed each time using its prototype.init function, which is aliased to fn.init, so you could overwrite it with a wrapped function that adds your namespace object in a way that doesn't harm any existing usage or libraries, like so:
(function($) {
var baseInit = $.fn.init;
$.fn.init = function(selector, context, rootjQuery) {
// Instantiate jQuery the way it expects
var j = new baseInit(selector, context, rootjQuery);
// Add our extra object/namespace
// Use j inside to refer to the current jQuery object
j.nspace = {
foo: function() {
j.show();
}
};
// Return it all and other libraries are none the wiser
return j;
}
})(jQuery);
http://jsfiddle.net/b9chris/7TPZY/
You should consider using the classic pattern for a jQuery plugin: define only one method: in your case, nspace. Inside this method, you'll take every case into account. Sounds hard, but it's pretty easy once you've looked into that.
(By the way you definitely have to look at that when writing a jQuery plugin)
You can't add an object as a plugin and still get the jQuery object that was used to get the object. You simply have no reference to that jQuery object when you call a method in your object.
Put the function directly as the plugin:
(function($) {
$.fn.nspace = function() {
this.show();
};
})(jQuery);
Usage:
$("html, body").nspace();
(Note that the object is the jQuery instance, not a selector or an element, so you don't need to use $(this)).
Let's say I have a lot of instances of $(this).show("slow", function(){fVar;}); where $(this) are different objects at different times, but they all need .show("slow", function(){fVar;}); and fVar is a previously defined function var.
Is it possible to set .show("slow", function(){fVar;}); as a var like "myVar" so I could theoretically do something like $(this).myVar();
You sure can. Check out the jquery docs
(function( $ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})( jQuery );
don't forget about proper namespacing! And just use the method that you declare (so mPlugin) just as you would any other JQuery method
I'm not so much into JQuery but try this -
$.prototype.myVar=function(){
//here goes your code
}
just create it as a function expression and you can use it wherever you want. this function takes in an event object that is created by an event listener. ie: click functions. use this var as your event function callback and pass in the event object so it knows what to show.
var showSlow = function(eventObject){
$(eventObject).show("slow", function(){
fVar;
});
}
I'm trying to write a jquery plugin and i have a question about the famous "this".
Here is the call of the custom plugin :
$('.selector').myPlugin({
test: $(this).attr('rel')
});
And now, somewhere in my plugin :
$.myPlugin = function (options) {
alert(options.test);
}
My question is : How can i use the Rel attribute of my selector in the plugin using $(this)?
The previous code is always telling me that "this" is the Document.
Thanx a lot
$(this) isn't what you expect it to be in that object literal. Loop using each:
$('.selector').each(function() {
$(this).myPlugin({
test: $(this).attr('rel')
});
});
Inside each, this will point to the correct element, as opposed to the context of the calling function.
I want to create a function inject() that I can call on any jQuery DOM object.
For example, $('div').inject(), $('#abc').inject(), or even $('nonStandardElement').inject();
I need to prototype it, because it should work for elements that have not been created yet.
What class (or set of classes) I can prototype to accomplish this?
This is called a jQuery plugin. You add methods to jQuery's prototype object which is exposed as jQuery.fn:
jQuery.fn.inject = function inject() {
/* do what you want */
return this; // for chainability
};
Never mind, figured it out!
Turns out I can add it right onto the 'jQuery' object, as in
jQuery.prototype.inject = function(x){alert('x')}
You can write own jquery plugin like this,
(function($){
$.fn.inject= function() {
//code...
};
})(jQuery);
//Sample call
$(selector).inject();