レスポンシブWebデザイン導入計画（Parllet の場合 設定ページ－１０） [公開アプリ]
もうちょっとだと毎回言ってる気がします。前回 の続きです。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
のレスポンシブ化は、トップページとログインページまでが完了していて、
12/31 から設定ページに入りました。
実装する内容は、12/26 にポストしたものです。
1/7 までで案に沿った内容で実装し、PC上での動作確認までが終わっていたつもりが、
1/8 に Android での確認中に問題が発覚し、前回修正。
原因発覚によって、同時に解消すべき問題も見えてきました。
■ ざっくり環境
OS：Windows 7 Home Premium
ブラウザ：IE 11.0
Android：2.3.3（HTC Desire HD 001HT）
■ 現状
12/31 に、現時点の設定ページを元にスナップショットを兼ねてサンプル設定ページ１を作りました。
ここがスタート地点です。
今回も体当たりで学びながら進めていきます。
■ 体当たり開始
前回 修正したバグの原因発覚によって見えてきた、同時に解消すべき問題は、
動的に追加した #bt-menu の配下の要素なのにイベントが
jQuery.live() の jQuery.on() での書き方になってないものが、他にも３箇所あること。
リンク（ jQuery('#bt-menu').find('ul').find('a') ）のクリックイベントと、
ボックス（ jQuery('#bt-menu').children('.divUlFrm') ） のタッチスタート・タッチムーブイベント。
● 先にボックスの方を
リンクの方は、記述の置き換え方の調査が要るかもなので、先にボックスの方を修正します。
編集前
var box = jQuery('#bt-menu').children('.divUlFrm'),
touchStartPositionX,
（中略）
box.on('touchstart', function(e) {
（中略）
startScrollX = box.scrollLeft();
startScrollY = box.scrollTop();
});
box.on('touchmove', function(e) {
（中略）
box.scrollLeft(moveScrollX);
box.scrollTop(moveScrollY);
});
編集後
var touchStartPositionX,
（中略）
jQuery(document).on('touchstart', '#bt-menu .divUlFrm', function(e) {
（中略）
startScrollX = jQuery(this).scrollLeft();
startScrollY = jQuery(this).scrollTop();
});
jQuery(document).on('touchmove', '#bt-menu .divUlFrm', function(e) {
（中略）
jQuery(this).scrollLeft(moveScrollX);
jQuery(this).scrollTop(moveScrollY);
});
Android でスライドするかチェックできるように、
サンプル設定ページ１ のソース内で、一時的にメニュー数を増やします。
（大分類（設定）・小分類（口座）共にその他をいっぱい足しました。）
では確認です。
大分類（設定）をクリックして、
タッチでスクロール。
今度は小分類（口座）をクリックして、
同じようにタッチでスクロール。
オッケーですね。
● 次はリンクを
それじゃあ、リンクの方ですね。
調査が要るかもというのは、私が普段あんまり使ってない jQuery.find() ってやつを使ってたからです。
はい、jQuery.find() ってやつという書き方で気づいた方もいるかもですが
私、jQuery.find() の意味をウロ覚えです。
何か理由があって、それ使ったと思うんだけど、なんだっけな？
「jQuery find」で検索。
jQueryのメソッドfind()とchildren()は、ともに指定した要素が持つ子要素を取得するためのものですが、children()が直下の要素だけを取得するのに対し、find()は全ての子要素を探索するという違いがあります。
via: [jQuery] find()とchildren()の使い分け | きほんのき
はい、思い出しました。
単純に、#bt-menu から一足飛びに取得したかっただけでした。
それなら、セレクタとしての書き方は半角スペースで区切って子孫要素を取るから、
children() でも find() でも同じ置き換え方で大丈夫ですね。
jQuery('#bt-menu').find('ul').find('a').click(function(ev) {
↓
jQuery(document).on('click', '#bt-menu ul a', function(ev) {
大分類（設定）のクリックでスライドメニューを開いて、
リンク（今回は残高表）をクリック。
む！ オーバーレイ（これは最前面のアラートのオーバーレイ ^^; ）の後ろで、
スライドメニューが開いたままですね。
オーバーレイを閉じても・・・、
やっぱ閉じないですね～。
ん～・・・、でもこのオーバーレイは・・・、
あくまでサンプルページだから、表示しているものだしな。
試しにオーバーレイの起動のための class：clickOverlay を消してみよか。
それでうまく動けば本来の目的は果たしたことになるよね。
サンプル設定ページ１ のソース内の編集
<li><a href="#" class="clickOverlay">残高表</a></li>
↓
<li><a href="#">残高表</a></li>
リロードして大分類（設定）のクリックでスライドメニューを開き、
リンク（残高表）をクリック。
うん、ちゃんとリンクのクリックイベントに止まりますですね。
サンプル設定ページ１ のソース内に、オーバーレイ（アラート）のクリックイベントもあるから、そっちが優先されちゃうってことですね、多分。
まあ、サンプルページという特殊な状況下じゃなかったら、同じリンクに２つの別目的の動きをさせることは稀でしょう。
今回は目的の動きが確認できたので、これでOKとします。
さてさて、長々と続けて参りました設定ページ篇。
一応 12/26 の案を網羅した実装が終わりました。
しかしここまで来るまでに紆余曲折があったので、
次回にちょっとまとめ的なものを作って、
設定ページ篇の完了としたいと思います。
今回の体当たりでの学び
- jQuery の find() は直下だけでなく全ての子要素を取得。
- 動的に id を追加した要素の、jQuery.live() を jQuery.on() の書き方で書いたクリックイベントより、最初から存在する class のクリックイベントが優先されるようである。
次回に続きます！
1/11 追記
続きとして、まとめを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0