レスポンシブ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() に変更して通るようになりましたが、

それでもメニューが開かない状態です。

 

とりあえず前回のブレークポイントで止まってる時点で、

操作するメニュー要素をウォッチで見てみます。

id を追加して今回開く対象にしたつもりなのは jQuery('.large_cate') なので、

逆に変数 menu が class：large_cate を含むかどうかを確認。

 

・・。

なるほど、この時点で menu.hasClass('large_cate') の判定が false なんですね。

先に var menu = jQuery('#bt-menu'), と宣言しちゃってるから、

後から id 追加しても「なんですか？」って感じなのかな。

じゃあ jQuery('#bt-menu').hasClass('large_cate') は？

 

true ですな！

継ぎはぎな対応感満載ですが、まずは体当たりをやり切るのを

最優先として、menu で書かれた箇所を jQuery('#bt-menu') に変更。

それに、どうせ後々引っかかるので、var ・・・・ で宣言しちゃってる

変数で、menu を親要素にしてる人達も全部変更！

 

jquery.borderMenuPrlt.js 内の編集

function init() {
    var eventtype = mobilecheck() ? 'touchstart click' : 'click',
        resetMenu = function() {
            jQuery('#bt-menu').removeClass('bt-menu-open');
            jQuery('#bt-menu').addClass('bt-menu-close');
        };
    jQuery(document).on(eventtype, '#aLarge_cate', function() {
        jQuery('.large_cate').attr('id', 'bt-menu');
        jQuery('#bt-menu').children('a.bt-menu-trigger').click();
        return false;
    });
    jQuery(document).on(eventtype, jQuery('#bt-menu').children('a.bt-menu-trigger'), function(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        
        if (jQuery('#bt-menu').hasClass('bt-menu-open')) {
            resetMenu();
        } else {
            jQuery('#bt-menu').removeClass('bt-menu-close');
            jQuery('#bt-menu').addClass('bt-menu-open');
        }
    });
    jQuery(document).on(eventtype, jQuery('#bt-menu').children('div.bt-overlay'), function(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        resetMenu();
    });
    jQuery('#bt-menu').find('ul').find('a').click(function(ev) {
        if (jQuery('#bt-menu').hasClass('bt-menu-open')) resetMenu();
    });
    
    // Android 2.3 でスクロールしないバグへの対応
    if (navigator.userAgent.indexOf('Android') > 0) {
        var box = jQuery('#bt-menu').children('.divUlFrm'),
            touchStartPositionX,
            （中略）
}

 

※ 2014/1/9 追記

この記事の作成時点では誤りに気づいておらず、

jQuery(document).on(イベント, セレクタ, function(){...});

の２番目の引数がセレクタでなく、jQueryオブジェクトになってしまっていました。

詳しくは 1/9 のエントリ をご覧ください。

 

はい！リロードして再度 大分類（設定）をクリック！

 

・・・。

まだ駄目です ^^;

 

今回の体当たりでの学び

• javascript の 関数内の変数として作った jQueryオブジェクトは、後で動的に追加したオブジェクトとは別物になるので、追加後を想定したイベント内では再度jQueryオブジェクトを作成する必要がある。

 

次回に続きます！

 

1/6 追記

続きを書きました。

1/11 追記

まとめを書きました。

---

 

 

いつも最後まで読んでいただいてありがとうございますm(__)m

何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)

またお越しくださいませませ！

 

タグ：jQuery レスポンシブWebデザイン 体当たり Parllet 公開アプリ