レスポンシブ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 に決めた通り、表の部分だけは横スクロールする方向性 です。
前回 の最後の状態が以下で、今回は横スクロール時の動きを見て行きます。
このぐらいまでスクロールした時点で表の右端まで来ていて、
さらにスクロールを続けることでグラフの右端まで来る感じです。
私の感覚としては、表とグラフの幅を揃えたいところです。
CSS もいつも体当たりなので、F12開発者ツールでイロイロいじってみましたが、表の部分は liタグの中に divタグ を横並びにして作っており、一発では幅を取れなさそうでした。
「jquery 子要素 幅」で検索！
しかし、width()は該当する要素の最初にマッチした要素の幅しか取得するができません。なので、一番最初の【ホーム】と書かれている要素しか取得することができません。
そこで、すべての幅を取得するためには以下のことを行います。
（中略）
- 取得した幅サイズを格納するために配列を作る
- 幅取得のために繰り返し処理
- 取得した幅サイズを配列に加える
これをさっきのと合体（謎）したソースコードが以下のようになります。
このような感じになります。一応、メモとして残しときます。何か参考になれば幸いですが、もっとスマートなやり方があれば教えてください。
via: 要素の幅サイズをすべて取得する方法のメモ【jQuery】 - E-riverstyle Vanguard
なるほど。中の要素から順にとって来るしかないみたいですね。
ではそのように取って来るように編集します。
Parllet/app/views/DetailList/dl_header.html 内での追記と編集（太字の部分）
function drawChart() {
（中略）
// 表の幅と合わせる
var childElementWidth = 0;
jQuery("#dlRm_tblContentHd ul li div").each(function(i) {
childElementWidth += jQuery(this).outerWidth();
});
jQuery('#dlRmChartFrame').width(childElementWidth);
// グラフのオプションを指定する
var options = {
width: childElementWidth + 10,
height: 150,
backgroundColor: "white",
pointSize: 5
}
（中略）
}
はい、画像では違いが分からないかと思いますが、表とグラフの幅が同じになってスクロールのズレも無くなりました。
以上、今回はここまでです。
次回に続きます！
3/14 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0