0

私のHTMLページには、次のものがあります。

4 つの画像が並んでいて、そのすぐ下に 1 つの div がある - 折りたたまれている。

ユーザーがクリックする画像に応じて、対応する外部ページのコンテンツをその DIV にロードしたいと思います (ajaxpage.js を使用しますか?)。

コンテンツが DIV に読み込まれると、DIV はスライド アクションでトグルして開く必要があります。(jquery.togglr.js を使用していますか?)

また、ブラウザーが展開された DIV まで自動的に下にスクロールするようにしたいと考えています。そうしないと、余分なコンテンツが開いていることにユーザーが気付かない可能性があります。スクロールにはイージング効果が必要です。(jquery.scrollTo.js を使用していますか?)

最後に、ユーザーが DIV を開いたのと同じ画像をクリックした場合は、DIV を閉じる必要があります。DIV が既に開いている状態でユーザーが別の画像をクリックした場合は、DIV を閉じて開く必要なく、新しいコンテンツをロードするだけです。

問題は、さまざまな jquery プラグインをすべて適切に統合して、目的の動作を実現する方法です。

ありがとう。

4

1 に答える 1

0

まず、4 つの画像にクリック イベント ハンドラーが必要です。

$('img.fourImageCssClass').click(function(){
    // do something on click.  $(this) is an object that represents your clicked image
    var imgSrc = $(this).attr('src');
});

<div>次に、クリック ハンドラー関数でへの参照を取得する必要があります。

var yourDiv = $('#div-id');

次に、$.ajax() メソッドを使用してコンテンツを取得し、div にロードできます。それが完了すると、slideUp / slideDown関数が div の開閉を処理します。

最後に、スムーズにスクロールするには、ウィンドウのscrollTop プロパティをアニメーション化するだけです。スクロール先を知るために、divのoffset()またはposition()を取得できます。

于 2010-08-05T23:47:59.477 に答える