ホームページ >ウェブフロントエンド >CSSチュートリアル >jQuery EasyUI チュートリアル - ツールチップ (プロンプト ボックス)
前の記事では、jQuery EasyUI チュートリアル - ProgressBar (プログレス バー) を紹介しました。次に、jQuery-Tooltip (プロンプト ボックス) コンポーネントを紹介します。仕事中にも非常に役立ちます。
この記事では、jQuery-Tooltip (プロンプト ボックス) の使用例を詳しく紹介し、ステップバイステップのコード実装プロセスを通じて、Tooltip の実装を習得できるだけでなく、ツールチップの実装を向上させることもできます。プログラミングへの関心とフロントエンド開発作業のレベル。
$.fn.tooltip.defaults を使用してデフォルト値オブジェクトをオーバーライドします。 (翻訳者注: バージョン 1.3.3 の新しいプラグイン)
ユーザーが要素の上にマウスを移動すると、メッセージ プロンプト ボックスが表示されます。プロンプト ボックスのコンテンツは、ページ内の任意の HTML 要素にすることも、Ajax 経由でバックグラウンド リクエストを送信してプロンプト ボックスのコンテンツを取得することもできます。
使用例:
プロンプトボックスを作成する
タグと Javascript の 2 つの方法でプロンプト ボックスを作成します。
1. タグを使用してプロンプト ボックスを作成し、JavaScript コードを使用せずに「easyui-tooltip」というクラス名を要素に追加します。
<a href=”#” title=”This is the tooltip message.” class=”easyui-tooltip”>Hover me</a>
2. Javascript を使用してプロンプト ボックスを作成します。
<a id=”dd” href=”javascript:void(0)”>Click here</a>
$(‘#dd’).tooltip({ position: ‘right’, content: ‘<span style=”color:#fff”>This is the tooltip message.</span>’, onShow: function(){ $(this).tooltip(‘tip’).css({ backgroundColor: ‘#666′, borderColor: ‘#666′ }); } });
属性:
イベント:
メソッド:
上記は、jQuery EasyUI チュートリアル - ツールチップ (プロンプト ボックス) の内容です。その他の関連コンテンツについては、注意してください。 PHP 中国語 Web サイト (www.php.cn)!