サエラプランニング

1 | 2 | 3 | 4 | 5 |最初 次ページ >>
2011-12-01 00:46:15

画像を使わず、jQueryでフキダシを表示する jquery.balloon.js

テーマ:Web制作
またブログの更新を滞らせておりますが、
お陰様で、日々、いろいろなお仕事をさせていただいてます。


講師とか解析とかFacebookページ作ったりとか制作したりとか。


今年は講師業務が多くあったこともあり、jQueryもちと真面目に勉強し、
いろいろなサンプルを作ったりしておりました。


その中で、便利~!と嬉しかったものをご紹介させていただきますね。


表題の通り、画像を使わずにフキダシを表示するjQueryのプラグインです。


ダウンロードとデモは、こちらから
設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.jsを公開


使い方は、1)jQueryを読み込み、2)プラグインのjsを読み込み、3)フキダシを表示したいセレクタと表示オプションをjQueryで指定するという3ステップです。


1)jQueryを読み込む


jQueryのサイトの「Download(jQuery)」というボタンから、jqueryのjsファイルをダウンロードしてきてください。


ボタンの上に、PRODUCTION と DEVELOPMENT というチェックボタンがありますが、どちらでも構いません。違うのはファイルサイズで、内容は同じです。


ダウンロードしたjqueryファイル(この記事執筆時点では、jquery-1.7.1.min.js)を、使いたい場所にアップロードして、フキダシを表示させたいhtmlファイルからscriptタグで読み込みます。


2)jquery.balloon.jsを読み込む


こちらの記事から、jquery.balloon.js をダウンロードして、1)と同じ要領でscriptタグで読み込みます。


3)フキダシを表示したいセレクタと表示オプションを指定


2)で読み込んだ後、さらにscriptタグをつくって、表示するフキダシ用の指定を書きます


画像など




$(function() {
$('#box').balloon();
});



フキダシをつけるタグにtitle属性をつけておけば、その内容がフキダシの中に表示されますが、contentsというオプションで指定することもできます。



$(function() {
$('#box').balloon({
contents:'こんな感じ。
タグも使えます'
});
});



また、cssオプションを使えばフキダシのデザインも変えられますし、位置も細かく指定可能。


デモページを見ながら試してみてください☆

Amebaおすすめキーワード

    1 | 2 | 3 | 4 | 5 |最初 次ページ >>
    アメーバに会員登録して、ブログをつくろう! powered by Ameba (アメーバ)|ブログを中心とした登録無料サイト