jquery.balloon.js のダウンロードと使い方のページ jQuery の .data で保存されるデータは、ロード時に利用しようとするとうまく行かなかったので、外部のオブジェクトとして設定データの一覧を作りました。前提としては、後で変更する事のない詳細説明としてカーソルを合わせる事によって表示されるイベント処理用です。 ポイントは、関係付けるために、id の文字列を利用しています。id 文字列をプロパティとして持つ一般オブシェクトを作成しておいて、変数名["プロパティ名"] で参照する為に、balloon メソッドの引数部分と同じスコープにそれぞれの jQuery オブジェクトが必要になります。 なので、.each を使用していますが、jquery.balloon.js は、そのような場合にもっと簡易的にデータほ設定する方法として、対象オブジェクトの title 属性に HTML レベルで直書きするようになっています。ただ、この場合は HTML 内なので、特殊な文字列は &#nnnn; 形式のエンコードが必要になります。 ▼ 例えば以下は、HTML 内に HTML と JavaScript を記述する例です。
title="<b style='cursor:pointer' onclick='alert("OK")'>ここをクリック</b>"
▼ この下にある画像の上にマウスカーソルを持っていって下さい。
<script>
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.balloon ) {
document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<script>
var contents_text = {
jiyunotsubasa: "TVアニメ『進撃の巨人』第二期オープニングテーマで使用されている書体を真似て作られたフォントです。",
cp_font: "カタカナが、タイトルロゴ「ウルトラクイズ」風"
}
$(function() {
$( ".font_img" ).each( function() {
$( this ).balloon(
{
contents: contents_text[this.id],
position: "top",
tipSize: 20,
offsetY: 18,
offsetX: -10,
css: {
width: "180px",
opacity: "1",
color: "#333",
fontSize: "16px",
borderRadius: "10px",
border: "solid 2px #A63814",
padding: "10px"
}
}
);
});
});
</script>
<pre>
<img class="font_img" id="jiyunotsubasa" src="https://lh6.googleusercontent.com/-ubSOwpnHv_4/Uun7RpSmViI/AAAAAAAASVQ/vx0ucJQoIxw/s280/freefont_logo_jiyunotsubasa.png" style="border: solid 1px #000000" /><img class="font_img" id="cp_font" src="https://lh3.googleusercontent.com/-mHGhQVAlntk/Uun7RvhvkSI/AAAAAAAASVM/Hz3Tsx5suw0/s280/freefont_logo_cp_font.png" style="border: solid 1px #000000" />
<br>
<img class="font_img" title="<b style='cursor:pointer' onclick='alert("OK")'>ここをクリック</b>" src="https://lh6.googleusercontent.com/-ubSOwpnHv_4/Uun7RpSmViI/AAAAAAAASVQ/vx0ucJQoIxw/s280/freefont_logo_jiyunotsubasa.png" style="border: solid 1px #000000" /><img class="font_img" title="普通の直接文字列" src="https://lh3.googleusercontent.com/-mHGhQVAlntk/Uun7RvhvkSI/AAAAAAAASVM/Hz3Tsx5suw0/s280/freefont_logo_cp_font.png" style="border: solid 1px #000000" />
</pre>
関連する記事
|
|
【jQueryの最新記事】
- jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する
- クリックした入力フィールド以外をブラックアウトする jQuery プラグイン
- FORM の内容を localStorage に保存する jQuery プラグイン
- tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン
- 滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll
- jQuery : F1 キーでヘルプを起動させないようにする
- jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する
- jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )
- jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)
- jQuery プラグイン jquery.balloon.js の外部からのコントロール
- NAVER : Image*After の城と教会編
- 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。
- jQuery で書かれた、幻想的な動く星座のようなシーン
- jQuery の addClass で、CSS で作成するサイフの出来上がる過程を見れるようにしました
- jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )
- CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。
- jQuery プラグイン : GoogleVisualization : PieChart : ループ処理を使ったテーブルと円グラフの作成
- jQuery/JavaScript : 新しく開かれたウインドウのウインドウコントロール
- jQuery のアナログ時計
- JavaScript(jQuery 自家製プラグイン) によるIFRAMEの動的実装
