HTML・レイアウトの操作：
フキダシを追加：直線
CSSの transform と clip を利用したフキダシを指定Nodeに追加する。
フキダシ部の色は、対象Nodeの background の設定を継承する。
Node
Nodeを指定 id値を文字列で指定してもよい
Number
フキダシのサイズを数値で指定 0を指定すると削除処理となる
String
配置方向と配置位置を文字列で指定 半角スペースで区切って渡す ／ 配置位置を省略した場合は 50% となる
- 配置方向 = top・bottom・left・right (大文字・小文字で指定可能) ／ 削除の場合のみ all も使用可能
- 配置位置(%) = 0〜100% (左が0% - 右が100%／上が0% - 下が100%)
- 配置位置(px) = 指定したpx位置に矢印先端を配置する ※はみ出す可能性がある。
●必須引数 ●オプション引数(省略可能)
記述例
$addBalloonA($id('comment_box'), 30, 'top 50%')
$addBalloonA('comment_box', 30, 'top')
$addBalloonA('comment_box', 30, 'bottom 150px')
$addBalloonA('comment_box', 0, 'top')
$addBalloonA('comment_box', 0, 'all')
注意点
対象Nodeが「position: static」の場合には「position: relative」に書き変える。
指定サイズで追加できない場合には、自動的にサイズ調整をして追加する。
動作サンプル
SAMPLE BOX 1
Sass :
#sample1 {
background: #000;
}
Javascript :
$addBalloonA($id('sample1'),25,'top 30%');
$addBalloonA($id('sample1'),15,'right');
$addBalloonA('sample1',0,'top'); $addBalloonA('sample1',0,'right'); //2つの削除処理
SAMPLE BOX 2
Sass :
#sample2 {
background: #8eb8bd;
border: 4px solid rgba(#c6dbde,0.8);
}
Javascript :
$addBalloonA('sample2',25,'top 190px');
$addBalloonA('sample2',15,'left');
$addBalloonA('sample2',20,'right 10px'); //※配置位置をpx指定する場合には指定場所が適切か注意する
$addBalloonA('sample2',0,'all'); //全てのフキダシを削除処理
対象Nodeの背景画像もフキダシに継承する仕様だが、特徴的すぎる画像だと境界は目立つ。
サンプルのような細かいノイズ程度なら問題ない。
SAMPLE BOX 3a
SAMPLE BOX 3b
Sass :
#sample3a {
background: url(../images/addballoona_bg1.png) left top;
background-size: 400px 400px;
}
#sample3b {
background: url(../images/addballoona_bg2.png) left top;
background-size: 26px 26px;
}
Javascript :
$addBalloonA('sample3a',25,'top');
$addBalloonA('sample3b',25,'top');
$addBalloonA('sample3a',0,'top'); $addBalloonA('sample3b',0,'top'); //2つの削除処理
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。