如何使用JQuery实现“向导”样式的页面?

就我个人而言,在这种情况下,我可能会选择简单。将初始页面中的所有内容提前加载到隐藏的div中。然后使用jQuery显示/隐藏每个问卷“页面”:

div#pageTwo {
     display: none;
}

<div>
    <div id="pageOne">
        <p>Do you like the color blue?<p>
        <p>What about green?</p>
        <a href="#" onClick="gotoPageTwo();">Next Page</a>
    </div>
    <div id="pageTwo">
        <p>...</p>
    </div>
</div>

其中,gotoPageTwo是一个利用jQuery在div之间进行转换的函数。这可以简单到 $("div#pageOne").hide() 和 $("div#pageTwo").show() 或者,您可以添加一些平滑的动画过渡,以略微增强用户体验(只是不要过火,因为太多的动画可能很快就会分散注意力。)

然后,您还可以使用jQuery在某个时间间隔(比会话超时时间短)对服务器进行AJAX调用,以发出一个简单的请求。后台的简单请求将确保用户会话保持活动状态。

http://github.com/dominicbarnes/jWizard http://plugins.jquery.com/project/jwizard

在JavaScript/jQuery中,这是一件非常简单的事情。加载整个问卷HTML并隐藏除要显示的块之外的所有块有什么不对?这很简单 $(element).hide(); 和 $(element).show();

如果整个调查问卷的HTML太大,您可以尝试将每个块分离为自己的块 HTTP请求 ,并让JavaScript通过Ajax每隔5秒(大约)加载一次。通过这种方式,用户可以立即开始问卷调查,而不是等待整个内容加载,这也是保持会话活动的一种方式。

谷歌的快速搜索就得出了这个结论- http://plugins.jquery.com/project/formwizard .

至于第二个问题,您可能可以实现一个“保持活动”页面,您可以使用它定期向用户发送AJAX请求 setInterval .