1

是的，所以我决定给自己设定一个挑战，作为一种学习曲线。我以前从未使用过 ajax，但我觉得这是我必须学习的东西，所以有什么比在新的投资组合网站上更好的机会来做这件事了。

网站的主要概念涉及网站内容在 960 边缘的折叠后滑动，因此您单击一个链接，当前内容全部滑出到部分隐藏的折叠中，然后折叠会调整大小以匹配新内容块，并且新内容从折叠下方滑入。到目前为止，我只是使用 Wordpress 循环和一些基本的 jquery 以一种简单的方式完成了新闻。（仍然无法在新内容进入之前让折叠正确调整其高度）

我有这个（http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html）作为开始的基础，但它似乎并没有完全达到我的预期目标。

保存设置一些愚蠢的 jsfiddle，这里是网站http://paradoxdevelopment.org/

编辑：抱歉，解释分心了，忘了问确切的问题：

我怎样才能做到这一点，以便当您单击内部链接时，它会导致以下事件链：

内容框滑出-> 内容更改-> 折叠增长-> 内容框滑入新内容

编辑2：我意识到我并没有真正让自己清楚。我设法让我的头脑围绕 ajax 加载内容，问题是内容以不同的方式加载到不同的页面。举些例子：

主页有 3 个最近的站点从顶部的垂直折叠处滑落，一条从左侧滑入的新闻帖子，以及从右侧滑入的新闻帖子列表。

工作/娱乐页面在顶部有一个垂直折叠，块从那里向下滑动。

联系人是一个简单的全宽，所以在填充 960 的任一侧折叠。现在关于页面也是如此，尽管将来可能会有一个侧边栏。

我怎样才能做到这一点，以便 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
      );
 }

我不确定.animatecall 的确切语法，但您可以从相关文档中找到所有可能的选项

编辑 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 回答