オンラインで実行 ※ version: 1.1.2 - 2017/04/30 を使用して調整してます 画像を使用するので、文字列と共存する為に手動で調整が必要です。その為、実際に DIV 内にコンテンツを作成して調整終了後、display:none で非表示にします。そして、jQuery の .html() で HTML 定義を取得して、contents プロパティにセットします。 tipSize は、0 に設定しないと、吹き出し用の三角部分が表示されて動作がおかしくなる可能性があります。 その為プラグイン側の処理は単純になっており、殆どは CSS の定義に依存しています
▼ マウスオーバーでバルーンが表示されます プラグインダウンロードページ ▼ コンテンツ用( 実際は display:none で非表示にしておく )画像吹き出し内
の中央に文章を配置
しています
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://winofsql.jp/js/jquery.balloon112.js"></script>
<style type="text/css">
/* 画像用のコンテナです */
.balloonbox {
/* 背景画像のみ指定しています */
background: url(https://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
/* 画像サイズに合わせています */
width: 323px;
height: 278px;
/* vertical-align を指定できるようにする為に必要 */
display: table-cell;
/* 内部文字列を縦方向に中央に表示する為 */
vertical-align:middle;
}
/* 文字列部分のコンテナです */
.ballooninbox {
/* 幅を設定します。高さは文字列に依存します */
width: 300px;
/* border の太さを0にすると、点線が消えます */
border: dashed 1px #B8561D;
font-weight: bold;
font-size: 24px;
}
/* 文字列部分の配置用クラスです */
.balloonalign {
/* 文字列を中央に */
text-align: center;
/* PRE 全体を DIV 内で中央にして、上下調整を 30px で行っています */
margin: 30px auto 0;
}
</style>
<script type="text/javascript">
$(function() {
$('#image_balloon').balloon(
{
html: true,
contents: $("#balloon_contents").html(),
position: "bottom",
offsetX: 100,
tipSize: 0,
css: null
}
);
});
</script>
<pre>
▼ マウスオーバーでバルーンが表示されます
<a id="image_balloon" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">プラグインダウンロードページ</a>
▼ コンテンツ用( 実際は display:none で非表示にしておく )
<div id="balloon_contents" style='border:solid 1px #c0c0c0;width:323px;'>
<div class='balloonbox'>
<pre class='ballooninbox balloonalign'>画像吹き出し内<br>の中央に文章を配置<br>しています</pre>
</div>
</div>
</pre>
上下配置の為に 『display:table-cell』 と 『vertical-align:middle』を使用しているのですが、本来の contents エリアは内部的に position:absolute の為、display:table-cell が適用されないので、ラッパーをコンテンツ内に配置し、文章はさらにその中の PRE 要素で設定しています。 上下位置の微調整の為、.balloonalign 内の margin でさらに調整して画像の中央に文字列を配置しています。 関連する記事 CSSの 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
|
|
【プラグイン:jQueryの最新記事】
- jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
- JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする
- かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン
- jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。
- テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました
- jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
- jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方
- 使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
