jqueryプラグイン作成--5.プロンプトボックスプラグイン

今日はプロンプトボックスプラグインtooltipの作成について説明します.カスタムセレクタプラグインの開発についても紹介します.
まず、カスタムセレクタの開発について説明します.彼のコード構造は以下の通りです.

(function ($) {
    $.expr[':'].customselector = function (object,index,properties,list) {
        //code
    };
})(jQuery);

呼び出し時の書き方:

$(a:customselector)

次に、関数で使用される各パラメータについて説明します.
object:jqueryオブジェクトではなく、現在のdom要素の参照.強調する必要があるのは、dom要素とjqueryオブジェクトはまったく同じではありません.aラベルはdom要素を表し、$('a')はjqueryオブジェクトを表し、彼自身はjsオブジェクトです.知らない友人情googleに関する知識.
index:下に0と表記された配列インデックス.
properties:セレクタメタデータ配列.
List:dom要素配列.
これらのパラメータのうち、最初のパラメータは必須であり、他のいくつかのパラメータはオプションです.
セレクタ関数はbool値によって現在の要素が含まれているかどうか、trueが含まれているかどうか、falseが含まれていないかどうかを決定します.
ここでは、外部リンクへのaラベルのみを選択するaラベルのセレクタを実現します.コードは次のとおりです.

(function ($) {
    $.expr[':'].external = function (object) {
        if ($(object).is('a')) {
            return object.hostname != location.hostname;
        }
    };
})(jQuery);

今、ヒントボックスプラグインの開発を実現し始めました.開発過程はあまり話さないで、主にコードの実現で、中に注釈の説明があります.

(function ($) {//      
    $.fn.updatePosition = function (event) {
        return this.each(function () {
            $(this).css({
                left: event.pageX + 20,
                top: event.pageY + 5
            });
        });
    }

    //     ，   a  title     
    $.fn.tooltip = function () {
        return this.each(function () {
            //      
            var self = $(this);
            //  title   
            var title = self.attr('title');
            //         a  ，title      
            if (self.is('a') && title != '') {
                self.removeAttr('title')
                    .hover(function (event) {
                        //        
                        $('<div id="tooltip"></div>').appendTo('body')
                                                     .text(title)
                                                     .hide()
                                                     .updatePosition(event)
                                                     .fadeIn(400);
                    }, function () {
                        //    
                        $('#tooltip').remove();
                    }).mousemove(function (event) {
                        //    
                        $('#tooltip').updatePosition(event);
                    });
            }
        });
    };
})(jQuery);

 
この文章があなたに役に立つことを望んで、完全な効果を見たい友达はdemoに行って、住所をダウンロードすることができます:jQuery.plugin.tooltip.zip