視座Log

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


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


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


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


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


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


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


１）jQueryを読み込む


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


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


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


２）jquery.balloon.jsを読み込む


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


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


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

画像など

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

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

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

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


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

• 
• 
• ツイート