レスポンシブWebデザイン導入（Parllet の場合 明細表（残高明細）－２） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
sakashushu です。
前回（3/11） からParllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズは明細表篇の中の残高明細篇のブログラミング（ブログを書きながらプログラミング）に入っています。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら
■ 現状
2/7 に現時点のParllet（パレット）（GithubのこのCommitバージョン ）の残高明細（口座系）を元に、スナップショットを兼ねてサンプル残高明細（口座系）１ を作りました。
ここがスタート地点です。
※ ただ、収支明細篇(2/8 ～ 2/25)でいじった部分の影響も受けているため、現時点で若干レスポンシブ化されている部分もあります。
いつものように体当たりで学びながら進めていきます。
（1/11 に提示した新手法の方で実施するので、以前のようにサンプルページを元にして編集はしません。あくまで元になるのはGithubのこのCommitバージョン です。）
■ 体当たり開始
沿っていくのは 2/6の案 ですが 2/15 に決めた通り、表の部分だけは横スクロールする方向性 です。
前回 の最後の状態が以下で、今回は後回しにしたグラフの部分の対応に入ります。
グラフの部分のすぐ下に横スクロールバーがありまして。
その部分は、表のヘッダーと明細行の部分を同時にスクロールさせるために別個で用意してあったものです。
レスポンシブ対応の前は、残高明細では現れない想定でしたが、ほぼ同じ作りの収支明細をコピーして作っているため、今回同じように現れています。
単純にその要素の中にグラフも入れてしまうのが、早いし理にも適っています。
Parllet/app/views/DetailList/dl_remainderBank.html 内での編集（太字の部分）
<div id="dlFooter">
<div id="dlFooterInner">
<div id="dl_tblFrameFt">
<div id="dlRmChartFrame">
<div id="dlRmChart"></div>
</div>
<div id="dl_tblContentFt">
（中略）
</div> <!-- dl_tblContentFt -->
※ #dlFooterInner の直下にあった #dlRmChartFrame 配下を、#dl_tblFrameFt の直下に移動しました。
リロード直後の見た目としては問題ないですね。
今回はここまでで、次回に横スクロール時の動きを見て行きます。
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/3/12）では公開しているParllet（パレット） の方には反映しておりません。
次回に続きます！
3/13 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0