2012-12-21

ブログ初投稿初Advent Calendarです！これをきっかけにHTML5 + CSS3 + JSについて書いていけたらなーと思ってます。

Advent Calendarって何？って方はこちら。

私はあまり知識が深くないので、今までの皆さんと違って軽さ重視で行きます！！
今日はqtipの使い方について簡単にご紹介します。
ご紹介するのはqTip2です。
知ってるよ〜。という方も多いかもしれません。知らなかった〜という方はぜひ見ていってください。

qTipって何？

qTipとは吹き出しをつけるjQueryのプラグインです。
文章に対してつけたり、グラフをhoverすると出るようにしたり、様々な用途で使用できます。

そして今気づいたのですが、jsfiddleが埋め込めないんですねはてなダイアリー・・・・。埋め込めるよ！って見つけたのですがうまくいきませんでした。残念。

どうやって使うの？

さて、本題のqtipの使い方。
使い方はほかのjQuery UIと同じようにとても簡単♪

<a href="#" title="タイトルだよ！">Hello world!</a>

 $("a[title]").qtip();

このような感じに書いてあげます。
上記のようにaタグに対してqtipを設定してあげると、hoverしたときにtitleに設定されている文字が表示されます。

aタグ以外にもつけたいんですけど・・・

そう、みなさん、いつもいつもaタグばかり使ってるわけではありません。時にはdivタグにつけたいときだってあります。
でも同じようにしてみると・・・

<div class="my-qtip-contents">これを表示してほしいなー。</div>

 $("div.my-qtip-contents").qtip();

表示されません。
それもそのはず。さっきはaタグの中身を表示したのではなく、titleを表示しました。中身はqtipには表示されていません。
divタグには中身しかないのですから、表示されません。

じゃあどうやってdivタグにqtipつけるの？

そんなときのoption!!
jQuery UIにoptionがあるように、qtipにもoptionがあります。それはもうたくさんあります。
そんなたくさんのoptionの中でも必須になるであろうoptionを紹介します。

content

contentオプションはqtipに表示する中身に関するoptionです。
contentには以下の設定ができます

text

これがqtipのメインのtextを設定するoptionです。ここに文字列入れてあげると、qtipとして表示されます。

 $("div.my-qtip-contents").qtip({
  content: {
    text: "こんな感じに文字を入れます。"
  }
});

textにはjQuery elementをつけることも可能。

 $("div.my-qtip-contents").qtip({
  content: {
    text: $(".content-text") //class="content-text"のdomを表示したかったらこんな感じ。
  }
});
-attr
これはちょっと特殊。
content.textが与えられていない時にどこからtextを取得したらよいかを示します。
imageなどの注釈にqtipを使いたいとき、alt属性の文字をtextとして認識してほしいときなどに便利。
>>
>|javascript|
 $("img[alt]").qtip({
  content: {
    attr: 'alt'
  }
});

無理やり感が否めませんが、下記のようにdivタグのclass名を表示するなども可能。
おすすめはしません。。

<div class="this-is-text">これを表示してほしいなー。</div>

 $("img[alt]").qtip({
  content: {
    attr: 'class'
  }
});

title

これはqtipのtitleの文字や、右上の×ボタンの表示などを操作できます。

- text

ここにtitleのtextを指定します。falseを指定するとqtipにtitleが表示されません。

 $("img[alt]").qtip({
  content: {
    text: 'ここはメインコンテンツだよ！',
    title: {
      text: "ここはタイトルだよ！"
    }
  }
});

これもcontent.textど同様にjQuery elementをつけることができます。

- button

qtipの右上に表示される×ボタンの表示非表示を変えられます。
文字を指定することで、×ボタンではなく、文字列にすることもできます。

$("img[alt]").qtip({
  content: {
    text: 'ここはメインコンテンツだよ！',
    title: {
      text: "ここはタイトルだよ！",
      button: true //これで×ボタンが出るよ！
    }
  }
});
 $("img[alt]").qtip({
  content: {
    text: 'ここはメインコンテンツだよ！',
    title: {
      text: "ここはタイトルだよ！",
      button: "close" //×ボタンがcloseという文字列に変わるよ！
    }
  }
});

で、結局どうやったらいいの？

お待たせしました！先ほど説明したcontentを使用して、divタグにqtipを表示したいと思います！

<div class="my-qtip-contents">これを表示してほしいなー。</div>

$("div.my-qtip-contents").qtip({
  content: {
    text: "やっぱりこっちを表示しよう！",
    title: {
      text: "titleはこんな感じ。",
      button: true
    }
  }
});

出来上がり！！

最後に

こういう記事を書くのは初めてだったのですが。いかがでしたでしょうか。
ここ、わかりづらいなぁとかありましたらコメントいただけると嬉しいです。
次回は【軽めのjQuery Advent Calendar 22日目】Tomoyuki SUGITAさんです。お願いします！

にっしんげっぽ

qtipの使い方【軽めのjQuery Advent Calendar 21日目】