Question

我正在开发一个 jQuery 插件, 其中当我单击暂停链接时, 我需要在插件中调用函数。我的代码是这样的

$("#pauseAnimation").click(function () { $.fn.cjImageVideoPreviewer().pauseAnimation(); })

和函数将被调用

(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;
        }
    }

当我单击链接时,错误以

Microsoft JScript runtime error: Object doesn t support this property or method any help would be appreciable..

Answer 1

在 JQuery < a href=" http://docs.jquery.com/Plugins/Authoring" rel=“nofollow” > Document 中,创建插件的推荐方法是:

(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 );

您的插件如果想要使用这种方式创建自定义插件, 其外掛器应该看起来与此相似 :

(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 );

然后你就可以像这样使用它:

//Init your plugin with some options
$( #pauseAnimation ).cjImageVideoPreviewer({option1:  value1 , option2:  value2 });
// then call a method like this:
$( #pauseAnimation ).cjImageVideoPreviewer( pauseAnimation );

希望这能澄清如何开发 JQuery 插件。

Answer 2

您可能最好将嵌套函数指派给像这样的变量 :

(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();

尽情享受吧!

编辑:

或者你可以做到这一点:

$.fn.foo = {
    do_stuff : function() {
        alert("do_stuff!");
    }
};

$.fn.foo.do_stuff();

友情链接