2009年6月10日

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

皆様、こんばんは。
笹亀です。

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

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

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

実際のコードはこのようになります。


<script type="text/javascript">
      jQuery('raumen').qtip({
        content: '<div style="font-size: 80%;color:#ff0000;" align="left">※ここに表示したいHTMLを記載できます</div><a href="https://www.asial.co.jp***.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jp***.jpg"></a></div>'
        ,
        style: {
          width: '250px',
          border: {color: 'green'},
          tip: {corner: 'topLeft'}
        }
        ,
        position: {
          corner:{target: 'bottomLeft'}
        }
        ,
        show: 'mouseover',
        hide: { when: { event: 'mouseout'}, delay: 1500 }
        });
</script>

とっても簡単ですね！

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

「qtip」で表示した枠内でjavascriptをさらに呼び出すことも可能です。ということは、AJAXのように動的な動作をさせることもできるのです。


<script type="text/javascript">
  jQuery('raumen').qtip(
       {
          content: {
             title: {
                text: '<strong>西武鉄道 101系・旧塗装 2両セット</strong>',
                button: '<span style="color:#fff; font-size: 80%;">キャンセル</span>'
             },
             text: 
              '<div>この製品の評価（星の数）を、下記プルダウンメニューから選んで、商品選択ボタンをクリックしてください。</div>' + 
              '<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>' +
              '<div><input type="button" value="追加する" onclick="addProduct();jQuery(\'.qtip\').hide();" /></div>'
          },
          position: {
            corner: {
               target: 'center', // Position the tooltip above the link
               tooltip: 'center'
            }
          },
          show: {
             when: 'click', // Show it on click
             solo: true // And hide all other tooltips
          },
          hide: false,
          style: {
             width: '400px',
             name: 'dark'
          }
       });
</script>