qTip2 jQuery_jqueryをベースにした絶妙なプロンプト情報プラグイン-jsチュートリアル-php.cn

qTip2 は MIT/GPLv2 ライセンスを採用しています。公式 Web サイトは、http://craigsworks.com/projects/qtip2/ です。Nightly バージョンはまだ更新されません。もちろん、通常の使用には影響しません。
はじめに
ご心配な場合は、古いバージョンの qTip を試してみることもできますが、一部のパラメータが異なります。qTip から qTip2 にアップグレードする場合は、公式の変換ツールを使用してコードをアップグレードできます。 // craigsworks.com/projects/qtip2/converter/。

使用中に問題がある場合は、次の 3 つのファイルを直接ダウンロードしてください。少なくとも公式デモは正常です:

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

ダウンロード時公式ウェブサイトから最新バージョンを入手し、対応するスタイルとプラグインを選択できます。オプションのスタイルには、いくつかのカラースタイル (カラースタイル)、角丸などの CSS3 関連のスタイル、および次のさまざまなプラグインが含まれます。自分のニーズに応じて:

Ajax は言うまでもなく、リモートコンテンツを要求します
ヒント、矢印などのバブルダイアログ効果
モーダル、モーダルダイアログ効果 (jQuery UI Dialog / ThickBox など)
イメージマップ。マップ内のエリアタグを迅速にサポートします。
SVG、SVG 要素のヒントのサポート
BGIFrame、選択コントロールなどのカバーなど、IE6 のようなアンティークに使用されます。

上記のプラグインの機能に加えて、その主な機能は次のとおりです (より一般的に使用されるもののみがリストされています)。

