I am developing a jQuery plugin in which, when i click a pause link I need to call a function inside plugin. My code is like this
$("#pauseAnimation").click(function () { $.fn.cjImageVideoPreviewer().pauseAnimation(); })
and function to be called is this
(function ($) {
$.fn.cjImageVideoPreviewer = function (options) {
var settings = {
// user editable settings
images: [],
delay: 1000,
autoPlay: false,
showProgress: false
};
var sys = {
// function parameters
version: '1.0.2',
elem: null,
idx: 1,
timer: null,
loaded: 0,
mouseX: null,
mouseY: null,
state: false
};
/*
handle transitions
***************************************/
function clearTimer() {
if (sys.timer !== null) {
window.clearTimeout(sys.timer);
sys.timer = null;
}
}
// reset everything
function stopAnimation() {
if (sys.state) {
clearTimer();
sys.idx = 0;
sys.state = false;
// show the first image
$(sys.elem).find("div.cjImageVideoPreviewer img:first").css({
"display": "block"
});
// hide all the other images
$(sys.elem).find("div.cjImageVideoPreviewer img:not(:first)").css({
"display": "none"
});
}
}
// pause
function pauseAnimation() {
if (sys.state) {
clearTimer();
sys.idx = 0;
sys.state = false;
}
}
when i click the link an error comes as
Microsoft JScript runtime error: Object doesn't support this property or method any help would be appreciable..
In JQuery documentation the recomended method to create a plugin is:
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy : function( ) {
return this.each(function(){
$(window).unbind('.tooltip');
})
},
reposition : function( ) {
// ...
},
show : function( ) {
// ...
},
hide : function( ) {
// ...
},
update : function( content ) {
// ...
}
};
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
And your plugin should look something similar to this if want to use this way of creating custom plugins:
(function( $ ){
var sys, settings;
var methods = {
init : function( options ) {
//do stuf with options settings
},
clearTimer: function () {
if (sys.timer !== null) {
window.clearTimeout(sys.timer);
sys.timer = null;
}
},
stopAnimation: function () {
if (sys.state) {
clearTimer();
sys.idx = 0;
sys.state = false;
// show the first image
$(sys.elem).find("div.cjImageVideoPreviewer img:first").css({
"display": "block"
});
// hide all the other images
$(sys.elem).find("div.cjImageVideoPreviewer img:not(:first)").css({
"display": "none"
});
}
},
pauseAnimation: function () {
if (sys.state) {
clearTimer();
sys.idx = 0;
sys.state = false;
}
}
};
$.fn.cjImageVideoPreviewer = function (method) {
settings = {
// user editable settings
images: [],
delay: 1000,
autoPlay: false,
showProgress: false
};
sys = {
// function parameters
version: '1.0.2',
elem: null,
idx: 1,
timer: null,
loaded: 0,
mouseX: null,
mouseY: null,
state: false
};
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.cjImageVideoPreviewer' );
}
}
})( jQuery );
And then you can use it like this:
//Init your plugin with some options
$('#pauseAnimation').cjImageVideoPreviewer({option1: 'value1', option2: 'value2'});
// then call a method like this:
$('#pauseAnimation').cjImageVideoPreviewer('pauseAnimation');
Hope this clarify how to develop a JQuery plugin.
You're probably better of assigning nested functions to variables like this:
(function($) {
$.fn.foo = function(options) {
var do_stuff = function() {
alert('do_stuff!')
var do_other_stuff = function() {
alert("do_other_stuff");
};
return {
do_other_stuff: do_other_stuff
};
};
return {
do_stuff: do_stuff
}
};
})(jQuery);
$.fn.foo().do_stuff();
$.fn.foo().do_stuff().do_other_stuff();
Enjoy!
EDIT:
Alternatively you could do this:
$.fn.foo = {
do_stuff : function() {
alert("do_stuff!");
}
};
$.fn.foo.do_stuff();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.