0

jQuery モバイル フレームワークを使用してモバイル サイトを構築していますが、ボタンの href 属性が機能していないと思います。これは、ヘッダーのサイト ブランドとインラインで実行されるメニュー ボタンです。

ボタンは、次のコードでクリックすると、ユーザーをページのフッターに送ることになっています。

<a data-role="button" href="#mainFooter" data-icon="arrow-d" data-iconpos="left" class="headerbutton">Menu</a>

次に、「mainFooter」の ID を持つ対応する div タグがフッター内に存在します。

<div id="mainFooter" name="mainFooter"></div>

ボタンがクリックされたときにユーザーがフッターに送信されない理由を理解できません。以下の Web ページへのリンクを見つけてください。

http://www.test-bed.co.uk/mobile/chatlive.php

4

2 に答える 2

4

JQMドキュメント->ページの解剖学セクションから：

注意：ハッシュを使用してすべてのAjaxの「ページ」のナビゲーション履歴を追跡しているため、フレームワークが表示されるため、現在、jQuery Mobileのページのアンカー（index.html＃foo）にディープリンクすることはできません。 IDが#fooのコンテンツにスクロールするネイティブな動作ではなく、IDが#fooの「ページ」の場合。

$ .animate（）などを使用してカスタムスクロールを実装する必要があります。

編集

のようなものがあなたのために働くかもしれません：

$(document).delegate('.headerbutton', 'click', function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $('#mainFooter').offset().top }, 1000);
});

これがお役に立てば幸いです。

于 2012-09-03T20:45:13.893 に答える
0

メニュー アンカーに id 属性 (id="menu-button") を追加して、次のコードを追加してみてください。

$(document).on("click", "#menu-button", function(event){
    $('html,body').animate({ scrollTop: $('#mainFooter').offset().top }, { duration: 'slow', easing: 'swing'});
});
于 2012-09-03T20:50:41.053 に答える