プロンプトの内容、タイトル、閉じるボタンなどを設定します。
リンクのタイトル (
プロンプト情報が表示される場所

プロンプト情報の対象、つまりどの要素が表示されるか

マウスを要素に移動してクリックするなど、プロンプト情報の表示/非表示によってトリガーされるイベント (mouseenter、click)

プロンプト情報の表示/非表示の効果

対応するスタイル設定による外観の定義

ドラッグ可能なターゲット、マウスポインターなどをたどります

使用方法
以下は、いくつかの使用方法の簡単なデモンストレーションです

最も単純なプロンプトを作成します:

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

 
$("#demo2").qtip({ 
content: "これはヒントの内容です (by 囧月) )" 
} ; 
 

$("#demo3").qtip({
content: {
text: "これはヒントのコンテンツです (囧月 lwme.cnblogs.com による) )"

、タイトル: "プロンプトタイトル" } }); 閉じるボタン付きプロンプト:

コードをコピー 

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

$("#demo3").qtip({
content: {
text: "これはプロンプトの内容です (囧月 lwme.cnblogs.com による)"

、タイトル: { テキスト: "プロンプトタイトル" 、ボタン: "閉じる" } } });

要素の属性をプロンプト メッセージとして使用します: 

コードをコピーします

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

$ ("a[title]").qtip(); //リンクのタイトルから
$("img[alt]")。 qtip(); //img の alt から
$("div[title]").qtip(); // div のタイトルから

要素を明示的に指定することもできますプロンプト情報としての属性:

コードをコピーします

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

$(' img[alt]').qtip({
content: {
attr: 'alt'

} }); AJAX を使用してリモートをリクエストします。

コードをコピー

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

 
$("#demo4").qtip({ 
content: { 
text: "読み込み中...", 
ajax: { 
url: "lwmeAtCnblogs.aspx ?name=囧月" 
} 
} 
}); 

位置とスタイルを設定:

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

 
$("#demo5").qtip({ 
position: { 
my: 'bottom left', 
at: 'top center' 
}, 
style: { 
classes: 'ui-tooltip-red' 
} 
}); > 
クリックするとモーダル ダイアログ ボックスが表示されます: 

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

$(' button').qtip({

content: "これはヒントのコンテンツです (囧月 lwme.cnblogs.com による)", 
show: { 
event: 'click' , // クリックすると表示します ... 
solo: true, // ...そして他のすべてのツールチップを非表示にします... 
modal: true // ...そしてモーダルにします 
}, 
hide: false 
}); 

 
ページが読み込まれるときに表示され、自動的には非表示になりません: 

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

$('button').qtip({

content: "これはヒントの内容です (by囧月lwme) .cnblogs.com)", 
show : { 
ready: true 
}, 
hide: false 
}); 

 
パラメータ設定

まず、qTip2 のデフォルトのパラメーター設定を確認します。

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

$.fn.qtip.defaults = {

// ページがロードされたら、プロンプト情報の要素を作成します
prerender: false,
// プロンプト情報の ID を設定します。例: set it to myTooltip
// このプロンプト情報には ui-tooltip-myTooltip を通じてアクセスできます
id: false,
// プロンプトが表示されるたびに、前のプロンプトを削除します
overwrite: true ,
// 要素属性を通じてプロンプトを作成します
// たとえば、a[title]、元のプロンプトを置き換えます一部のタイトルは oldtitle に名前変更されます
suppress: true,
// コンテンツ関連settings
content: {
// プロンプトメッセージの内容
// 内容のみを設定する場合は、直接 content : "プロンプト情報"
// content なし: { text: { "プロンプト情報" } }
text: true,
// プロンプト情報で使用される要素属性
attr: 'title ',
// ajax プラグイン
ajax: false,
title: {
// プロンプトメッセージのタイトル
// タイトルのみを設定する場合は、直接タイトルを設定できます。 title: "title"
text: false,
// 閉じるボタンプロンプト情報
// たとえば、ボタン: "x"、ボタン: "閉じる"
// 閉じるボタンを有効にすることができます
ボタン: false
}
},
// 位置関連の設定
position: {
// プロンプト情報の位置
// 例えば、プロンプトの対象要素（at 属性）の右下隅
// に相当プロンプト情報の左上隅 (my 属性)
my: 'top left',
at: 'bottom right',
// プロンプトのターゲット要素、デフォルトはセレクター
target : FALSE,
// デフォルトでプロンプト情報が追加されるコンテナ
container: FALSE,
// 指定されたターゲット内でプロンプト情報を表示し、境界を超えないようにする
viewport: FALSE、
Adjust: {
// プロンプト情報位置オフセット
x: 0、y: 0、
mouse: TRUE、
resize: TRUE、
method : 'フリップフリップ'
},
//特殊効果
effect: function(api, pos, viewport) {
$(this).animate(pos, {
duration: 200 ,
queue: FALSE
});
}
},
//表示プロンプトの関連設定
show: {
// イベントをトリガーするターゲット要素
// デフォルトは selector
target: false,
// イベント名、デフォルトはマウス移動時です
// click に変更可能です
event: 'mouseenter',
// 特殊効果
effect: true ,
// 表示時間の遅延
lay: 90,
// 他のプロンプトを非表示
solo: false,
// プロンプトを表示ページのロード後
ready: false,
modal: {
// モーダルダイアログ効果を有効にする
on: false,
// 特殊効果
effect: true,
blur: true,
escape: true
}
},
// プロンプトを非表示にするための関連設定
// show を参照
hide: {
target: false ,
event: 'mouseleave',
effect: true,
lay: 0,
// true に設定すると非表示になりません
fixed: false,
inactive : false,
leave: 'window',
distance: false
},
// スタイル関連
style: {
// スタイル名
クラス: '' ,
widget: false,
width: false ,
height: false,
// ヒントプラグイン、矢印関連の設定
tip: {
corner: true,
mimic: false,
width: 8,
height : 8,
border: true,
offset: 0
}
},
// 関連イベントバインディング
イベント: {
レンダリング: null、
移動: null、
表示: null、
非表示: null、
切り替え: null、
表示: null、
フォーカス: null、
ブラー: null
}
};
たくさんあるように見えますが、最も頻繁に使用されるパラメーターは次のとおりであると推定されます:

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

 
$.fn.qtip.defaults = { 
content: { 
text: true, 
attr: 'title', 
ajax: false, 
title: { 
text: false, 
button: false 
} 
}, 
position: { 
my: 'top left', 
at : '右下', 
}, 
show: { 
event: 'mouseenter', 
solo: false, 
ready: false, 
modal: false 
} , 
hide: { 
event: 'mouseleave' 
}, 
style: 'ui-tooltip-default' 
}; 

表示位置の場合、次のパラメータを設定できます:

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

 
my = [ 
'左上', '右上', '中央上', 
'左下', '右下', '中央下', 
'中央右', '右上', '右下', 
'左中央', '左上', '左下', '中央' 
] 
at = [ 
'左下', '右下'、'中央下'、
'左上'、'右上'、'中央上'、
'中央左'、'左上'、'左下'、
'右中央' 、'右上'、'右下'、'中央' 
] 

表示されるカラースタイルには次の色があります:

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

 
['red', 'blue', 'dark', 'light', 'green' ,'jtools', 'plain' , 'youtube', 'cluetip', 'tipsy', 'tipped'] 

たとえば、赤は ui-tooltip-red で、これがデフォルトです。さらに、影と角の丸い効果をそれぞれ表す ui-tooltip-shadow と ui-tooltip-rounded があり、次のように重ね合わせることができます:

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

 
$("#demo2").qtip({ 
content: "これはヒントの内容です (by 囧月) " 
、スタイル: { 
クラス: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded' 
} 
}); 

さらに、ajax の場合、次の主要パラメータを設定できます (jQuery.ajax と一致):

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

 
$ ('.selector').qtip({ 
content: { 
text: 'Loading...', // テキストを読み込み中... 
ajax: { 
url: '/path/to/file', // JSON スクリプトへの URL 
type: 'GET', // POST または GET 
data: { id: 3 }, // リクエストと一緒に渡すデータ 
dataType : 'json', // JSON を取得していることを伝えます 
success: function(data, status) { 
//... 
} 
} 
} 
} ); 

AJAX はデフォルトで GET リクエストを使用し、キャッシュが有効になっていることに注意してください。
終了
qTip2 についての紹介です。詳細については、次のリンクを参照してください。
公式 Web サイト: http://craigsworks.com/projects/ qtip2/
オンラインデモ: http://craigsworks.com/projects/qtip2/demos/
公式ドキュメント: http://craigsworks.com/projects/ qtip2/docs /
最後に、簡単なデモを入れます。
著者:囧月