The code for the plugin is as follows,
(function($) {
jQuery.fn.extend({
slimScroll: function(options) {
var defaults = {
....
};
this.each(function() {
function scrollContent(y, isWheel, isJump) {
....
}
}
return this;
}
}); jQuery.fn.extend({
slimscroll: jQuery.fn.slimScroll
});
How do i call the function scrollContent() from outside the plugin?
i have tried
$("#myId").Slimscroll().ScrollContent();
$("#myId").data("SlimScroll").ScrollContent();
And many other ways but dosent seem to get it working.
As the code shows scrollContent is a private method and is not supposed to be accessed from outside the plugin. Instead you could re-render the scrollbar by simply calling $("#myId").slimScroll() as shown in this example.
Related
I've been experimenting with writing JQuery plugins lately, and I'm sure this is a very simple question. But, I seem to not be able to get a value inside of my plugin.
For example, I have the following code:
plugin.js
$(function($) {
$.fn.myPlugin = function() {
// alert the id from main.js
}
});
main.js
$(document).ready(function() {
$('#someDIV').attr('id').myPlugin();
});
You cannot define plugin on string. Use selector to call the plugin.
Have a look at this.
Use it like this:
(function ($) {
$.fn.myPlugin = function () {
this.each(function () {
// Allow multiple element selectors
alert(this.attr('id'));
});
return this; // Allow Chaining
}
} (jQuery));
$('.myClass').myPlugin();
DEMO
Tutorial
Try this:
(function($) {
$.fn.myPlugin = function() {
alert($(this).attr('id'));
}
}(jQuery));
See here: http://jsfiddle.net/1cgub37y/1/
You should pass only the object into your jQuery-extension function (not the object's ID), as below or in this fiddle (will alert "someDIV" onload):
// jQuery extension
// The object passed into jQuery extension will occupy keyword "this"
$(function($) {
$.fn.myPlugin = function() {
// Get the ID (or some other attr) of the object.
var id = $(this).attr("id");
// Now do something with it :)
alert(id);
}
});
$(document).ready(function() {
$('#someDIV').myPlugin();
});
I'm trying to create a simple plugin that I can call by both: $.myPlugin() and $('something').myPlugin()
Heres the code:
(function($) {
$.fn.myPlugin = function(item) {
return this;
};
$.myPlugin = function(item) {
return $.fn.myPlugin(item);
};
}(jQuery));
This works when called either way mentioned above.
However, calling $.myPlugin().hide() does not work. Any chained methods are failing.
Heres a simple JSBin I made showing the issue
Why?
You should return $(this), not jquery this:
(function($) {
$.fn.myMethod = function() {
this.append('<p>MY METHOD</p>');
return $(this);
};
$.myMethod = function() {
return $.fn.myMethod();
};
}(jQuery));
$(function () {
// Moment of truth
$('.output').myMethod().hide('slow');
$('h1').click(function(){
$('.output').myMethod().hide();
});
});
In the past years I can use this code to work with live-events and drag&drop or sortable:
(function ($) {
$.fn.liveSortable = function (opts) {
this.live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).sortable(opts);
}
});
};
}(jQuery));
But the "live" event is deprecated and does not work in newer jQuery versions. I tried to replace the live event with the on-event, but there are still error messages: TypeError: n is undefined
(function ($) {
$.fn.liveSortable = function (opts) {
$(document).on("mouseover",this, function () {
if (!$(this).data("init")) {
$(this).data("init", true).sortable(opts);
}
});
};
}(jQuery));
Do you have any suggestions what I can do instead?
---------------EDIT-----------------------------
I found another solution for me:
$(document).on("mouseover",".draggable", function () {
$( ".draggable" ).draggable({opt});
});
Reference: Using the sortable() method and sending datain URL via jQuery
When do you get an error? Maybe something else goes wrong. I don't get any errors here: http://jsfiddle.net/TSv6Z/
I know, there are quite a few examples on the Web, but finding real one out of them all is tough for beginner. So I want to create jQuery plugin with public methods. Example code:
(function($) {
$.fn.peel = function(options) {
var defaults = {
};
var settings = $.extend({},defaults, options);
this.public = function() {
alert("public");
};
var private = function() {
alert("private");
}
return this.each(function() {
//this.public();
private();
});
};
})(jQuery);
As I found, this is the way to make public function, which could be called like this :
var peel = $('img').peel();
peel.public();
So far it works as expected - public() can be called. But what if i want to call that function within my plugin? I commented out in this.each() because it does not work. How can i achieve that?
One way to create publicly accessible methods within your plugins is to use the jQuery UI widget factory. This is the framework that jQuery UI uses for all of it's supported UI widgets. A quick example would look like this:
(function( $ ) {
$.widget( "something.mywidget", {
// Set up the widget
_create: function() {
},
publicFunction: function(){
//...
}
});
}( jQuery ) );
var $w = $('#someelement').mywidget();
$w.mywidget('publicFunction');
I know that I can create custom jQuery plugins by using the $.fn.myFunction constructor, and the calling the custom function in JavaScript as $('selector').myFunction().
However, for a project I'm currently working on, I need to be able to define a function that does not require a selector to work.This is actually for a MessageBox plugin, which will act in a similar manner to C#'s MessageBox class. As such, I would ideally like to create the function as MessageBox, and then call it as follows:
var myMessage = $.MessageBox(); and then in turn myMessage.Show();
Notice the lack of selector brakets in the jQuery reference at the beginning of the function call.
Any advice on the best practice for this would be gratefully received.
This should work:
jQuery.MessageBox = function() {
var show = function() {
// something...
}
var hide = function() {
// something...
}
return {
show: show,
hide: hide
}
}
relipse has a good point - as you are cluttering the main namespace. A solution if you have more objects than just eg. MessageBox is to create your own namespace like this:
jQuery.myLib = {
MessageBox: function() {
var show = function() {
// something...
}
var hide = function() {
// something...
}
return {
show: show,
hide: hide
}
}
}
That means you are only taking one place in the main namespace (the name of your library, in this case myLib). You'd call it like this:
jQuery.myLib.MessageBox.show()
(function ($) {
$.MessageBox = function () {
var show = function () {
// something...
}
var hide = function () {
// something...
}
return {
show: show,
hide: hide
}
}
})(Jquery);
I think you better scope to Immediate invocation function to avoid collision with namespaces.