レスポンシブWebデザイン導入計画を適用（Parllet の場合 設定ページ－４） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; ）
前回の続きです。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
に適用させていく内容のブログラミング（ブログを書きながらプログラミング）です。
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
■ スタート地点
12/31 ～ 1/11 と同様に、最初にスタート地点としてのサンプルページを提示します。
元になった、ParlletのGithub公開リポジトリのCommitバージョンはこちら。
ここがスタート地点です。
■ 体当たり開始
● 1/7 の内容を適用
メニューをヘッダーの前に出す対応は、
1/1 の内容適用のこの辺での追記場所によって上手くいってるのでここでは必要なし。
次は id: bt-menu の削除ですね。
大分類（設定）のクリック時には、.large_cate に対して
id: bt-menu を追加することでスライドメニュー化しました。
その意図は小分類（口座）との切り替えを可能にするためです。
（口座をクリックした時は、同じ位置に別のスライドメニューが開くようにする。）
なので、スライドメニューを閉じる時に、追加した
id: bt-menu を削除してあげなければいけません。
Parllet/public/javascripts/AnimatedBorderMenus/jquery.borderMenuPrlt.js 内の編集。
var eventtype = mobilecheck() ? 'touchstart click' : 'click',
resetMenu = function() {
jQuery('#bt-menu').removeClass('bt-menu-open');
jQuery('#bt-menu').addClass('bt-menu-close');
if (typeof jQuery('.large_cate').attr("id") != 'undefined') jQuery('.large_cate').removeAttr('id');
};
1/7 と同様に、id 要素がある時だけ削除にしました。
id が削除されるかの確認の画像は項目（支出）のリストページで。（実際には全ての小分類のページで確認しました。）
大分類（設定）のクリックで id が追加されてメニューが開き、
メニューを閉じたら、ちゃんと id が削除されるところまで確認できました。
次は、小分類（口座～会員情報）で同じことができるようにする作業。
1/4 の内容適用のこの辺の大分類と同様に加工して、小分類用のスライドメニューを配置します。
Parllet\app\views\Config\cf_main.html に以下のように追記（太字の部分）。
#{extends 'main.html' /}
<style>
（中略）
</style>
#{set 'slideMenus'}
<nav class="bt-menu large_cate">
（中略）
</nav>
<nav class="bt-menu small_cate">
<a href="#" class="bt-menu-trigger"><span></span></a>
<div class="divUlFrm">
<ul>
<li></li>
<li><a href="@{Config.cf_bank_list()}">&{'HandlingType.bank'}</a></li>
<li><a href="@{Config.cf_creca_list()}">&{'HandlingType.creca'}</a></li>
<li><a href="@{Config.cf_emoney_list()}">&{'HandlingType.emoney'}</a></li>
<li><a
href="@{Config.cf_item_in_list()}">&{'views.config.cf_item'}(&{'BalanceType.in'})</a></li>
<li><a
href="@{Config.cf_item_out_list()}">&{'views.config.cf_item'}(&{'BalanceType.out'})</a></li>
<li><a href="@{Config.cf_parllet_list()}">&{'PrltType.prlt'}</a></li>
<li><a href="@{Config.cf_hauser_edit()}">&{'views.config.cf_hauser'}</a></li>
</ul>
</div>
<div class="bt-overlay"></div>
</nav>
#{/set}
#{set 'moreMenu'}
#{include 'headerMenu.html' /}
#{/set}
クリックイベントを大分類と切り替えるのは、1/4 の内容適用のこの辺 で
最終形（1/11版）で取り込んでいるので出来ているはず。
なので、ここでは閉じる時に id を削除する動きを追加します。
Parllet/public/javascripts/AnimatedBorderMenus/jquery.borderMenuPrlt.js 内の編集。
var eventtype = mobilecheck() ? 'touchstart click' : 'click',
resetMenu = function() {
jQuery('#bt-menu').removeClass('bt-menu-open');
jQuery('#bt-menu').addClass('bt-menu-close');
if (typeof jQuery('.large_cate').attr("id") != 'undefined') jQuery('.large_cate').removeAttr('id');
if (typeof jQuery('.small_cate').attr("id") != 'undefined') jQuery('.small_cate').removeAttr('id');
};
確認の画像は小分類（Parllet）のリストページで。（実際には全ての小分類のページで確認しました。）
リロード直後は大分類のメニュー（.large_cate）・小分類のメニュー（.small_cate）共に id 無し。
大分類（設定）のクリックで .large_cate に id 追加、メニューを閉じて id削除。
小分類（設定）のクリックで .small_cate に id 追加、メニューを閉じて id削除。
● 1/8 の内容を適用
あ、いや、この回は動作確認してるだけですね。
画像は全く同じ見た目になるので省きますが、
weinre を使って同様の動作確認をしました。
もちろんスライドメニューが閉じてしまう不具合もありません。
● 1/9 の内容を適用
この回が、jQuery.live() の動きをさせる jQuery.on() の
２番目の引数がセレクタでなくjQueryオブジェクトになっちゃってた
ことに気付いた回です。
この回に修正した部分は、1/4 の内容適用のこの辺 で既に適用しています。
● 1/10 の内容を適用
おっと、この回に修正した部分も同様ですね。
1/4 の内容適用のこの辺 で既に適用しています。
はい、適用に関してはこれで全て終わったことになります。
■ 新手法の5.
「新手法の5. って何だよ！」って感じですか？
お手数ですが 1/16 にの最初の方をご覧くださいね。
今回は、今までの手法を実施した上でさらに新手法を実施したので
この時点でのサンプルページは 1/11 の最後の方で作成したものと全く同じモノになります。
ので、改めては作りませんが、1/11 に提示したページを一応ここにも載せておきます。
改修後のサンプル設定ページです。（PCブラウザからの方は幅をいろいろ変えてみて下さい）
一応念のため。あくまでもローカル開発版を元にしたサンプルページなので、公開している Parllet（パレット） は相変わらずスマホ・タブレットからは使えません。
ちなみに、1/16～今回の、レスポンシブWebデザイン導入計画を適用篇で実施他内容をコミットした
ParlletのGithub公開リポジトリのCommitバージョンはこちら。
※ 公開リポジトリにはパスワード情報等の入った application.conf を上げていないため、そのまま動かすことは出来ません。その辺に関しても、いい方法が無いか考えたいとは常々思ってるんですが、今のところいい方法を考えついていません。申し訳ないです。
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/1/19）では公開しているParllet（パレット）の方には反映しておりません。
以上でレスポンシブWebデザイン導入計画を適用（Parllet の場合 設定ページ）篇、完了です！
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0