0

jQuery UI でタブ付きインターフェイスを使用しています。それはうまくいっています。各タブは実際にはフォームです。したがって、そのフォームが送信されると、アクションはユーザーを同じページに戻します。しかし、その時点で、適切なタグを開きたいと思います。

だから、私はこのようなURLを使用しています。

domain.com/page.php#tab1

これは正常に機能し、正しいタブを開きます。ページのスクロール位置に若干の問題があります。これは、ページ上のアンカーの位置によるものです。スクロールをページの一番上にしたいので、このようなものを使って一番上に戻ります。

$('html, body').animate({ scrollTop: 0 });

それで、それはすべて問題ありません。ただし、モーダル ダイアログを開くと、スクロールが発生したために正しく配置されません。

私は調査を行い、モーダルの位置を変更するためのこの提案を見つけました:

$('my-selector').dialog('option', 'position', 'center');

しかし、それはうまくいかないようです。

では、これをうまく再生するにはどうすればよいですか？

私の簡略化されたコードは次のとおりです。

html

<div id="tester">
</div>

スクリプト - ドキュメント準備完了

$('html, body').animate({ scrollTop: 0 });#

jQuery('#tester').dialog
({
title: "Attribute " ,
minWidth: 840,
height:500
});

実際のバージョンでは、ダイアログはクリック ハンドラで開かれます。したがって、ダイアログが開くまでにアニメーションは確実に完了しています。そのため、モーダルがページの下部に表示される理由について混乱しています。

前もって感謝します

4

1 に答える 1

0

メソッドの完全なコールバックでダイアログが開かれることを確認すれば、.animate()問題は発生しないはずです。

発生する可能性が高いのは、ダイアログが開いている間、アニメーションがまだ遷移中であるため、その位置の内部計算が正しくないことです。以下は基本的な例です。

$('#button').click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, openDialog);
});

function openDialog() {
    jQuery('#tester').dialog({
        title: "Attribute ",
        minWidth: 840,
        height: 500
    });
}

jsfiddle

于 2013-02-20T21:47:42.097 に答える