3

個人用/開発用 Web サイトを再設計し、できるだけユーザーフレンドリーにしようとしています。

私は AJAX で新しいページを読み込んでスライドさせたいと思っていました。それが現在起こっていることです。現在のすべてのブラウザーですべてが機能します (IE を除くが、将来的には対応する予定です)。

ただし、最初の(そして最初の) ページ変更で、ナビゲーション メニューに奇妙な間隔のジャンプがあります。ページが一度変更された後、ナビゲーションの間隔は同じままです。

  • ページの読み込み時
    レイアウトの違い
  • リンクをクリックした後

リンクがクリックされると、新しいページのナビゲーション セクションが現在のナビゲーションを置き換えるように設定されます。これは、各リンクには、サーバー バックエンドによって計算されたdata-offset属性が含まれているため、javascript が要素をどの方向にどれだけスライドさせるかを認識できるようにするためです。それらがクリックされたとき。

私が現在行っている方法は、 [コンテンツの幅]または- [コンテンツの幅]です。

ただし、メニューの構造は変更されず、スタイルシートは完全に静的です。Firebug でこれらすべての要素を調べましたが、ページを読み込んでも何も変わりません。

上記のサイト http://next.randolphwebdevelopment.comにリンクしましたが、何が起こっているのかを理解するために、関連する Javascript の一部をここにコピーします。

リンクがリダイレクトするページ全体をプルダウンします (指定されていない限り、今後のすべてのコード ブロックもこのコールバック内にあります)。

$.get( loc, function( data ){
    //delete the doctype declaration
    data = data.split("\n").slice(1).join("\n");
    next_page = $(data.replace(/(\r\n|\n|\r)/gm,"").replace(/>\s*</gm,'><'));

ナビゲーションをターゲット ページの新しいナビゲーションに置き換えます (実際に変更されるのは、各リンクのdata-offset属性だけです)。

//insert the new navigation
$('#header-content nav').html(next_page.find('#header-content nav').html());
$('#header-content nav a').click( navigation_clickHandler );

それは本当にそれです。新しいコンテンツを挿入してスライドさせるコード、ページ タイトルの変更、履歴の状態の設定などのコードがたくさんありますが、これはナビゲーション メニューに触れる唯一のコードであり、スタイルシートに触れるコードはありません。 .

問題を修正したり、コード設計を改善したりする提案をお待ちしています。

4

1 に答える 1

0

最初のロードnavは、phpなしのサーバーから取得されます。このhtmlを意図的に手動で書いたに違いありません。

クリックするとjsnavが再作成されますが、空のテキストノードはありません。ただ<a>link1</a><a>link2</a>。

スペースを追加するか、ソースhtmlから削除します。

于 2012-04-06T05:18:24.003 に答える