Clever Geek Handbook

Simpletipツールチッププラグイン

画像



jQueryツールの短所、SimpleTipのプラス、およびその使用に関するいくつかの問題を解決する方法についての少し。





最近まで、私は便利で小さなjQuery Tools Tooltipプラグインを使用していました。

そして、私は別のものを見つけることに決めました：



1.テキストはツールチップに表示されます。これは、ツールチップが必要な要素のtitle属性に含まれています。 コンストラクターでtip属性を引き続き渡すことはできますが、テキストだけでなくjQuery selectorを渡す必要があります。 一般に、それはあまり便利ではなく、あまり柔軟でもありません。

2.ツールチップを作成した後、テキストと一般的にツールチップの内容を変更することはできません（ タイトル属性の単純な変更も、コンストラクター$('#email').tooltip();



への後続の呼び出しでも$('#email').tooltip();



ません$('#email').tooltip();



助けにはなりません）。 一般的に、定期的な手段はありません、悲しいです。



ヘルプテキストを更新するだけでよいため（Ajaxを介してサーバーと対話し、ページがオーバーロードしないため）、代替手段を探すことにしました。



ここでそのようなSimpleTipプラグインをGoogleで検索しました



アメニティから：

1.圧縮ファイルの重量は3.3 kBで、ツールツールチップの場合は3.4です。

2.コンストラクターでのテキスト送信$('#email').simpletip({content: 'hello world'});



、そこにhtmlを送信することもできます。つまり、あなたの心が望むものを何でも表示できます。

3.更新によりツールチップのコンテンツを更新する機能update('new content');



、実際に異なるソースから動的にロードできます。

4.より多くの設定とツールチップの動作を制御する機能。



唯一の不快なことは、著者が「任意の要素でツールチップを簡単に作成できる」という保証にもかかわらず、 入力[type = text]要素のプロンプトが表示されないことでした。 firebugでページを表示した後、プラグインがヒントが必要な要素内に非表示のdivを作成することがわかりました。

  1. var tooltip = jQuery （ document。createElement （ 'div' ） ）
  2. ...
  3. 。 appendTo （ elem ） ;
（コードの26行）。



もちろん、 入力内のdivは正しい動きではありません。 したがって、 appendToをinsertAfterに変更すると、入力に対してもプロンプトが表示され始めます。



jqueryuiダイアログでの表示にはわずかな問題もあります 。 それらを正しく表示するには、標準の.tooltipクラスに加えて、 tooltipForDialogBoxなどのクラスを作成する必要があります。 また、ツールチップもダイアログボックスに表示されます。



最後に、メッセージのテキストを変更する必要がある場合は、ツールチップが既に作成されているため、 updateメソッドを使用する必要があります。 既に存在するかどうかを判断するために、次の構成を使用しました。



  1. if （ $ （ '#edit' ） 。 next （ ） 。 hasClass （ 'tooltipForDialogBox' ） ）
  2. {
  3. var tip = $ （ '#edit' ） 。 eq （ 0 ） 。 simpletip （ ） ;
  4. 先端。 更新 （ 「新しいコンテンツ」 ） ;
  5. }
  6. 他に
  7. {
  8. $ （ '#edit' ）
  9. 。 simpletip （ {
  10. コンテンツ： 「最初のコンテンツ」 、
  11. baseClass ： 'tooltipForDialogBox'
  12. } ） ;
  13. }




プラグインページには、優れたAPIとデモがあります。



誰かがこの投稿を役に立たせて時間を節約してくれることを願っています。


More articles:


All Articles