レスポンシブWebデザイン導入計画を適用（Parllet の場合 設定ページ－２） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; ）
はい、前回の続きです。
一応今回も微妙なタイトルの説明を。
12/31 ～ 1/11 に記載した内容を、Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
に適用させていく内容のブログラミング（ブログを書きながらプログラミング）です。
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
■ スタート地点
12/31 ～ 1/11 と同様に、最初にスタート地点としてのサンプルページを提示します。
元になった、ParlletのGithub公開リポジトリのCommitバージョンはこちら。
ここがスタート地点です。
■ 体当たり開始
● 1/2 の内容を適用
Parllet\app\views\Config\cf_main.html 内の <style> ～ </style> の部分に追記。
/* 共通のスタイル */ に追記
body {
min-width: 0;
}
#hdContainer, #main, #cfHeader, #ftContents {
width: 95%;
}
#cfMain {
width: 100%;
}
#hdContainer, #main, #cfHeader, #cfMain, #ftContents {
max-width: 980px;
}
確認の画像は電子マネーのリストページで。
（実際には全ての小分類のページで確認しました。）
● 1/4 の内容を適用
1/4 には、サンプル設定ページ１ のソース内にスライドメニューの要素を挿入していますが、
1/7 に開いたスライドメニューよりヘッダーが手前に出たことへの対応
として挿入位置を変更しているので、それに準じた場所に挿入します。
挿入位置は<div id="container"> の上なので、Parllet（パレット）では
Parllet/app/views/genMain.html になります。
しかしこれは全てのページの継承元になるので、直接記載は得策ではありません。
Play framework の、組込みテンプレートタグget
set
を利用して、設定ページの時だけ差し込むようにします。
参考：組込みテンプレートタグ - Play Framework
（上記参考は 2014/1/17 現在は Play! の1.2.7 のドキュメントです。私が使っているのは 1.2.4 です。）
Parllet/app/views/genMain.html には、以下のように追記（太字の部分）。
#{get 'fbScript' /}
#{get 'slideMenus' /}
<div id="container">
（中略）
</div>
Parllet\app\views\Config\cf_main.html には、set で記述しますが、
中身の記述で変える部分を先にチェックします。
1/4 に サンプル設定ページ１ のソース内に挿入したのは以下。
<nav class="bt-menu large_cate">
<a href="#" class="bt-menu-trigger"><span></span></a>
<div class="divUlFrm">
<ul>
<li></li>
<li><a href="#" class="clickOverlay">残高表</a></li>
<li><a href="#" class="clickOverlay">日計表</a></li>
<li><a href="#" class="clickOverlay">明細表</a></li>
<li><a href="#" class="clickOverlay">家計簿入力</a></li>
<li><a href="#" class="clickOverlay">設定</a></li>
</ul>
</div>
<div class="bt-overlay"></div>
</nav>
スライドメニューとしての機能を持つ枠組みはそのまま利用で編集の必要は無さそう。
リストの中身を変えるだけですね。
サンプルだったのでリンク先は "#" 固定で class:clickOverlay も付いていますが、
実際にはPCサイズでのメニューと同等の機能が必要です。
ただボタンの色は不要なので、Parllet/app/views/headerMenu.html 内の
リストの aタグ の部分だけコピペします。
上記を踏まえ、Parllet\app\views\Config\cf_main.html に以下のように追記（太字の部分）。
#{extends 'main.html' /}
<style>
（中略）
</style>
#{set 'slideMenus'}
<nav class="bt-menu large_cate">
<a href="#" class="bt-menu-trigger"><span></span></a>
<div class="divUlFrm">
<ul>
<li></li>
<li><a href="@{DailyAccount.balanceTable()}">&{'views.dailyaccount.balancetable'}</a></li>
<li><a href="@{DailyAccount.dailyAccount()}">&{'views.dailyaccount.dailyaccount'}</a></li>
<li><a href="@{DetailList.dl_balance()}">&{'views.detaillist'}</a></li>
<li><a href="#" id="aRecEdit">&{'views.login.recordEdit'}</a></li>
<li><a href="@{Config.cf_bank_list()}">&{'views.config.config'}</a></li>
</ul>
</div>
<div class="bt-overlay"></div>
</nav>
#{/set}
#{set 'moreMenu'}
#{include 'headerMenu.html' /}
#{/set}
そしてここで、stylePrlt.css 内の #divUlFrm を .divUlFrm に変更しています。
（大晦日の大失敗発覚を受けて立てた方針：CSS セレクタとして使用するときは極力 class を使う に拠って。）
Parllet（パレット） の場合は、既に id="divUlFrm" で書いてる他の場所も class="divUlFrm" に書き直さねばです。
一応念のためにParllet フォルダの中を "divUlFrm" で grep です。
はい、トップページの１箇所だけですね。
Parllet/app/views/PrltRt/index.html 内の編集。
<div id="divUlFrm">
↓
<div class="divUlFrm">
よし。改めて、Parllet/public/stylesheets/AnimatedBorderMenus/stylePrlt.css 内の編集。
.bt-menu #divUlFrm {
（中略）
}
.bt-menu.bt-menu-open #divUlFrm {
（中略）
}
↓
.bt-menu .divUlFrm {
（中略）
}
.bt-menu.bt-menu-open .divUlFrm {
（中略）
}
※ 特に画像は載せませんが、ここでトップページの動作がおかしくなっていないかの確認は済ませました。
そして、ここで見た目をチェックしたんでした。
1/4 と同様にトリガーを消します。
Parllet\app\views\Config\cf_main.html 内の <style> ～ </style> の部分に追記。
/* 共通のスタイル */ に追記
.bt-menu-trigger {
display: none;
}
で、ここからイベント。
あ、
大分類（設定）に id を追加
<a href="#" id="aLarge_cate">設定</a>
ってここでやってますが、昨日の時点で id 入っちゃってますね ^^; 飛ばします。
Parllet/public/javascripts/AnimatedBorderMenus/jquery.borderMenuPrlt.js 内の編集。
大分類（設定）のクリックイベントを追加し、その中で大分類の
スライドメニューに id：bt-menu を追加。
さらに追加したばかりのスライドメニュー要素内のトリガーのクリックイベントを発動。
ここで jQuery.bind で記載して何も起こらず、jQuery.on を知ったのでした。
手順が抜けないように同じ順番で適用してきていますが、この箇所は現時点で
最終形（1/11版）で取り込んでも問題無さそうなので、そうします。
function init() {
var menu = jQuery('#bt-menu'),
trigger = menu.children('a.bt-menu-trigger'),
link = menu.find('ul').find('a'),
// event type (if mobile use touch events)
eventtype = mobilecheck() ? 'touchstart click' : 'click',
（中略）
jQuery('#aLarge_cate, #aSmall_cate').on(eventtype, function() {
var strCate = this.id==='aLarge_cate' ? '.large_cate' : '.small_cate';
jQuery(strCate).attr('id', 'bt-menu');
jQuery('#bt-menu').children('a.bt-menu-trigger').click();
return false;
});
trigger.bind(eventtype, function(ev) {
ev.stopPropagation();
ev.preventDefault();
（中略）
}
そして、jQuery.bind() を使ってるところは全て jQuery.on() に置き換えましたが、
1/4 の置き換え方は間違っていた（全部 jQuery.live() の書き方にしちゃってた）ので、
ここでちゃんと必要に応じた書き方で置き換えます。
そして、致命的なミス
引数がセレクタでなく、jQueryオブジェクトになっていた
に関してもここで回避します。
Parllet/app/views/Config/cf_handling_list.html 及び
Parllet/app/views/Config/cf_item_list.html 及び
Parllet/app/views/Config/cf_parllet_list.html 内の編集。
jQuery('.sortable').sortable().bind('sortupdate', function() {
↓
jQuery('.sortable').sortable().on('sortupdate', function() {
Parllet/public/javascripts/AnimatedBorderMenus/jquery.borderMenuPrlt.js 内の編集。
trigger.bind(eventtype, function(ev) {
↓
jQuery(document).on(eventtype, '#bt-menu a.bt-menu-trigger', function(ev) {
overlay.bind(eventtype, function(ev) {
↓
jQuery(document).on(eventtype, '#bt-menu div.bt-overlay', function(ev) {link.click(function(ev) {
↓
jQuery(document).on('click', '#bt-menu ul a', function(ev) {
box.bind('touchstart', function(e) {
↓
jQuery(document).on('touchstart', '#bt-menu .divUlFrm', function(e) {
box.bind('touchmove', function(e) {
↓
jQuery(document).on('touchmove', '#bt-menu .divUlFrm', function(e) {
1/4 の内容の適用としてはここまなので動きの確認はできませんが、 続きは次回とします。
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/1/17）では公開しているParllet（パレット）の方には反映しておりません。
次回に続きます！
1/18 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0