1

そうですね、学習曲線の一形態として自分自身に挑戦を設定することにしました。これまで ajax を使用したことはありませんが、本当に学ばなければならないことだと感じているので、新しいポートフォリオ サイトでそれを行うよりも良い機会はありません。

Web サイトの主なコンセプトは、Web サイトのコンテンツが 960 の端にある折り目の後ろにスライドすることです。そのため、リンクをクリックすると、現在のコンテンツがすべて、部分的に隠れている折り目にスライドし、折り目が調整されます。新しいコンテンツ ブロックに合わせてサイズを変更すると、新しいコンテンツが折り目の下からスライドします。これまでのニュースでは、Wordpress ループといくつかの基本的な jquery を使用するだけで、簡単な方法でこれを実行しました。(新しいコンテンツが入ってくる前に、折り目を適切に高さを調整することはまだできません)

私はこれ (http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html) を最初の基礎として持っていますが、意図した目標を完全に達成しているようには見えません。

ばかげた jsfiddle の設定を保存します。現在のサイトは次のとおりですhttp://paradoxdevelopment.org/

編集:申し訳ありませんが、説明に気を取られ、正確な質問をするのを忘れました:

内部リンクをクリックすると、次の一連のイベントが発生するようにするにはどうすればよいですか。

コンテンツ ボックスがスライド アウト -> コンテンツの変更 -> 折り目が大きくなる -> コンテンツ ボックスが新しいコンテンツと共にスライド イン

EDIT 2: 私は自分自身を再びはっきりさせていないことに気付きました. コンテンツをロードするために ajax に頭を悩ませることができました。問題は、コンテンツがページごとに異なる方法でロードされることです。例えば：

ホームページには、上部の縦の折り目から下にスライドする 3 つの最近のサイト、左からスライドインするニュース投稿、および右からスライドインするニュース投稿のリストがあります。

Work/Play ページの上部には垂直方向の折り目があり、そこからブロックが滑り落ちます。

Contact は単純な全幅なので、960 を埋めるようにどちらかの側に折ります。現在のところ about ページも同じですが、将来的にはサイドバーが表示される可能性があります。

AJAX が現在ロードされているものを検出できるようにするにはどうすればよいですか?

事前にすべての助けをありがとう！

4

1 に答える 1

1

何をする必要があるかについては、ほぼ大まかに説明したので、untestedそのようなものを機能させる方法の概要を説明します。

 function animateInDone () {
      // do something here
 }

 function foldReady () {
      // fold has been scaled for this content let's show it on screen
      $('#contentBox').animate(
           {'left':'100px'},
           400,
           'swing',
           complete: animateInDone
      );
 }

 function contentLoadDone (responseText, textStatus, XMLHTTPStatus) {
      // new content loaded and displayed on div since we used .load()
      if (textStatus == 'success') {
           // change the fold size
           $('#fold').animate(
                {height:'350px'}, // or the new height of the contentBox or something else
                // this can also be {height:'+50px'}
                400, 
                'swing', 
                foldReady
           );
      } else {
           // handle errors
      }
 }

 function animateOutDone () {
      // load the new content by using .load or .ajax
      $('#contentBox').load(
           'newcontent.html',
           complete:contentLoadDone
      );
 }

 function contentChange () {
      // animate the content box out
      $('#contentBox').animate(
           {'left':window.innerWidth},
           400,
           'swing',
           complete: animateOutDone
      );
 }

callの正確な構文についてはわかりません.animateが、関連するドキュメントから可能なすべてのオプションを理解することができます

EDIT 2への追加：UIの状態をどこかに保存する必要があります。これは、現在のページの名前を格納するだけの変数を持つという単純なものにすることも、各ページに異なる UI のイン/アウト アニメーションを持つ独自のクラスを持つクラス階層を持つこともできます。

var pageHome = function () {
    this.animIn = function () {
       // animate home page in
    }

    this.animOut = function (newpage) {
       // animate home page out and set newpage.animIn as the callback for when the animation in done
    }
}

var pageNow = pageHome;
pageNow.animIn();

私は個人的に関数オブジェクトを持つのが大好きです。

于 2012-08-24T22:13:25.563 に答える