jQuery Mobile リンクについて

February 06 [Mon], 2012, 15:02
iPhoneサイト制作★覚書

■■jQuery Mobile リンクについて■■

■アンカーリンク
jQuery Mobileを使用するとリンク先アンカー("/index.html#top"みたいな)の使用は不可能。
近い事を実現するには…

↓jQueryでスクロールさせながら移動させるsample↓
(詳しい解説⇒参考サイト:http://www.finefinefine.jp/web/kiji1818/)

・リンク元ページ
---------------------------------------------------
<ul>
<li><a href="test19.html?no=0" target="_blank">このリンクをクリックするとブロックコンテンツ1にスクロールで移動</a></li>
<li><a href="test19.html?no=1" target="_blank">このリンクをクリックするとブロックコンテンツ2にスクロールで移動</a></li>
<li><a href="test19.html?no=2" target="_blank">このリンクをクリックするとブロックコンテンツ3にスクロールで移動</a></li>
<li><a href="test19.html?no=3" target="_blank">このリンクをクリックするとブロックコンテンツ4にスクロールで移動</a></li>
<li><a href="test19.html?no=4" target="_blank">このリンクをクリックするとブロックコンテンツ5にスクロールで移動</a></li>
</ul>

・リンク先ページ
---------------------------------------------------
<div id="sample">
<div>ブロックコンテンツ1</div>
<div>ブロックコンテンツ2</div>
<div>ブロックコンテンツ3</div>
<div>ブロックコンテンツ4</div>
<div>ブロックコンテンツ5</div>
</div>

・javasclipt (リンク先に読ませる)
---------------------------------------------------
$(function() {
var n = window.location.href.slice(window.location.href.indexOf('?') + 4);
var p = $("#sample div").eq(n).offset().top;
$('html,body').animate({ scrollTop: p }, 'slow');
return false;
});


プロフィール
  • プロフィール画像
  • アイコン画像 ニックネーム:らいおん
  • アイコン画像 性別:男性
  • アイコン画像 誕生日:1977年
  • アイコン画像 血液型:A型
  • アイコン画像 職業:その他
  • アイコン画像 趣味:
    ・ビリヤード-よく行くお店:ルーキー クラス:A級※ブランク7年(笑)
    ・バイク-愛車:92' RVF400
    ・買い物-好きなブランド:COALBLACK roar AKM WJK DartinBonaparto LGB BACKLASH etc…
読者になる
2012年02月
« 前の月    |    次の月 »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29
最新コメント
Yapme!一覧
読者になる
P R
カテゴリアーカイブ
月別アーカイブ