また、ツールチップのオプションとイベント、および要素にツールチップを追加および削除するためのいくつかのツールについても詳しく見ていきます。最後に、1 ページに異なるスタイルの複数のツールチップを表示する方法を学びます。
基本
新しいツールチップの作成
新しいツールチップの作成は簡単です。まず、ツールヒントを追加するリンクを作成しましょう:
参照コード:
MooTools 1.2 ツールチップは、デフォルトでリンク内の title 属性と rel 属性の値を表示します。 rel属性がない場合はhref属性の値が表示されます。
ここで、新しいデフォルトのツールバーチップを作成します:
参照コード:
varcustomTips = $$('.tooltipA');
var toolTips = new Tips(customTips);
スタイルが使用されていないため、次のようになります。
ツールヒント 1
ツールヒントにスタイルを使用する
MooTools では、出力をさまざまに制御できます - ツールヒントの HTML コードを見てみましょう:
リファレンスコード:
// オプション内 >
上部と下部の div に注目してください。これらを使用すると、上部と下部に丸い角やその他のスタイル効果を簡単に追加できます。
次に、最初のオプションを作成し、CSS を追加しましょう。上記の HTML コードは、「options.className」という名前の CSS スタイルでレンダリングされます。ツールチップに CSS クラス名を付けることで、ページ上の他の MooTools ツールチップに影響を与えることなく、独立したスタイルを与えることができます。
参照コード:
背景色: #666
font-size: 20px
padding: 5px
}
.custom_tip .tip-text {
color: #fff
padding: 5px
}
ツール ヒント 2
オプション
ヒント カテゴリには合計 5 つのオプションしかありません。それぞれのオプションは非常にわかりやすい (つまり、一目で意味が理解できます)。
showDelay
デフォルト値は 100 です。
マウスが要素上に移動した後にツールチップが待機する時間を決定するミリ秒単位の整数。
hideDelay
デフォルト値は 100 です。
上記の showDelay と同じですが、この値 (ミリ秒単位) により、マウスが要素から離れたときにツールヒントが非表示になるまでの時間が決まります。
className
デフォルトは null
上の例でわかるように、これにより、ツールチップ コンテナーの CSS クラス名を設定できます。
オフセット
デフォルトは x:16、y:16 です。
これにより要素からツールチップまでの距離が決まります。x 値は要素の右側の距離、y 値は要素から下への距離 (fixed オプションが false に指定されている場合、距離はマウス ポインターを基準としたものになります。それ以外の場合は、要素を基準とした距離になります)。
固定
デフォルトは false
この設定は、マウスが要素上を移動したときにツールヒントがマウスに追従するかどうかを決定します。 true に設定すると、ツールチップはマウス ポインターの動きに合わせて移動せず、要素の近くの固定位置に留まります。
イベント
このクラスの他のすべてと同様、ツールチップ イベントも非常に単純です。 onShow と onHide という 2 つのイベントがあり、期待どおりに機能します。
onShow
このイベントは、ツールバーが表示されるときにトリガーされます。遅延を設定すると、ツールチップが表示されるまでこのイベントが発生します。
onHide
は上記の onShow イベントと同じですが、ツールチップが非表示になったときにトリガーされます。遅延が設定されている場合、このイベントはツールチップが非表示になるまで発生します。
メソッド
Tips クラスには、アタッチとデタッチという 2 つのメソッドがあり、これらの 2 つのメソッドを使用して、指定した要素にツール ヒントを追加したり (もちろん、これらのツール ヒントは同じ設定になります)、または削除したりできます。特定の要素のツールチップ。
.attach();
新しい要素にツールチップを追加するには、Tip オブジェクトの後に .attach(); を追加し、最後にこの要素のセレクターを括弧内に置くだけです。
参照コード:
toolTips.attach ('#tooltipID3');
.dettach();
このメソッドは .attach メソッドと同じですが、動作はまったく逆です。まず、Tip オブジェクトを記述し、要素の後に .dettach(); を追加し、最後にこの要素のセレクターを括弧内に置きます。
参照コード:
toolTips.dettach ('#tooltipID3');
コード例
この例では、2 つの異なるスタイルのツールヒントを使用できるように、Tip プラグインの 2 つの異なるインスタンスを作成します。また、上で見たオプション、イベント、メソッドも統合します。
参照コード:
varcustomTips = $$('.tooltip');
var toolTips = new Tips(customTips, {
// これはツールチップ表示の遅延時間を設定します
showDelay: 1000 , // デフォルトは 100
// これにより、ツールヒントを非表示にするための遅延イベントが設定されます
hideDelay: 100, // デフォルトは 100 です
// これにより、CSS スタイルがツールヒントのコンテナ div に追加されます
// こうすることで、1 つのページに 2 つの異なるスタイルのツールバー ヒントを表示できます
//
className: 'anything', // デフォルトは null
// これにより、x と y が設定されます
offsets のオフセット値: {
'x': 100, // デフォルトは 16
'y': 16 // デフォルトは 16
},
// これはツールを設定します。マウスを追跡するかどうかを確認します
// true に設定すると、マウスは追跡されません
fixed: false, // デフォルトは false です
// この関数をオプション外で呼び出した場合
// そして put この関数はここに残ります
// 点滅し、滑らかなグラデーション効果があります
onShow: function(toolTipElement){
// ツールヒント オブジェクトを渡します
//フェードして完全に不透明にすることができます
// または少し透明にすることができます
toolTipElement.fade(.8);
$('show').highlight('#FFF504'); },
onHide: function(toolTipElement){
toolTipElement.fade(0)
$('hide').highlight('#FFF504');
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', // デフォルトは null
}); .store(); を使用できます。 rel の値を変更するメソッド
// それによってツールチップの値を変更します
// 次のコードを使用できます
$('tooltipID1').store('tip:text', ' href は任意のテキストに置き換えることができます。');
$('tooltipID1').store('tip:title', 'ここに新しいタイトルがあります。'); 次のコードツールチップは変更されません
$('tooltipID1').set('rel', 'これによりツールチップのテキストは変更されません'); ', 'これによりツールヒントのタイトルは変更されません');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4') );
ツールチップ 1
ツールチップが外れています
ツールチップ 3
ツールチップが外れ、再度取り付けられました。
異なるスタイルのツールチップ
さらに詳しく
MooTools ドキュメントの
ヒント セクション
を読んでください。さらに、
Mootools のヒントのカスタマイズ
について David Walsh が書いた非常に優れた記事を次に示します。
必要なものがすべて含まれた zip パッケージをダウンロードします
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
