レスポンシブ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
スマホ：Android 4.1.1（freebit mobile PandA）
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら

 

■ 現状

2/7 に現時点のParllet（パレット）（GithubのこのCommitバージョン ）の残高明細（口座系）を元に、スナップショットを兼ねてサンプル残高明細（口座系）１ を作りました。

 

サンプル残高明細（口座系）１

 

ここがスタート地点です。

※ ただ、収支明細篇(2/8 ～ 2/25)でいじった部分の影響も受けているため、現時点で若干レスポンシブ化されている部分もあります。

 

いつものように体当たりで学びながら進めていきます。
（1/11 に提示した新手法の方で実施するので、以前のようにサンプルページを元にして編集はしません。あくまで元になるのはGithubのこのCommitバージョン です。）

 

 

■ 体当たり開始

沿っていくのは 2/6の案 ですが 2/15 に決めた通り、表の部分だけは横スクロールする方向性 です。

 

前回 までで PC 上での動きの確認は終わりましたので、愛機の Android 4.1.1（freebit mobile PandA）での確認に入りたいと思います。

※ 2/26 にはAndroid 2.3.3（HTC Desire HD 001HT）について「今後もまだまだ活躍してもらいます」と書いていましたが、ちょっと前に Desire の方は父親にスマホ体験版として進呈してしまいました ^^;

 

さっそく横スクロールですが、グラフの部分をタップして動かすとスクロールしますが、

 

表の部分をタップしてもスクロールしません。

 

はい、これは収支明細篇のこの辺（2/19）で同様の対応をしましたですね。

ただ、収支明細の方にはグラフが無かったので

if (jQuery('#dl_tblFrameFt').height()!==0) {

で判断していました。

今回は #dl_tblFrameFt の中にグラフを入れているのでこの方法は使えません。

 

そこで、トップページ篇から使わせてもらっている Animated Border Menus の function mobilecheck() を外に出して共通関数として使わせてもらいたいと思います。

※ 11/30 にちょっとだけ触れています。（見通しのために中身は省略していますが・・・。）

 

ということで function mobilecheck() は、Parllet/public/javascripts/AnimatedBorderMenus/jquery.borderMenuPrlt.js から Parllet/public/javascripts/prtJsCommon.js に移動しました。

 

Parllet/app/views/DetailList/dl_header.html 内での編集（太字の部分）

/* 起動時のCSS設定 */

/* 枠固定の左右の動き */
if (!mobilecheck()) {
    jQuery('#dl_tblFrameFt').scroll(function() {
        jQuery('#dl_tblFrame').scrollLeft(jQuery(this).scrollLeft());
        jQuery('#dl_tblFrameHd').scrollLeft(jQuery(this).scrollLeft());
    });
} else {
    jQuery('#dl_tblFrameHd').css('overflow-x', 'scroll');
    jQuery('#dl_tblFrame').css('overflow-x', 'scroll');
    jQuery('#dl_tblFrameHd').scroll(function() {
        jQuery('#dl_tblFrame').scrollLeft(jQuery(this).scrollLeft());
        jQuery('#dl_tblFrameFt').scrollLeft(jQuery(this).scrollLeft());
    });
    jQuery('#dl_tblFrame').scroll(function() {
        jQuery('#dl_tblFrameHd').scrollLeft(jQuery(this).scrollLeft());
        jQuery('#dl_tblFrameFt').scrollLeft(jQuery(this).scrollLeft());
    });
    jQuery('#dl_tblFrameFt').scroll(function() {
        jQuery('#dl_tblFrameHd').scrollLeft(jQuery(this).scrollLeft());
        jQuery('#dl_tblFrame').scrollLeft(jQuery(this).scrollLeft());
    });
}

jQuery('#main').css('padding-bottom', '30px');

 

はい、表の部分をタップしてもスクロールするようになりました。（ヘッダー部分とグラフ部分でも同様です。）

以上、今回はここまでです。

 

次回に続きます！

 

3/15 追記

続きを書きました。

 

---

 

いつも最後まで読んでいただいてありがとうございますm(_ _)m

何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)

またお越しくださいませませ！

 

タグ：公開アプリ ブログラミング 体当たり レスポンシブWebデザイン Parllet jQuery CSS