0

プログラムで「非表示」動作を呼び出すことができるように、（非常に優れた） jQuerySpotlightプラグインを拡張しようとしています。

関連するコードをhide()関数に移動しましたが、スポットライト自体から呼び出すと正常に機能します。しかし、スポットライトの外からそれを呼び出そうとしても、何も起こりません。spotlight.hide実際にtypeに定義されていることを確認しましたがfunction、それを呼び出しても何も起こらないようです。

(function($) {

    $.fn.spotlight = function(options) {

        var hide = function() {
            alert('hiding...');   /* never gets invoked when called from outside spotlight */
            if(settings.animate){
                spotlight.animate({opacity: 0}, settings.speed, settings.easing, function(){
                    if(currentPos == 'static') element.css('position', 'static');
                    element.css('z-index', '1');
                    $(this).remove();
                    // Trigger the onHide callback
                    settings.onHide.call(this);
                });
            } else {
                spotlight.css('opacity', '0');
                if(currentPos == 'static') element.css('position', 'static');
                element.css('z-index', '1');
                $(this).remove();
                // Trigger the onHide callback
                settings.onHide.call(this);
            }
        };

        // Default settings
        settings = $.extend({}, {
            opacity: .5,
            speed: 400,
            color: '#333',
            animate: true,
            easing: '',
            exitEvent: 'click',
            onShow: function(){},
            onHide: function(){}
        }, options);

        // Do a compatibility check
        if(!jQuery.support.opacity) return false;

        if($('#spotlight').size() == 0){
            // Add the overlay div
            $('body').append('<div id="spotlight"></div>');

            // Get our elements
            var element = $(this);
            var spotlight = $('#spotlight');

            // Set the CSS styles
            spotlight.css({
                'position':'fixed', 
                'background':settings.color, 
                'opacity':'0', 
                'top':'0px', 
                'left':'0px', 
                'height':'100%', 
                'width':'100%', 
                'z-index':'9998'
            });

            // Set element CSS
            var currentPos = element.css('position');
            if(currentPos == 'static'){
                element.css({'position':'relative', 'z-index':'9999'});
            } else {
                element.css('z-index', '9999');
            }

            // Fade in the spotlight
            if(settings.animate){
                spotlight.animate({opacity: settings.opacity}, settings.speed, settings.easing, function(){
                    // Trigger the onShow callback
                    settings.onShow.call(this);
                });
            } else {
                spotlight.css('opacity', settings.opacity);
                // Trigger the onShow callback
                settings.onShow.call(this);
            }

            // Set up click to close
            spotlight.live(settings.exitEvent, hide);
        }

        // Returns the jQuery object to allow for chainability.  
        return this;
    };


})(jQuery);

私はそれをインストールします：

      var spotlight = $('#media-fragment').spotlight({
          opacity: .5,
          speed: 400,
          color: '#333',
          animate: false,
          easing: '',
          exitEvent: 'click',
          onShow: function(){},
          onHide: function(){}
      });

そしてそれを隠すために私はします：

spotlight.hide();

this範囲や問題が関係していると確信しています。

更新： https ：//gist.github.com/2910643で完全なソリューション。

4

1 に答える 1

1

変更してみてください：

var hide = function() {

に：

this.hide = function() {

var親スコープ内の関数または変数のスコープを定義します。つまり、本質的にはprotectedです。this一方、親オブジェクトに明示的に設定し、prototypeパブリックにアクセスできるようにします。

于 2012-06-11T14:56:17.253 に答える