0

一時停止リンクをクリックすると、プラグイン内の関数を呼び出す必要がある 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 ランタイム エラー: オブジェクトはこのプロパティまたはメソッドをサポートしていません。

4

2 に答える 2

1

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

この方法でカスタム プラグインを作成する場合、プラグインは次のようになります。

(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 プラグインの開発方法が明確になることを願っています。

于 2012-05-28T14:44:33.127 に答える
-1

おそらく、ネストされた関数を次のように変数に割り当てる方が良いでしょう:

(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();
于 2012-05-28T14:21:49.903 に答える