jqueryプラグインの制作プロンプトボックスプラグイン実装code_jquery

まず、カスタム セレクターの開発について紹介します。 コード構造は次のとおりです。

コードをコピーします コードは次のとおりです。 >

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

呼び出し時の記述:
$(a:customselector) それでは、まず関数で使用されるさまざまなパラメータについて説明します。
オブジェクト: jquery オブジェクトではなく、現在の dom 要素への参照。 dom 要素と jquery オブジェクトは完全に異なることを強調する必要があります。 a タグは dom 要素を表し、$('a') はそれ自体が js オブジェクトである jquery オブジェクトを表します。友情に関するグーグル関連の知識は知りません。
インデックス: 添字 0 の配列インデックス。
プロパティ: セレクターのメタデータ配列。
リスト: DOM 要素の配列。
これらのパラメータのうち、最初のパラメータは必須であり、他のパラメータはオプションです。
セレクター関数は、現在の要素がブール値によって含まれるかどうかを決定します。true は含まれ、false は含まれません。
ここでは、外部リンクを指すタグのみを選択するタグ セレクターを実装します。コードは次のとおりです。

コードをコピー コードは次のとおりです:

(function ($) {
$.expr[':'].external = function (object) {
if ($(object ).is( 'a')) {
return object.hostname != location.hostname;
})(jQuery);ここで実装を開始します。プロンプト ボックス プラグインの開発プロセスについては詳しく説明しません。重要なのは、コードの実装です。これには注意事項があります。

コードをコピー

コードは次のとおりです: (function ($) {//Update座標位置$.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 属性 value
var title = self.attr ('title')
//現在のオブジェクトがタグであるかどうか、および title 属性にコンテンツがあるかどうかを判断します
if (self.is('a' ) && title != '') {
self.removeAttr('title')
.hover(function (event) {
//マウスはターゲットオブジェクト上にあります
$('< ;div id="tooltip">

') .appendTo('body')
.text(title)
.hide()
.updatePosition(event)
。 fadeIn(400);
}, function () {
//マウスアウト
$('#tooltip').remove();
}).mousemove(function (event) {
//マウス移動
$('#tooltip') .updatePosition(event)
}
}); );


この記事が役立つことを願っています。完全な効果を確認したい友人は、ダウンロード アドレス:
jQuery.plugin.tooltip