良い一日。
私は招待をもたらした投稿を公開することにしました。
JS
jQueryライブラリーのウィジェットの最近の作業が終了しました。 もちろん、現時点では類似物がありますが、ここでもいくつかを示します。 しかし、すべての実装には、特定の欠点と欠陥がありますが、残念ながら、この実装はいくつかの問題を回避しませんでしたが、その利点はすべての欠陥で十分にカバーされているようです。 たぶん誰かがそれを好きになるでしょう、そして誰かが実装を修正するか、完了するか、改善することを決めるなら、あなたは歓迎されます。
それでは始めましょう。
最初から、ソースコードをダウンロードするためのページへのリンク：
download 。
また、すぐに、ソースコードの例とデモと例が掲載されたページ：
例ツールチップが機能するには何が必要ですか？ これを行うには、JQuery 1.3ライブラリ自体が必要です（最新バージョンは
こちらから入手でき
ます ）
。Positionプラグインは、この
wikiページからさらに読むことができます
。Templateプラグインでは、テンプレート文字列を指定できます。
設置
ツールチップのインストールは、他のjqueryウィジェットと同じくらい簡単です。 必要なのは、
jquery.jtooltip.cssスタイル
ファイルだけでなく、
jquery.jtooltip.jsファイルを
Javaスクリプトに含めることだけ
です 。
< script type ="text/javascript" src ="jqueryJS/jquery-1.3.2.min.js" ></ script >
<script type= "text/javascript" src= "jqueryJS/jquery-ui-1.7.2.custom.min.js" ></script>
<script type= "text/javascript" src= "jqueryJS/jquery.bgiframe.js" ></script>
<script type= "text/javascript" src= "jqueryJS/jquery.template-0.3.js" ></script>
<script type= "text/javascript" src= "jqueryJS/jquery.ui.position.js" ></script>
<script type= "text/javascript" src= "jqueryJS/jquery.jtooltip.js" > </ script >
< link type ="text/css" rel ="stylesheet" href ="jqueryCSS/jquery-ui-1.7.2.custom.css" />
< link type ="text/css" rel ="stylesheet" href ="jqueryCSS/jquery.jtooltip.css" />
* This source code was highlighted with Source Code Highlighter .< script type ="text/javascript" src ="jqueryJS/jquery-1.3.2.min.js" ></ script >
<script type= "text/javascript" src= "jqueryJS/jquery-ui-1.7.2.custom.min.js" ></script>
<script type= "text/javascript" src= "jqueryJS/jquery.bgiframe.js" ></script>
<script type= "text/javascript" src= "jqueryJS/jquery.template-0.3.js" ></script>
<script type= "text/javascript" src= "jqueryJS/jquery.ui.position.js" ></script>
<script type= "text/javascript" src= "jqueryJS/jquery.jtooltip.js" > </ script >
< link type ="text/css" rel ="stylesheet" href ="jqueryCSS/jquery-ui-1.7.2.custom.css" />
< link type ="text/css" rel ="stylesheet" href ="jqueryCSS/jquery.jtooltip.css" />
* This source code was highlighted with Source Code Highlighter .
いくつかの要素にツールチップを作成するには、1行のコードを実行するだけです
$( '#set1 *' ). jtooltip();
* This source code was highlighted with Source Code Highlighter .
同時に、ツールチップのテキストはデフォルトで要素のtitle属性から取得されます。その後、この属性は削除され、標準のブラウザツールチップが表示されなくなります。
パラメータ：
すべてのパラメーターは次のように表示されます。パラメーター名：標準値
- 遅延：200
ツールチップは、値で指定された短い遅延の後に表示されます。 遅延を削除する場合は、このパラメーターの値を0に設定します。
- フェード：false
デフォルトでは、ツールチップは効果なしで表示されます。このパラメーターを任意の数に設定すると、ツールチップがスムーズに表示されます。 詳細については、フェードイン効果のページをご覧ください。
- tooltipClass： "ui-widget-content ui-corner-all"
ツールチップの標準ビューをカスタマイズまたは変更する場合は、このパラメーターを変更し、クラスを追加して、ツールチップを配置すると便利です。
- テンプレート：「{タイトル}」
テンプレート行はJSONパラメーターを受け取り、この行で指定されたルールに基づいて出力行を形成します。 詳細と例については、テンプレートプラグインを参照してください。
このパラメーターの標準値を変更する場合、loadURLパラメーターの1つを設定するか、getJSONparamsコールバック関数を記述して、ウィジェットがJSONパラメーターを取得できるようにしてください
- loadURL： ""
サーバーからJSONデータをダウンロードするURL。 コールバック関数を記述する場合、getJSONparams jTooltipはこの関数を呼び出して、サーバーに送信するためのクライアントパラメーターを取得します。
- ツールチップの位置：
表示される要素に対するツールチップのオフセットを指定します
top：10 // y軸に沿ってオフセット
左：15 // x軸のオフセット
position_at： 'right bottom'、 //これは位置プラグインのatパラメーターです
position_my： 'left center'、 //これは位置プラグインの私のパラメーターです
パラメーター値のすべての可能なオプションについては、 位置プラグインを参照してください。
- id： "tooltip"
この要素の後にツールチップを作成すると、ウィジェットはdiv要素を追加し（追加されたすべてのdiv要素にはクラス " ui-tooltip "があります）、要素のidとこのidパラメーターで構成されるidも与えます。 要素にパラメーターID値が含まれていない場合、ウィジェットは現在の日付の関数getMilliseconds（）への一意の呼び出しを作成することに注意してください。
方法
表示 -ツールチップをプログラムで表示します
$(selector).jtooltip( "show" );
* This source code was highlighted with Source Code Highlighter .
非表示 -開いているツールチップをプログラムで非表示にします
$(selector).jtooltip( "hide" );
* This source code was highlighted with Source Code Highlighter .
イベント：
Onshow-ツールチップが表示されたときに発生します
jtt.bind( 'onshow' , function () {
//print code here for action on tooltip showing
} );
* This source code was highlighted with Source Code Highlighter .
Onhide-ツールチップが非表示になるとトリガーします
jtt.bind( 'onhide' , function () {
//print code here for action on tooltip showing
} );
* This source code was highlighted with Source Code Highlighter .
多くのコード例がサンプルページに提供され
ています 。
ツールチップの詳細については、
このページを参照し
てください 。
ご質問がある場合は、お問い合わせください。
PSコメント、修正、またはエラー、欠陥、開発支援の兆候さえも大歓迎です。
PPS残念ながら、jQueryブログに投稿するのに十分なカルマがありませんでした。