レスポンシブWebデザイン導入計画（Parllet の場合 設定ページ－４） [公開アプリ]
こんばんわ！
なかなか同窓会の熱が冷めやらない sakashushu です。
※ 2014/1/9 追記
この記事の作成時点では誤りに気づいておらず、
jQuery(document).on(イベント, セレクタ, function(){...});
の２番目の引数がセレクタでなく、jQueryオブジェクトになってしまっていました。
詳しくは 1/9 のエントリ をご覧ください。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
のレスポンシブ化は、トップページとログインページまでが完了していて、
この回 から設定ページに入りました。
実装する内容は、この回にポストしたものです。
前回 までで、768px 以下になった時にヘッダーの１行目・２行目共に
ページメニューが消えて２行目にパンくずリストが表示され、
幅の固定されている箇所もレスポンシブ化されました。
■ ざっくり環境
OS：Windows 7 Home Premium
ブラウザ：IE 11.0
■ 現状
この回に、現時点の設定ページを元にスナップショットを兼ねてサンプル設定ページ１を作りました。
ここがスタート地点です。
今回も体当たりで学びながら進めていきます。
■ 体当たり開始
この回の案を再度記載。
幅を狭めていってタブレットサイズ（768px）以下は
１行目の大分類のヘッダーと、２行目の小分類のヘッダー
それそれを縮小する方向。
１行目のヘッダーは ロゴ と 会員メニュー のみ残し、
２行目に
大分類 ＞ 小分類
の形のパンくずリストで表示します。
上でも書きましたが前回、768px 以下になった時に１行目・２行目共に
ページメニューが消えて２行目にパンくずリスト表示。
幅の固定されている箇所もレスポンシブ化しました。
次はこの回の案の、この辺に入っていきます。
大分類と小分類、どちらもクリックした際には、
Parllet（パレット） トップページで導入した（ここら辺）
FacebookやGoogle＋のようなスライドメニューが開いて
分類を変えられるようにします。
この辺も、案として書くのは簡単ですけど、
実装は（私にとっては）一筋縄ではいかない予感。
実装の前にもうちょっと詳細にしといた方がいい気がします。
■ 案をちょっと詳細に
スライドメニューはもちろんこの回までに使った手法を使います。
すでにウロ覚えなのでソースを再度開いて確認します。
（確認中）
はい、ざっくりですが、
トリガーになるメニューボタンのクリック（jQueryのclickイベント）
でタグのクラスが変更されてCSS が切り替わることでメニューが開く
って感じです。
今回は大分類と小分類それぞれのクリックでスライドメニューが
同じ場所に開き、中身は違うリストになります。
詳細なところまでのイメージはできませんがざっくりで、
スライドメニューは２つ用意しておき、
大分類と小分類のクリックイベントで自身に対応した
スライドメニューに id を追加して閉じる時に id を削除
という想定で進めてみたいと思います。
■ まずは大分類（設定）だけで体当たり
この回で触れている以下の要素。
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger"><span></span></a>
<div id="divUlFrm">
<ul>
<li></li>
<li><a href="#divWhatIsParllet">Parllet とは</a></li>
<li><a href="#divTheOriginOfParllet">Parllet の由来</a></li>
<li><a href="#divBenefitsOfParllet">Parllet のメリット</a></li>
</ul>
</div>
<div class="bt-overlay"></div>
</nav>
これを元にして加工して、大分類のスライドメニューを作ります。
サンプル設定ページ１ のソース内に挿入
挿入前
<div>
<ul class="memberMenu">
（中略）
</ul>
<ul class="tbMemberMenu">
<li>
<a href="#">設定</a>
</li>
<li>
＞
</li>
<li>
<a href="#">口座</a>
</li>
</ul>
</div>
挿入（＋加工）後
<div>
<ul class="memberMenu">
（中略）
</ul>
<ul class="tbMemberMenu">
<li>
<a href="#">設定</a>
</li>
<li>
＞
</li>
<li>
<a href="#">口座</a>
</li>
</ul>
<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>
</div>
挿入位置については、<a href="#">設定</a> を上書きするようにモロに
書くのも私らしい体当たりでいいかなとも思ったんですが、
結局は大分類（設定）のクリックイベント内でトリガーを強制クリックして起動するので
意味が無いかなと思い、この位置にしました。
加工したこと
- （当然だが）リストの内容を今回に合わせて加工
- <nav> の id="bt-menu" は、大分類（設定）のクリックイベントで追加するので削除
- 2. のイベント実施時に見つけやすいように、class に large_cate を追加
- <div id="divUlFrm"> を <div class="divUlFrm"> に変更したのは、大晦日の大失敗発覚を受けて立てた方針：CSS セレクタとして使用するときは極力 class を使う に拠る（後で小分類でも同じようなの作るし ^^; ）
4. の加工を受けて、stylePrlt.css 内の #divUlFrm を .divUlFrm に変更。
さらに jquery.borderMenuPrlt.js 内の jQuery('#divUlFrm') を menu.children('.divUlFrm') に変更。
一旦ここで見た目をチェック
まずはトリガーを消さなきゃですね。
サンプル設定ページ１ のソース内の <style> ～ </style> の部分に追記
/* 共通のスタイル */ に追記
.bt-menu-trigger {
display: none;
}
見た目は戻ったので、イベントに入っていきます。
サンプル設定ページ１ のソース内の編集
大分類（設定）に id を追加
<a href="#" id="aLarge_cate">設定</a>
大分類（設定）のクリックイベントを追加し、その中で大分類の
スライドメニューに id：bt-menu を追加。
さらに追加したばかりのスライドメニュー要素内のトリガーのクリックイベントを発動。
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').bind(eventtype, function() {
jQuery('.large_cate').attr('id', 'bt-menu');
jQuery('#bt-menu').children('a.bt-menu-trigger').click();
return false;
});
trigger.bind(eventtype, function(ev) {
ev.stopPropagation();
ev.preventDefault();
（中略）
}
でも大分類（設定）をクリックしても何も起こりません。
IE の F12開発ツールのデバッガーで確認
追加した大分類（設定）のクリックイベント内と、
スライドメニュートリガーのクリックイベント内にブレークポイントを設置。
再度 大分類（設定）をクリック。
大分類（設定）のクリックイベント内は通っていることが分かりました。
そのままデバッグを続行。
はい。
スライドメニュートリガーのクリックイベント内は通りませんでした。
jQuery で追加した id でのイベントは私は未経験です。
「jquery attr で追加した id イベント」で検索。
jQueryのattrメソッドでHTMLタグのidを変更したにもかかわらず変更る前のidを使用...
大前提として、idを書き換えるのは上策とは言えない。
class属性を書き換えたり、あるいはdata-なんとかという属性を用意して、それを書き換えた方がいい。
（中略）
後から追加された要素、あるいは後から書き換えられた要素に対してもイベントを発生させる場合、jQuery.on()を使う。
jQuery1.7で追加された機能なので、古い資料には載っていないことがある。
http://api.jquery.com/on/
最初に述べたようにidを書き換えるのは下策だが、後から追加した要素にもイベントハンドラを指定したい、という場合に非常に便利な機能なので覚えておくといい。
（中略）
むう、「idを書き換えるのは下策」なようですね。
まあ、それも一応意識には入れておいて体当たりは最後まで続けます。
「jQuery.on()をつかう」ようなので、
「jquery.on」で検索。
【jQuery】on() で イベントをバインドする。 - pospomeのプログラミング日記
本当は live() を知って調べたんだけど、
これは jQuery 1.9 で廃止になったらしい。
同時に bind() / delegate() も廃止になる。
これら廃止になった3つをまとめたのが on() になる。
つまり、on() を使うと live() / bind() / delegate() の機能を使うことができる。
え！ bind() も jQuery 1.9 で廃止？！
そりゃーいかん！
なんでかって？
Parllet（パレット） では jQuery は以下の取り込み方をしていて、
<script type="text/javascript">google.load('jquery', '1')</script>
<script type="text/javascript">google.load('jqueryui', '1')</script>
jQuery1.*.* の最新のものを読み込むことになるからです。
参考：Google Libraries APIを使う - jQueryファイルの読み込み ... - AjaxTower
次のように記述するとjQuery1.x.yの最新バージョンを読み込みます。
<script type="text/javascript">
google.load("jquery", "1");
</script>
ということで、bind() を使ってるところは全て on() に置き換え！
サンプル設定ページ１ のソース内の編集
box.bind('touchstart', function(e) {
↓
jQuery(document).on('touchstart', box, function(e) {
box.bind('touchmove', function(e) {
↓
jQuery(document).on('touchmove', box, function(e) {
jQuery('.sortable').sortable().bind('sortupdate', function() {
↓
jQuery(document).on('sortupdate', jQuery('.sortable').sortable(), function() {
jQuery('#aLarge_cate').bind(eventtype, function() {
↓
jQuery(document).on(eventtype, '#aLarge_cate', function() {
trigger.bind(eventtype, function(ev) {
↓
jQuery(document).on(eventtype, trigger, function(ev) {
overlay.bind(eventtype, function(ev) {
↓
jQuery(document).on(eventtype, overlay, function(ev) {
box.bind('touchstart', function(e) {
↓
jQuery(document).on('touchstart', box, function(e) {
box.bind('touchmove', function(e) {
↓
jQuery(document).on('touchmove', box, function(e) {
※ 2014/1/9 追記
この記事の作成時点では誤りに気づいておらず、
jQuery(document).on(イベント, セレクタ, function(){...});
の２番目の引数がセレクタでなく、jQueryオブジェクトになってしまっていました。
詳しくは 1/9 のエントリ をご覧ください。
はい！
bind() から on() への置き換えが終わり、同時に
後から id：bt-menu を追加するスライドメニュー内のトリガーに対しても
クリックイベントを発生させられるようになったはずです。
IEをリロードしてF12開発者ツールのブレークポイントも設置し直し。
再度 大分類（設定）をクリック。
今回も大分類（設定）のクリックイベント内は通っています。
そのままデバッグを続行。
お！今度はスライドメニュートリガーのクリックイベント内を通ってます！
そのままデバッグ続行！
・・・・・・。
まだ、駄目なようですorz
まあまあ、体当たりですから。
こんなもんかもしれません。
解決していない状態で申し訳ないですが、今回はここまでです。
今回の体当たりでの学び
- 後から追加された要素、あるいは後から書き換えられた要素に対してもイベントを発生させる場合、jQuery.on()を使う。
- jQuery.live() / jQuery.bind() / jQuery.delegate() は jQuery 1.9 で廃止になり、廃止になった3つをまとめたのが jQuery.on() になる。
次回に続きます！
1/5 追記
続きを書きました。
1/11 追記
まとめを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0