[英]Error when calling a function inside jQuery plugin
I am developing a jQuery plugin in which, when i click a pause link I need to call a function inside plugin. 我正在开发一个jQuery插件,当我单击暂停链接时,我需要在插件内调用一个函数。 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..
Microsoft JScript运行时错误:对象不支持此属性或方法,任何帮助都将是可贵的。
In JQuery documentation the recomended method to create a plugin is: 在JQuery 文档中 ,推荐的创建插件的方法是:
(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. 希望这阐明了如何开发JQuery插件。
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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.