Parllet（個人作成Web家計簿アプリ）の残高表改修－２ [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
sakashushu です。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の、4/28 にポストした改修案 に沿ってのブログラミング（ブログを書きながらプログラミング）。
前回 から始めておりまして、今回が２回目であります。
今回は、4/28 の案の中の
２．金額が０の時も、最低限の高さを持たせて文字が見えるようにする。
に入っていきたいと思います。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら
■ 現状
今回は金額が０の時の動きを見るので、
前回
のユーザー２を例に進めます。
今は、基本的に金額の比率ソックリそのままで高さを設定しています。
そしてご覧のように金額が０の項目は真ん中部分の高さも０になっており、文字が見えません。
最低限の高さを持たせて、文字が見えるようにするというのが今回の目標です。
いつものように体当たりでブログラミング（ブログを書きながらプログラミング）していきます。
■ 体当たり開始
前回
、真ん中部分の高さの合計（intDivBtStkdHt）は決まりました。
今回は真ん中部分の全てのセルに最低限の高さを持たせます。
最低限の高さは、左右端のセルの高さと同じでいいでしょう。
（そうすると、真ん中部分の最低限の高さの合計＝左右端部分の高さの合計になります。
前回
真ん中部分の高さを、左右端部分の高さの２倍にしたのは、残りの半分を金額の比率用に残したかったからでした。）
上記を踏まえ、真ん中部分の高さの合計から予め最低高さ×セル数を引いておきます。
Parllet/app/views/DailyAccount/balanceTable.html
の編集（太字の部分）
<script type="text/javascript">
<!--
var bolDlgFrmUpdMstInsBkem,
（中略）
intBgSizePrlt = ${vBgSizePrlt},
intMinHt; // 真ん中部分の最低高さ(＝左右端部分のセルの高さ)
（中略）
/* divBtStkdRealEach , divBtStkdPrltEach の表示処理 */
function dspBtStkd() {
（中略）
intDivBtStkdHt = jqHt*2*100;
// セルの(ボーダーの高さ＋最低高さ(＝左右端部分のセルの高さ))×セル数を予め引いておく
intMinHt = jQuery('.bt_tbl_each li div').height(); // 真ん中部分の最低高さ(＝左右端部分のセルの高さ)
intDivBtStkdHtReal = intDivBtStkdHt-intLwdaRealSize*(1+intMinHt)*100;
intDivBtStkdHtPrlt = intDivBtStkdHt-intLwdaPrltSize*(1+intMinHt)*100;
（中略）
}
（中略）
// -->
</script>
そして、引いておいた最低限の高さは金額比率の計算の後に足しこんであげます。（実残高とParllet残高、それぞれ編集）
Parllet/app/views/DailyAccount/balanceTable.html
の編集（太字の部分）
/* divBtStkdRealEach の表示処理 */
function dspDivBtStkdRealEach() {
（中略）
for (i=0; i < intLwdaRealSize; i++) {
（中略）
if (intMaxHt < intHt) {
intMaxHt = intHt;
intMaxHtIdx = i;
}
aryIntHt[i] = intHt+intMinHt*100; //真ん中部分の最低高さ(＝左右端部分のセルの高さ)をここで足す
intSumHt += intHt;
（中略）
}
（中略）
}
/* divBtStkdPrltEach の表示処理 */
function dspDivBtStkdPrltEach() {
（中略）
for (i=0; i < intLwdaPrltSize; i++) {
（中略）
if (intMaxHt < intHt) {
intMaxHt = intHt;
intMaxHtIdx = i;
}
aryIntHt[i] = intHt+intMinHt*100; //真ん中部分の最低高さ(＝左右端部分のセルの高さ)をここで足す
intSumHt += intHt;
（中略）
}
（中略）
}
リロードして確認。
金額０の項目も最低限の高さを持ち、文字が見えるようになりました。
はい、今回は以上です！
お疲れ様でした！
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
メール：
sakashushu@parllet.com
ツイッター：
https://twitter.com/sakashushu
フェイスブック：
https://www.facebook.com/shuichi.sakamoto.90
ご連絡・フォロー・友達申請 等、いつでもお気軽にどうぞ！
またお越しくださいませませ！
コメント 0