jQuery mobile でのハッシュによるアンカー付きリンク [nao-pon/blog/2011-09-18]

ページへ戻る

− Links

印刷

^[5]

2011 9月 18 (日)

jQuery mobile でのハッシュによるアンカー付きリンク ^[6]

携帯対応レンダラーで使用している jQuery mobile ですが、URLハッシュ値によるページ内アンカーや他ページからのアンカー付きリンクが多い XOOPS^[10] では、Ajax によるページ変遷を下記の設定で無効にしています。

 
-
|
|
|
|
!

jQuery.noConflict();
jQuery(document).bind("mobileinit", function(){
    jQuery.mobile.ajaxEnabled = false;
    jQuery.mobile.ajaxLinksEnabled = false;
    jQuery.mobile.ajaxFormsEnabled = false;
    jQuery.mobile.hashListeningEnabled = false;
});

ページ内アンカーリンクについては問題ないのですが、他ページからのアンカー付きリンクでアクセスすると、一旦該当のアンカーに画面移動してからページ読み込み完了後にページトップに戻ってしまう(ロケーションバーを隠すための jQuery mobile の機能)ので、とても使いづらいです。

そこで、ちょっと jquery.mobile.min.js をいじって、アンカー付きリンクの場合はページトップに移動しないようにしてみました。

これで、今のところ快適に動作しています。

~~jquery.mobile.min.js^[11]~~

と思ったけど、上手く動作してなかった。 :cry:

再考するした。

jQuery mobile 1.0 beta 3

Before

-
-
|
!

        silentScroll: function( ypos ) {
            if ( $.type( ypos ) !== "number" ) {
                ypos = $.mobile.defaultHomeScroll;
            }

After

-
-
-
|
-
|
!
!

        silentScroll: function( ypos ) {
            if ( $.type( ypos ) !== "number" ) {
                if (!$.mobile.hashListeningEnabled && location.hash) {
                    ypos = $(location.hash).offset().top;
                } else {
                    ypos = $.mobile.defaultHomeScroll;
                }
            }

この改造を反映した jquery.mobile.min.js (1.0 beta 3)
- jquery.mobile.min.js^[12]

Last-modified: 2011-09-18 (日) 15:22:12 (JST) (5237d) by nao-pon

Links list

(This host) = https://xoops.hypweb.net

^{(This host)}/modules/UsersWiki/person/nao-pon/blog/2011-09-17
^{(This host)}/modules/UsersWiki/person/nao-pon/blog/2011-09-26
^{(This host)}/modules/UsersWiki/person/nao-pon
^{(This host)}/modules/UsersWiki/person/nao-pon/blog
^{(This host)}/modules/UsersWiki/?cmd=rss&p=nao-pon%2Fblog
^{(This host)}/modules/UsersWiki/person/nao-pon/blog/2011-09-18#iba7ec49
^{(This host)}/modules/UsersWiki/index.php?cmd=lsx&rtag=JavaScript
^{(This host)}/modules/UsersWiki/index.php?cmd=lsx&rtag=jQuery
^{(This host)}/modules/UsersWiki/index.php?cmd=lsx&rtag=Mobile
^{(This host)}/modules/xpwiki/127.html
^{(This host)}/modules/UsersWiki/gate.php/jquery.mobile.min.js?way=attach&_noumb&refer=nao-pon%2Fblog%2F2011-09-18&openfile=jquery.mobile.min.js
^{(This host)}/modules/UsersWiki/gate.php/jquery.mobile.min.js?way=attach&_noumb&refer=nao-pon%2Fblog%2F2011-09-18&openfile=jquery.mobile.min_0.js

jQuery mobile でのハッシュによるアンカー付きリンク :: XOOPS マニア

jQuery mobile でのハッシュによるアンカー付きリンク [6]

Links list

jQuery mobile でのハッシュによるアンカー付きリンク ^[6]