jQuery プロンプト効果コード Sharing_jquery

コード 1:

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

<p><a href="#" class="tooltip" title="これはハイパーリンクのヒント 1 です。">ヒント 1.</a></p>
<p><a href="#" class="tooltip" title="これはハイパーリンクのヒント 2 です。">ヒント 2.</a></p>
<p><a href="#" title="これは内蔵ヒント 1 です。">内蔵ヒント 1.</a></p>
<p><a href="#" title="これは内蔵チップ 2 です。">内蔵チップ 2。

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

$(関数(){
$(".tooltip").mouseenter(function(e){
This.mytitle=this.title
This.title=""
var a="<div>" this.mytitle "</div>"
$("body").append(a);
$("div").css({
"top": (e.pageY y) "px",
"left": (e.pageX x) "px"
}).show("fast")
}).mouseout(function(){
this.title= this.mytitle;
$("div").remove();
});
})

学習経験:

大きな偏差が発生するため、p タグの下に div 要素を追加しないでください。

になることが判明しました！上記の
の場合、this と $("this") には違いがあります。 this.title を $("this").attr("title") に書き換えると、次のマウスアウト イベントが保存されたタイトルにアクセスできなくなります

コード 2:

CSSの引用: jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css
jsの引用: jqueryui/js/jquery-ui-1.8.18.custom.min.js

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

<スクリプト>
$( "#dialog:ui-dialog" ).dialog( "destroy" );

$( "#dialog-message" ).dialog({

身長: 120、
幅: 220、
モーダル: true、
ボタン: {
「いいえ」: function() {
//何かする
$（this）.dialog（ "close"）; },
"はい": function() {
//何かをする
$( this ).dialog( "close" );
}
}
});
</script>
<div id="dialog-message" title="メッセージ ボックス" style="display:none;height: 120px; width:220px;">私はポップアップ メッセージ ボックスです</div>

コード 3:

JavaScript ポップアップ レイヤー コンポーネント easyDialog を使用します

easyDialog を一定期間使用した後、使用中に発生したいくつかの問題をまとめました。最近、時間をかけて元のコードを再構築して最適化し、いくつかの新しい機能を追加しました。オリジナルのバージョンでは、単純なポップアップ レイヤーの基本的な機能を実現するだけでしたが、このバージョンでは、基本的な機能を実現するだけでなく、プロジェクトをいかに早く完了するかについても考慮されています。ポップアップ レイヤーをより適切かつ効率的にプロジェクトに適用できるようになります。
easyDialog v2.0 の新機能:

1. デフォルトのポップアップ レイヤー コンテンツ テンプレートを追加しました。単純なアプリケーションの場合は、ポップアップ レイヤー コンテンツの構造を記述する必要はなく、いくつかの単純なパラメーターを渡すだけで済みます。本来の使用方法：

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

easyDialog.open({
コンテナ: 'demoBox'
});

デフォルトのコンテンツテンプレートを使用すると、コンテナパラメータは次のように使用できます:

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

easyDialog.open({
コンテナ: {
ヘッダー: 'ポップアップ レイヤー タイトル',
コンテンツ: 'easyDialog へようこそ : )'、
はいFn : btnFn、
NoFn: true
}
});

表示される効果は以下のとおりです:

デフォルトのコンテンツテンプレートのスタイルを変更したい場合は、ダウンロードしたドキュメント内の easydialog.css ファイルを変更して、希望のスタイルを実現できます。
2. ポップアップ レイヤーのユーザー エクスペリエンスを向上させるためにドラッグ アンド ドロップ効果を追加しました。ポップアップ レイヤーのコンテンツをカスタマイズして、ドラッグ アンド ドロップ効果を簡単に実現できます。
3. キャッシュ システムとマイクロ イベント処理システムが内部的に追加され、ポップアップ レイヤーのパフォーマンスを向上させるためにポップアップ レイヤーのコンテンツもキャッシュされます。
さらに、パラメータの名前が変更され、元の isOverlay が overlay に変更され、元のポップアップ レイヤーの各要素の ID も、可能な限り競合を避けるために変更されました。

上記の 3 種類のプロンプト エフェクトは私がよく使用するもので、プロジェクトのニーズに応じて自由に使用できます。