レスポンシブWebデザイン導入計画（Parllet の場合 設定ページ－６） [公開アプリ]
※ 2014/1/9 追記
この記事の作成時点では誤りに気づいておらず、
jQuery(document).on(イベント, セレクタ, function(){...});
の２番目の引数がセレクタでなく、jQueryオブジェクトになってしまっていました。
詳しくは 1/9 のエントリ をご覧ください。
またまた、前回 の続きです。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
のレスポンシブ化は、トップページとログインページまでが完了していて、
この回 から設定ページに入りました。
実装する内容は、この回にポストしたものです。
前回 までで、タブレットサイズ（768px以下）でヘッダーをパンくずリストにし、
大分類・小分類クリックで開くスライドメニューを体当たりで
取り込んでいますが、今のところまだメニューが開きません。
（ここまでは前回の開始時点とほぼ同じ。メニューを開かせるのに手こずってます。）
■ ざっくり環境
OS：Windows 7 Home Premium
ブラウザ：IE 11.0
■ 現状
この回に、現時点の設定ページを元にスナップショットを兼ねてサンプル設定ページ１を作りました。
ここがスタート地点です。
今回も体当たりで学びながら進めていきます。
■ 体当たり開始
前々回、この回の案のこの辺に入り、大分類と小分類、どちらもクリックした際には、
Parllet（パレット） トップページで導入した（ここら辺）
FacebookやGoogle＋のようなスライドメニューが開いて
分類を変えられるようにします。
その案をちょっとだけ詳細な表現に。
スライドメニューは２つ用意しておき、
大分類と小分類のクリックイベントで自身に対応した
スライドメニューに id を追加して閉じる時に id を削除
大分類（設定）だけの体当たりで、jQuery.bind() を
jQuery.on() に変更してクリックイベントは通るようになり、
jquery.borderMenuPrlt.js 内の変数 menu から派生した変数を、
使用時に生成される jQueryオブジェクトとして書き直しました。
でもまだメニューは開きません。
jQuery のクリックイベント自体は通っているから、
イベント前後にメニューの要素の class がどうなっているか見てみます。
スライドメニューが開くために変更しているのはクリックイベント内の下記の記述です。
jQuery('#bt-menu').addClass('bt-menu-open');
今回は
<nav class="bt-menu large_cate">
に対して動的に id:bt-menu を追加しているので、それを見ます。
クリック前
クリック後
あら～・・・。
全然、クラスに bt-menu-open が追加されてないですね。
それどころか、bt-menu-close が追加されてる (?_?)
bt-menu-close を追加しているのは jquery.borderMenuPrlt.js 内の以下の場所。
resetMenu = function() {
jQuery('#bt-menu').removeClass('bt-menu-open');
jQuery('#bt-menu').addClass('bt-menu-close');
};
そして resetMenu を呼び出しているのは３箇所。
それらにブレークポイントを張って、
再度デバッグ！
むむぅ！とりあえずオーバーレイのクリックイベントで止まりました！？
今はそのまま続行！
ふぅ。
他のブレークポイントには止まらなかったですね。
いやしかし、オーバーレイのクリックイベントで止まるって・・・。
あ、ここで私が言っているオーバーレイとは、スライドメニューを開いた際に
メニューの外側のクリックでメニューを閉じる動きをさせるために、
スライドメニューが開くと同時にスライドメニューの外側を覆う領域のことです。
・・・。
文章にすると分かりづらいですね。
見た目的には、この回のサンプルページでの以下の領域と同様の領域です。
でもこの領域は、メニューのトリガーのクリックがきっかけで開かれる領域なんじゃ・・・。
はい、ちゃんとは分かってないので、stylePrlt.css を見てみます。
.bt-overlay {
position: absolute;
width: 100%;
}
.bt-menu-open .bt-overlay {
height: 100%;
}
なるほど。
スライドメニューに、class：bt-menu-open が追加されて初めて
height: 100%; になるから、それ以前は高さが無いはずなんですよね～。
にも関わらずオーバーレイのクリックイベントで止まった・・・。
ただ、イベントの記載方法は この回 に導入した jQuery.on() だ。
本当は live() を知って調べたんだけど、
これは jQuery 1.9 で廃止になったらしい。
同時に bind() / delegate() も廃止になる。
これら廃止になった3つをまとめたのが on() になる。
つまり、on() を使うと live() / bind() / delegate() の機能を使うことができる。
（中略）
以下のようにすると、動的に生成したボタンにもイベントがバインドされる。
$(function(){
$(document).on('click', '.btn', function(){
alert();
});
});
もしかして・・・、
動的に生成したボタンにもイベントがバインドされる
って、クリックした後にその場所に出現した要素もクリックしたことになっちゃうってこと？
ちょっと微妙な仕様（またはバグ？）の気がするけど・・・、
※ 2014/1/9 追記
この記事の作成時点では誤りに気づいておらず、
jQuery(document).on(イベント, セレクタ, function(){...});
の２番目の引数がセレクタでなく、jQueryオブジェクトになってしまっていました。
詳しくは 1/9 のエントリ をご覧ください。
とにかく jQuery.on() についてもうちょっと調べよう。
「jquery on」で検索して見つけた。
on() ひとつで bind() live() delegate() を表せる
（中略）
jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。
つまり on() の書き方によって、3 パターンの使い方ができるということです。
（中略）bind()
（中略）
これを on() で書くとこうなります。
$('.foo').on('click', function(){...}); $('.foo').off('click');（中略）
delegate()
（中略）
これを on() で書くとこうなります。
$('.parent').on('click', '.foo', function(){...}); $('.parent').off('click', '.foo');（中略）
live()
（中略）
これを on() で書くとこうなります。
$(document).on('click', '.foo', function(){...}); $(document).off('click', '.foo');（中略）
おっとぉ～。
この記事で、私は jQuery.on() の文法は
jQuery(document).on(イベント, セレクタ, function(){...});
なんだと思い込んでいました。
そうですよね。３つの機能を盛り込んでるんだから、書き方一緒じゃ困りますよね・・・orz
live() を on() の書き方で書いた時に、
クリックした後にその場所に出現した要素もクリックしたことになっちゃう
のが仕様なのかバグなのかはともかく、そうなっちゃう可能性は高そうなので、
必要な時以外はむやみに live() の書き換え記法は使わないように気をつけよう。
※ 2014/1/9 追記
この記事の作成時点では誤りに気づいておらず、
jQuery(document).on(イベント, セレクタ, function(){...});
の２番目の引数がセレクタでなく、jQueryオブジェクトになってしまっていました。
詳しくは 1/9 のエントリ をご覧ください。
ということでこの回で置き換えた部分は一部修正しときます。
単純に bind() の廃止による on() への置き換えは、
jQuery(セレクタ).on(イベント, function(){...});
で記述し、動的に追加した要素のイベントは
jQuery(document).on(イベント, セレクタ, function(){...});
の記述のままで良い。
サンプル設定ページ１ のソース内の編集
box.bind('touchstart', function(e) {
↓
box.on('touchstart', function(e) {
box.bind('touchmove', function(e) {
↓
box.on('touchmove', function(e) {
jQuery('.sortable').sortable().bind('sortupdate', function() {
↓
jQuery('.sortable').sortable().on('sortupdate', function() {
jQuery('#aLarge_cate').bind(eventtype, function() {
↓
jQuery('#aLarge_cate').on(eventtype, function() {
overlay.bind(eventtype, function(ev) {
↓
jQuery('#bt-menu').children('div.bt-overlay').on(eventtype, function(ev) {
box.bind('touchstart', function(e) {
↓
box.on('touchstart', function(e) {
box.bind('touchmove', function(e) {
↓
box.on('touchmove', function(e) {
はい！
リロードして～、再度 大分類（設定）をクリック！
・・・・・。
・・・・・。
おぉ！
出ましたね、出ましたです！
あまりにも失敗続きだったから、
出たことに気づくまでに間がありました。
はい、あと、なんでしたっけ。
スライドメニュー出すことに掛かりっきりだったから、
全体としてどこまで進んでたか飛んじゃいました。
メニューも、出たは出たけどヘッダーより前に出さなきゃですね。
調整して、小分類の方でも同じことやらなきゃですね。
ざっと考えてもイロイロ出ては来ますが、今回はここまでで！
次回までに整理して、それから先に進みます。
今回の体当たりでの学び
- jQuery.on() ひとつで bind() live() delegate() を表せるが、記法はそれぞれ異なる。
仕様かバグか分からないが、jQuery.live() を jQuery.on() の書き方で書いた時に、クリックした後にその場所に出現した要素もクリックしたことになってしまうようである。
※ 2014/1/9 追記
この記事の作成時点では誤りに気づいておらず、
jQuery(document).on(イベント, セレクタ, function(){...});
の２番目の引数がセレクタでなく、jQueryオブジェクトになってしまっていました。
詳しくは 1/9 のエントリ をご覧ください。
次回に続きます！
1/7 追記
続きを書きました。
1/11 追記
まとめを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0