UsersWiki バックアップ : [nao-pon/blog/2011-09-18のソース]

差分を表示
nao-pon/blog/2011-09-18 へ行く。

#navi
RIGHT:&rsslink(../);
#boxdate

* jQuery mobile でのハッシュによるアンカー付きリンク [#iba7ec49]
RIGHT:&tag(JavaScript,jQuery,Mobile);

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

#code(javascript){{
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 をいじって、アンカー付きリンクの場合はページトップに移動しないようにしてみました。

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

- %%&ref(jquery.mobile.min.js);%%

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

再考%%する%%した。

- jQuery mobile 1.0 beta 3
-- Before
#code(javascript,1780-){{
		silentScroll: function( ypos ) {
			if ( $.type( ypos ) !== "number" ) {
				ypos = $.mobile.defaultHomeScroll;
			}
}}
-- After
#code(javascript,1780-){{
		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)
-- &ref(jquery.mobile.min_0.js);

RIGHT:&font(90%){&page_comments;};
#navi

« Prev

nao-pon/blog/2011-09-18 のバックアップ一覧
nao-pon/blog/2011-09-18 のバックアップソース(No. All)
- 1: 2011-09-18 (日) 12:17:20 nao-pon
  - With "attach" plugin. (Created empty)
- 2: 2011-09-18 (日) 12:38:57 nao-pon
  - と思ったけど、上手く動作してなかった。 :cry:
- 現: 2011-09-18 (日) 15:22:12 nao-pon
  - Attached file: jquery.mobile.min_0.js, jQuery mobile 1.0 beta 3 の改造やっとできた。

ぺージ情報
ぺージ名 :	nao-pon/blog/2011-09-18
ページ別名 :	未設定
ページオーナー :	nao-pon
閲覧可
グループ :	すべての訪問者
ユーザー :	すべての訪問者
編集可
グループ :	なし
ユーザー :	ゲスト