アシアルの中の人が技術と思いのたけをつづるブログ

ツールチップjQueryプラグイン「qtip」を使ってみました

タグ [　 Tech　 JavaScript　 jQuery　 ラーメン　 ]
皆様、こんばんは。
笹亀です。

先日、自分の開発用のサーバがお亡くなりになられて、悲しい気持ちでちゃんと供養をさせていただきました。
話は変わりますが最近、Safari４が正式リリースされ、早速ダウンロードして使わせていただいております。体感速度で若干速くなったような気がしています。見た目でも変わっていて楽しませてもらっています。

今回は、jQueryのプラグインのひとつで「qtip」を使ってみました。ツールチップ形式でポップアップで手軽に実装でき、奇麗に表示することができるのが特徴です。実際に使用したスクリプトと一緒に使った方法のご紹介をしていきます。

「qtip」を使うには「jquery-1.3.2min.js　jquery.qtip-1.0.0-rc3.min.js」を読み込めばすぐに使えます！下記のURLからダウンロードできます。
http://craigsworks.com/projects/qtip/download/

実際のコードはこのようになります。
  1. <script type="text/javascript">
  2.       jQuery('raumen').qtip({
  3.         content: '<div style="font-size: 80%;color:#ff0000;" align="left">※ここに表示したいHTMLを記載できます</div><img src="***.jpg"></div>'
  4.         ,
  5.         style: {
  6.           width: '250px',
  7.           border: {color: 'green'},
  8.           tip: {corner: 'topLeft'}
  9.         }
  10.         ,
  11.         position: {
  12.           corner:{target: 'bottomLeft'}
  13.         }
  14.         ,
  15.         show: 'mouseover',
  16.         hide: { when: { event: 'mouseout'}, delay: 1500 }
  17.         });
  18. </script>

とっても簡単ですね！

簡単にスクリプトの説明をさせていただきます。
content：アクションを起こしたタイミングで表示される内容を記載します
style：表示する枠のデザインを指定できます
position：表示箇所を指定できます
show：表示するときのアクションを指定します
hide：表示を閉じるときのアクションを指定します


「qtip」で表示した枠内でjavascriptをさらに呼び出すことも可能です。ということは、AJAXのように動的な動作をさせることもできるのです。
  1. <script type="text/javascript">
  2.   jQuery('raumen').qtip(
  3.        {
  4.           content: {
  5.              title: {
  6.                 text: '<strong>西武鉄道 101系・旧塗装 2両セット</strong>',
  7.                 button: '<span style="color:#fff; font-size: 80%;">キャンセル</span>'
  8.              },
  9.              text: 
  10.               '<div>この製品の評価（星の数）を、下記プルダウンメニューから選んで、商品選択ボタンをクリックしてください。</div>' + 
  11.               '<div><select name="rating" id="ss"><option value="5">★★★★★</option><option value="4">★★★★</option><option value="3">★★★</option><option value="2">★★</option><option value="1">★</option><option value="">評価なし</option></select></div>' +
  12.               '<div><input type="button" value="追加する" onclick="addProduct();jQuery(\'.qtip\').hide();" /></div>'
  13.           },
  14.           position: {
  15.             corner: {
  16.                target: 'center', // Position the tooltip above the link
  17.                tooltip: 'center'
  18.             }
  19.           },
  20.           show: {
  21.              when: 'click', // Show it on click
  22.              solo: true // And hide all other tooltips
  23.           },
  24.           hide: false,
  25.           style: {
  26.              width: '400px',
  27.              name: 'dark'
  28.           }
  29.        });
  30. </script>


「qtip」は非常に実装が簡単で使い勝手が良くて気に入っております。ドキュメント非常によくできていてわかりやすいです。(英語ですが。。
オプション設定などの細かい設定の記述方法は下記に記載されています。
http://craigsworks.com/projects/qtip/docs/

サンプルも豊富で下記よりスクリプトも一緒に確認できます。
http://craigsworks.com/projects/qtip/demos/



今回使用した画像で気付かれた方がどのくらいいらっしゃるかわかりませんが、実は弊社で運用している鉄道模型コミュニティサイトのトレイントレインのサイトで実際に使用している箇所を記述しました。トレイントレイン内で「qtip」は利用させていただいております。

この機会に皆さんも是非、ご利用してみてはいかがでしょうか。

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事