今更ながらのJQM

2021年10月7日でjQueryMobileがdeprecated(非推奨)になりましたが、一部のシステムでまだ使用しているため、つまづいたところ書こうと思います。

つまづいたところ

その1. headタグ内のscriptタグが読み込まれない件
その2. アンカーリンクがうまく遷移できない件

その1. headタグ内のscriptタグが読み込まれない件

問題点

通常、headタグにscriptタグを入れると思うのですが
画面遷移した時にどうしてもCSSが当たらない・・。

結果

調べたところ、下記に当たりました。

Ajaxを使うと、ヘッダやフッタなど変更の必要のないものはそのまま残し、書き換えが必要な部分だけを再描画します。
そうなのか、、

ということで、今回は、bodyタグにscriptタグを埋めることとしました。

その2. アンカーリンクがうまく遷移できない件

問題点

遷移先ページのidに飛ばしたいのに、飛ばない・・・。

結果

調べたところ、下記に当たりました。

なるほど、、、

ということで今回は下記採用しました。

$(function () {
    var headH = $("header").outerHeight();
    var animeSpeed = 500;
    var urlHash = location.hash; //URLのハッシュタグを取得
    if (urlHash) { //ハッシュタグが有る場合
        $("body,html").scrollTop(0);
        setTimeout(function () { //無くてもいいが有ると動作が安定する
            var target = $(urlHash);
            var position = target.offset().top - headH;
            $("body,html").stop().animate({
                scrollTop: position
            }, animeSpeed);
        }, 0);
    }
});

感想

ずっと他に原因があるのかと試行錯誤していたのですが
まさかJQMがそんな仕様になっているとは・・。

勉強になりました

今回は簡単な原因と結果の記述になりましたが、備忘のために投稿しました。