[glink]のwidth=ボタンサイズとなるよう自動計算する

3/12追記
うん、こんな事しなくても、cssにbox-sizing: border-box;追記すりゃ済むね( ̄▽ ̄;)
まぁ、多少回り道した方が色々勉強になるね。
jqueryで要素サイズ取得出来るってわかったし!(´∀`)

どちらにしても、auto の時は、outerWidth()で拾ってくれると嬉しいな、と思ったりする訳です。


前回のおさらい。
glingにwidth=400と指定すると、ボタンサイズが400+padding+borderとなって、xの計算が面倒だね!というお話。

outerWidth() という便利なものがあったので、width=ボタンサイズとなるよう自動計算してみた!

Config.tjs

;buttonPaddingCal = true; //自動計算するかしないか。

一応切り替えを用意。
ただのテキストなので、trueじゃなくてOKとかでも何でもよさげです。

kag.tag.js

tyrano.plugin.kag.tag.glink の start:function(pm) 内
target_layer.append(j_button); と target_layer.show(); の間に追記。

if(that.kag.config.buttonPaddingCal=="true"){
  var new_width = parseInt(pm.width)-(parseInt(j_button.outerWidth())-parseInt(pm.width));
  var new_height = parseInt(pm.height)-(parseInt(j_button.outerHeight())-parseInt(pm.height));
  if(pm.width!="")j_button.css("width",new_width+"px");
  if(pm.height!="")j_button.css("height",new_height+"px");
};
if(pm.x=="center"){ //センタリング
  var first_left=(parseInt(that.kag.config.scWidth)-parseInt(j_button.outerWidth()))/2;
  j_button.css("left",first_left+"px");
}

target_layer.append(j_button); の上に書くと outerWidth() が正しく取れないみたい。
描画前だからかな?

センタリングは、;buttonPaddingCal = true; があってもなくても width 記述なしでもセンタリングしてくれる。はず。

表示テストの画像貼ってみる。
センターがわかりやすいよう、グリッド画像…だけじゃさびしいのでGoogleMap
glink_test
確認用に、jsでテキストを数値に書き換えています。

.text(w_padding+"/"+new_width+"/"+pm.width+"/"+j_button.outerWidth()+"/"+pm.x+"/"+first_left);
左右のpadding+borer / 計算後のwidth / タグのwidth値 / 実際の枠込サイズ / タグのx値 / 計算後のleft値
※w_padding は確認専用の変数でふ。

ks

[glink  color="blue"  storage="scene1.ks"  size="20"  x="280"  width="400"  y="30"  text="はい。興味あります"  target="*selectinterest"  ]
[glink  color="blue"  storage="scene1.ks"  size="20"  x="305"  width="350"  y="100"  text="興味あります!"  target="*selectinterest"  ]
[glink  color="blue"  storage="scene1.ks"  size="20"  x="auto"  width="500"  y="170"  text="どちらかと言うと興味あり"  target="*selectinterest"  ]
[glink  color="blue"  storage="scene2.ks"  size="20"  x="center"  width="350"  y="240"  text="テストなのだ"  target="*start"  ]
[glink  color="blue"  storage="scene2.ks"  size="20"  x="center"  y="310"  text="テストなのだ"  target="*start"  ]

CSSは padding: 10px 14px 8px 14px;

比較用に、jsを反映しない場合のスクショも貼ってみる。
glink_test_2


2016/8/3 画像のリンク切れ修正。

関連記事

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です