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