6

Web サイトの新しい機能を試しています。<div>要素を非表示/表示することで簡単なナビゲーションを行いたいです。

たとえば、ユーザーが製品の「詳細」ボタンをクリックすると、メインを非表示にして、製品の詳細を含むを表示したいとし<div>ます<div>。

問題は、前の「ページ」に戻るには、表示/可視性のスタイルの変更をすべて元に戻す必要があることです。これは、ユーザーが新しく開いた の「閉じる」ボタンをクリックしても問題ありません<div>。しかし、ほとんどのユーザーは [戻る] ボタンを押します。

戻るボタンをページの前の「状態」に戻す方法、つまり可視性/表示の変更を元に戻す方法はありますか?

ありがとう。

4

6 に答える 6

6

はい。あなたが探しているのはAJAX browser historyと呼ばれるものです。

RSHやjQueryやYUIなどのフレームワーク用のプラグイン/モジュールなど、オープンな実装がいくつかあります。

于 2009-11-13T22:52:06.407 に答える
4

あなたのタイトルの質問に答えるために（それは私が探していたものです）

BACK ボタンを使用してページの前の状態に戻る

@reach4thelasers の回答のリンクから、タイマーを設定し、現在のアンカーを何度も確認する必要があります。

//On load page, init the timer which check if the there are anchor changes each 300 ms  
$().ready(function(){  
   setInterval("checkAnchor()", 300);  
});

BACKボタンが押されたときにトリガーされるJavascriptコールバックがなく、アンカーのみが変更されるため...

--

ところで、あなたが話しているパターンは現在Single Page Interfaceとして知られています!

于 2010-10-27T08:07:58.873 に答える
3

変更が行われるたびに、URL にアンカーを追加する必要があります

www.site.com/page.html#anchor1

これにより、ブラウザは履歴にページを保持できます。このチュートリアルに従って、現在のサイトに実装しました。これはうまく機能し、何をする必要があるかをよく理解できます。

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

次のように機能するため、コメントの例は機能しません。

  1. ページ読み込み済み

  2. ページが変更され、URL にアンカーが追加されました (戻るボタンで 1 に戻ります)

  3. ページ変更、アンカー変更 (戻るボタンで 2 に戻ります)

  4. ページ変更、アンカー変更 (戻るボタンで 3 に戻ります)

    ....などなど..

于 2009-11-13T22:54:02.470 に答える
0

シングルページインターフェイスWebサイトに焦点を当てたJavaWebフレームワークItsNatに基づくこのチュートリアルをご覧ください

于 2011-02-09T16:24:54.363 に答える
0

あるとすれば、UX の観点からすると、かなり悪いことのように思えます。アプリケーションに「戻る」ボタンを設計し、設計を使用して、ブラウザの代わりにアプリケーションの戻るボタンを使用する必要があることをユーザーに明確にしないでください。

「デザインを使用する」とは、アプリケーションがブラウザー内で自己完結型のユーザー インターフェイスのように見えるようにすることを意味します。これにより、ユーザーの目は、対話するコントロールを探しているときに、ブラウザーのクロムではなく、ページ内にとどまります。あなたのアプリ。

于 2009-11-13T22:48:32.840 に答える
0

これはアンカーを使用して行うことができます。これは、多くの Flash アプリケーションや、ページからページへ移動しない他のアプリで行われている方法です。Facebook はこの手法をかなり自由に使用しています。ユーザーが履歴に表示されるリンクをクリックするたびに、ページのアンカーを変更します。

つまり、私のホームページのリンクは次のとおりです。

http://www.mysite.com/#homepage

JavaScript マジックが機能するリンクについては、次のようにします。

<a href="#otherpage" onclick="javasriptMagic()">My Other Page</a>

これにより、ユーザーはhttp://www.mysite.com/#otherpageに移動し、[戻る] ボタンをクリックするとhttp://www.mysite.com/#homepageに戻ります。次に、アンカーを読み取る必要があります

window.location.hash

あなたがどのページにいるべきかを理解するために。

于 2009-11-13T22:55:58.283 に答える