4

jQueryプラグインの構築は初めてです。多くのツールチップ プラグインを見て使用してきましたが、今日は独自のツールチップ プラグインを作成することにしました。

コードに関するフィードバックを得ることができますか? 何が機能し、何が機能しないか。最適化。キャッシング。
より速く、より良いものにするために何ができますか？

これは私の学習に非常に役立ち、うまくいけば他の人にも役立ちます.

これが私のプラグインです：

;(function($) {
    $.fn.jTooltip = function(options) {

        opts = $.extend({}, $.fn.jTooltip.defaults, options);

        return this.each(function() {

            var $this = $(this);
            var content;
            var showTimeout;

            $tip = $('#jTooltip');
            if($tip.size() == 0){
                $('body').append('<div id="jTooltip" style="display:none;position:absolute;"><div></div></div>');
                $tipContent = $('#jTooltip div');
            }

            $this.mouseover(function(event) {   
                content = $this.attr('title');
                $this.attr('title', '');
                $tipContent.html(content);  
                $body.bind('mousemove', function(event){
                    $tip.css({
                        top: $(document).scrollTop() + (event.pageY + opts.yOffset),
                        left: $(document).scrollLeft() + (event.pageX + opts.xOffset)
                    });
                });
                showTimeout = setTimeout('$tip.fadeIn(' + opts.fadeTime + ')', opts.delay);
            });

            $this.mouseout(function(event) {
                clearTimeout(showTimeout);  
                $this.attr('title', content);
                $('body').unbind('mousemove');
                $tip.hide();
            });

        });
    };

    $.fn.jTooltip.defaults = {
        delay: 0,
        fadeTime: 300,
        yOffset: 10,
        xOffset: 10
    };

})(jQuery);


更新されたコード

        ;(function($) {
    $.fn.jTooltip = function(options) {

        opts = $.extend({}, $.fn.jTooltip.defaults, options);

        return this.each(function() {

            var $this = $(this);
            var showTimeout;

            $this.data('title',$this.attr('title'));
            $this.removeAttr('title');

            $document = $(document);
            $body = $('body');
            $tip = $('#jTooltip');
            $tipContent = $('#jTooltip div');
            if($tip.length == 0){
                $body.append('<div id="jTooltip" style="display:none;position:absolute;"><div></div></div>');       
            }

            $this.hover(function(event){
                $tipContent.html($this.data('title'));
                $body.bind('mousemove', function(event){
                    $tip.css({
                        top: $document.scrollTop() + (event.pageY + opts.yOffset),
                        left: $document.scrollLeft() + (event.pageX + opts.xOffset)
                    });
                });
                showTimeout = setTimeout(function(){
                    $tip.fadeIn(opts.fadeTime);                           
                }, opts.delay);              
            }, function(){
                clearTimeout(showTimeout);  
                $body.unbind('mousemove');
                $tip.hide();
            });

        });
    };

    $.fn.jTooltip.defaults = {
        delay: 0,
        fadeTime: 300,
        yOffset: 10,
        xOffset: 10
    };

})(jQuery);

フィードバックがあれば教えてください ;)

4

2 に答える 2

4

.size() ではなく .length を使用してください。内部的に size() は length を呼び出すため、余分な呼び出しを節約します。

ヒントを作成するときに title 属性を削除し、.data('tip', title) を使用して要素にヒントを格納することを検討してください。これにより、常にタイトルを空白にしてから再度追加する必要がなくなります。

setTimeout 内で行う作業用の関数を作成します。文字列を setTimeout/Interval に渡すと、暗黙の評価は悪いと見なされます。

window.setTimeout( yourFadeTipFunc , opts.fadeTime);

$(document) を 2 回呼び出すのではなく、var にキャッシュします。

マウスアウトをマウスオーバーにチェーンできます。

それ以外は、本当に良い、クリーンな最初の取り組みです。

于 2009-07-05T00:11:27.070 に答える
1

何かひどく間違っているとは言えません (私が間違っていれば、他の人が私を訂正してくれます)。

$this.removeAttr('title'); //slightly more readable

これの代わりに：

$this.attr('title', '');

属性を空の文字列に設定する代わりに removeAttr を呼び出す方がきれいだと思います-また、空の文字列に対して現在設定されている値をテストするのではなく、他のコードがその属性の存在を条件付きでチェックできるようにします。

于 2009-07-05T00:09:46.763 に答える