1

良い一日、

このjsfiddle demoを参照してください。クライアントには、既存のコードにディープ リンク機能を追加する必要があります。

「 jQuery BBQを使用したハッシュ履歴」を使用してアイソトープの組み込み機能を試しましたが、クライアントが探しているものではありません。理由は次のとおりです。

(1) 表示される URL をハッシュ "#" ではなくスラッシュ "/" で実行したい

(2) 特定のアイソトープ「itemSelector」の代わりにフィルター ボタンに適用されたアイソトープ jQuery BBQ の例

これがクライアントが求めているものです

(a) 特定のディープリンク URL を使用すると、ブラウザは特定のアイテムが選択されたページをロードします。$this.addClass('selected');

(b)itemSelector: '.item',アドレスバーの他のアイテムの URL をクリックすると、ページを更新せずに変更されます

私の表現力不足で申し訳ありませんが、理解を深めるためにwww.jwt.comを参照してください。サイト全体をリバース エンジニアリングすることはできなかったので、私のアプローチとして jQuery isotope を使用しました。

isotope itemSelector がクリックされたときに何らかのコードを追加することを考えていましたが、

$items.click(function () {
  var $this = $(this);
  // don't proceed if already selected
  var $previousSelected = $('.selected');
  if (!$this.hasClass('selected')) {
    $this.addClass('selected');
  }

  $previousSelected.removeClass('selected');

  // update sortData for new items size
  $container.isotope('updateSortData', $this)
    .isotope('updateSortData', $previousSelected)
    .isotope();

});

よろしくお願いします！

4

2 に答える 2

1

探しているのはHTML5HistoryAPIです。これにより、ページをリロードせずにURLバーに表示される内容を変更できます。APIを直接使用する代わりに、History.jsなどのライブラリを使用することをお勧めします。

于 2013-02-04T16:48:13.957 に答える
1

(1) 表示される URL をハッシュ "#" ではなくスラッシュ "/" で実行したい

1 つのページ応答内でメニュー ナビゲーション コマンドとして「/」を使用しないことを強くお勧めします。"/" は、URI の階層構造を表す予約済み (ASCII 2F) 文字です。あなたが行きたいと思う限り、 HTML仕様で使用されます。あなたの影響のために翻訳すると、1994 年以降に作成されたすべてのクライアント ブラウザー、Web クローラーは、「/」のカスタマイズされた使用で奇妙な動作をする可能性があります。

「/」の使用について十分な情報に基づいた決定を下してほしいだけです。意図しない結果をもたらす可能性があります。URI 予約文字を再利用しないものを選択することをお勧めします。

言われていることはすべて、それを行うことができます。

  1. スラッシュを使用する必要がある場合は、Web サーバーで「ワイルドカード URL」マッピングをサポートする必要があります。http://your.domain.com/base/url/**--> あるページ (階層定義はそこで止まり、url のドキュメントフラグメントの使用が始まります)

  2. jwt サイトと同様に、Cookie を使用してユーザーのクリック設定を保存します。これは、URL をハッキングして顧客の要件を満たすためです。

  3. Cookie を最新の状態に保つには、クリックまたは同位体更新イベントをリッスンする必要があります。

  4. bbq フィルタリングが URL に表示されないようにし、ユーザーが要求した「/」に変更します。

  5. ページの読み込み時に Cookie を読み取り、必要なオプションでisotopeを起動して、ページが最後にアクセスしたときと同じように見えるようにします。

于 2013-02-06T18:37:28.917 に答える