JqueryUI-ツールチップ
jQueryUIのツールチップウィジェットがネイティブのツールチップに置き換わります。このウィジェットは新しいテーマを追加し、カスタマイズを可能にします。まず、ツールチップとは何かを理解しましょう。ツールチップは任意の要素に取り付けることができます。ツールチップを表示するには、入力要素にタイトル属性を追加するだけで、タイトル属性値がツールチップとして使用されます。マウスで要素にカーソルを合わせると、要素の横にある小さなボックスにtitle属性が表示されます。
jQueryUIは提供します tooltip()ツールチップを表示する要素にツールチップを追加するメソッド。これにより、表示を切り替えるだけではなく、デフォルトでツールチップを表示および非表示にするフェードアニメーションが提供されます。
構文
ザ・ tooltip() メソッドは2つの形式で使用できます-
$(セレクター、コンテキスト).tooltip(オプション)メソッド
$(selector、context).tooltip( "action"、[params])メソッド
$(セレクター、コンテキスト).tooltip(オプション)メソッド
ツールチップ(オプション)メソッドは、ツールチップはHTML要素に加えることができることを宣言する。 オプションのパラメータは、ツールチップの動作と外観を指定するオブジェクトです。構文
$(selector, context).tooltip(options);
Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供するオプションが複数ある場合は、次のようにコンマを使用してそれらを区切ります-
$(selector, context).tooltip({option1: value1, option2: value2..... });
次の表に、この方法で使用できるさまざまなオプションを示します。
シニア番号 | オプションと説明 |
---|---|
1 | コンテンツ このオプションは、ツールチップのコンテンツを表します。デフォルトでは、その値はfunction returning the title attribute。 Option - content このオプションは、ツールチップのコンテンツを表します。デフォルトでは、その値はfunction returning the title attribute。これはタイプの可能性があります-
Syntax
|
2 | 無効 このオプションをtrueに設定すると、ツールチップが無効になります。デフォルトでは、その値はfalse。 Option - disabled このオプションをtrueに設定すると、ツールチップが無効になります。デフォルトでは、その値はfalse。 Syntax
|
3 | 隠す このオプションは、ツールチップを非表示にしたときのアニメーション効果を表します。デフォルトでは、その値はtrue。 Option - hide このオプションは、ツールチップを非表示にしたときのアニメーション効果を表します。デフォルトでは、その値はtrue。これはタイプの可能性があります-
Syntax
|
4 | アイテム このオプションは、ツールチップを表示できるアイテムを示します。デフォルトでは、その値は[title]。 Option - items このオプションは、ツールチップを表示できるアイテムを示します。デフォルトでは、その値は[title]。 Syntax
|
5 | ポジション このオプションは、関連するターゲット要素に対するツールチップの位置を決定します。デフォルトでは、その値はfunction returning the title attribute。可能な値は、my、at、of、collision、using、withinです。 Option - position このオプションは、関連するターゲット要素に対するツールチップの位置を決定します。デフォルトでは、その値はfunction returning the title attribute。可能な値は、my、at、of、collision、using、withinです。 Syntax
|
6 | 公演 このオプションは、ツールチップの表示をアニメーション化する方法を表します。デフォルトでは、その値はtrue。 Option - show このオプションは、ツールチップの表示をアニメーション化する方法を表します。デフォルトでは、その値はtrue。これはタイプの可能性があります-
Syntax
|
7 | tooltipClass このオプションは、警告やエラーなどのツールチップ用のツールチップウィジェットに追加できるクラスです。デフォルトでは、その値はnull。 Option - tooltipClass このオプションは、警告やエラーなどのツールチップ用のツールチップウィジェットに追加できるクラスです。デフォルトでは、その値はnull。 Syntax
|
8 | 追跡 このオプションをtrueに設定すると、ツールチップはマウスを追跡/追跡します。デフォルトでは、その値はfalse。 Option - track このオプションをtrueに設定すると、ツールチップはマウスを追跡/追跡します。デフォルトでは、その値はfalse。 Syntax
|
次のセクションでは、ツールチップ機能のいくつかの実用的な例を示します。
デフォルトの機能
次の例は、パラメータを渡さないツールチップ機能の簡単な例を示しています。 tooltip() 方法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$("#tooltip-1").tooltip();
$("#tooltip-2").tooltip();
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Name:</label>
<input id = "tooltip-1" title = "Enter You name">
<p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
I also have a tooltip</a></p>
</body>
</html>
上記のコードをHTMLファイルに保存しましょう tooltipexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-
上記の例では、上のリンクにカーソルを合わせるか、Tabキーを使用して各要素にフォーカスを切り替えます。
コンテンツの使用、追跡、障害者
次の例は、3つの重要なオプションの使用法を示しています (a) content (b) track そして (c) disabled JqueryUIのツールチップ関数で。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-3" ).tooltip({
content: "<strong>Hi!</strong>",
track:true
}),
$( "#tooltip-4" ).tooltip({
disabled: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Message:</label>
<input id = "tooltip-3" title = "tooltip"><br><br><br>
<label for = "name">Tooltip disabled for me:</label>
<input id = "tooltip-4" title = "tooltip">
</body>
</html>
上記のコードをHTMLファイルに保存しましょう tooltipexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-
上記の例では、最初のボックスのツールチップのコンテンツは、コンテンツオプションを使用して設定されています。ツールチップがマウスの後に続くことにも気付くでしょう。2番目の入力ボックスのツールチップは無効になっています。
位置の使用
次の例は、オプションの使用法を示しています position JqueryUIのツールチップ関数で。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
body {
margin-top: 100px;
}
.ui-tooltip-content::after, .ui-tooltip-content::before {
content: "";
position: absolute;
border-style: solid;
display: block;
left: 90px;
}
.ui-tooltip-content::before {
bottom: -10px;
border-color: #AAA transparent;
border-width: 10px 10px 0;
}
.ui-tooltip-content::after {
bottom: -7px;
border-color: white transparent;
border-width: 10px 10px 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-7" ).tooltip({
position: {
my: "center bottom",
at: "center top-10",
collision: "none"
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Enter Date of Birth:</label>
<input id = "tooltip-7" title = "Please use MM.DD.YY format.">
</body>
</html>
上記のコードをHTMLファイルに保存しましょう tooltipexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-
上記の例では、ツールチップの位置は入力ボックスの上に設定されています。
$(selector、context).tooltip( "action"、[params])メソッド
ツールチップ(アクション、paramsは)メソッドは、そのようなツールチップを無効にするようなツールチップ素子上のアクションを実行することができます。ザ・action 最初の引数で文字列として指定され、オプションで1つ以上が指定されます params 与えられたアクションに基づいて提供することができます。
基本的に、ここでのアクションは、文字列の形式で使用できるjQueryメソッドに他なりません。
構文
$(selector, context).tooltip ("action", [params]);
次の表に、このメソッドのアクションを示します-
シニア番号 | アクションと説明 |
---|---|
1 | 閉じる() このアクションにより、ツールチップが閉じます。このメソッドは引数を受け入れません。 Action - close() このアクションにより、ツールチップが閉じます。このメソッドは引数を受け入れません。 Syntax
|
2 | 破壊() このアクションにより、ツールチップ機能が完全に削除されます。これにより、要素が初期化前の状態に戻ります。このメソッドは引数を受け入れません。 Action - destroy() このアクションにより、ツールチップ機能が完全に削除されます。これにより、要素が初期化前の状態に戻ります。このメソッドは引数を受け入れません。 Syntax
|
3 | disable() このアクションにより、ツールチップが非アクティブ化されます。このメソッドは引数を受け入れません。 Action - disable() このアクションにより、ツールチップが非アクティブ化されます。このメソッドは引数を受け入れません。 Syntax
|
4 | enable() このアクションにより、ツールチップがアクティブになります。このメソッドは引数を受け入れません。 Action - enable() このアクションにより、ツールチップがアクティブになります。このメソッドは引数を受け入れません。 Syntax
|
5 | 開いた() このアクションは、プログラムでツールチップを開きます。このメソッドは引数を受け入れません。 Action - open() このアクションは、プログラムでツールチップを開きます。このメソッドは引数を受け入れません。 Syntax
|
6 | option(optionName) このアクションは、ツールチップのoptionNameに関連付けられた値を取得します。このメソッドは引数を受け入れません。 Action - option( optionName ) このアクションは、ツールチップのoptionNameに関連付けられた値を取得します。このメソッドは引数を受け入れません。 Syntax
|
7 | オプション() このアクションは、現在のツールチップオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。このメソッドは引数を受け入れません。 Action - option() このアクションは、現在のツールチップオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。このメソッドは引数を受け入れません。 Syntax
|
8 | option(optionName、value) このアクションは、指定されたoptionNameに関連付けられたツールチップオプションの値を設定します。 Action - option( optionName, value ) このアクションは、指定されたoptionNameに関連付けられたツールチップオプションの値を設定します。 Syntax
|
9 | option(options) このアクションは、ツールチップの1つ以上のオプションを設定します。 Action - option( options ) このアクションは、ツールチップの1つ以上のオプションを設定します。 Syntax
|
10 | ウィジェット() このアクションは、元の要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。 Action - widget() このアクションは、元の要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。 Syntax
|
例
次に、上記の表のアクションを使用した例を見てみましょう。次の例は、アクションdisableおよびenableの使用法を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$("#tooltip-8").tooltip({
//use 'of' to link the tooltip to your specified input
position: { of: '#myInput', my: 'left center', at: 'left center' },
}),
$('#myBtn').click(function () {
$('#tooltip-8').tooltip("open");
});
});
</script>
</head>
<body style = "padding:100px;">
<!-- HTML -->
<a id = "tooltip-8" title = "Message" href = "#"></a>
<input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
<input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
</body>
</html>
上記のコードをHTMLファイルに保存しましょう tooltipexample.htm javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-
上記の例では、myBtnボタンをクリックすると、ツールチップがポップアップ表示されます。
ツールチップ要素のイベント管理
前のセクションで見たツールチップ(オプション)メソッドに加えて、JqueryUIは、特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドを以下に示します-
シニア番号 | イベントの方法と説明 |
---|---|
1 | create(event、ui) ツールチップが作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。 Event - create(event, ui) ツールチップが作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。 Syntax
|
2 | close(event、ui) ツールチップを閉じるとトリガーされます。通常、focusoutまたはmouseleaveでトリガーされます。ここで、eventはEvent型であり、uiはObject型です。 Event - close(event, ui) ツールチップを閉じるとトリガーされます。通常、focusoutまたはmouseleaveでトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。
Syntax
|
3 | open(event、ui) ツールチップが表示または表示されたときにトリガーされます。通常、focusinまたはmouseoverでトリガーされます。ここで、eventはEvent型であり、uiはObject型です。 Event - open(event, ui) ツールチップが表示または表示されたときにトリガーされます。通常、focusinまたはmouseoverでトリガーされます。どこでイベントがタイプのものであり、イベント、およびUIは型であるオブジェクトの.Possible値UIがあります-
Syntax
|
例
次の例は、ツールチップ機能中のイベントメソッドの使用法を示しています。この例は、オープンイベントとクローズイベントの使用法を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$('.tooltip-9').tooltip({
items: 'a.tooltip-9',
content: 'Hello welcome…',
show: "slideDown", // show immediately
open: function(event, ui) {
ui.tooltip.hover(
function () {
$(this).fadeTo("slow", 0.5);
});
}
});
});
$(function() {
$('.tooltip-10').tooltip({
items: 'a.tooltip-10',
content: 'Welcome to TutorialsPoint…',
show: "fold",
close: function(event, ui) {
ui.tooltip.hover(function() {
$(this).stop(true).fadeTo(500, 1);
},
function() {
$(this).fadeOut('500', function() {
$(this).remove();
});
});
}
});
});
</script>
</head>
<body style = "padding:100px;">
<!-- HTML -->
<div id = "target">
<a href = "#" class = "tooltip-9">Hover over me!</a>
<a href = "#" class = "tooltip-10">Hover over me too!</a>
</div>
</body>
</html>
上記のコードをHTMLファイルに保存しましょう tooltipexample.htm javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-
上記の例では、ホバーオーバーミーのツールチップです。ホバーのツールチップもすぐに消えます!1000msの持続時間の後にフェードアウトします。