我怎样才能实现与QUOT;向导＆QUOT;使用JQuery风格的页面？ [英] How can I implement a "wizard" style page using JQuery?

问题描述

我实现在网络上的调查问卷，我想的问题每一块都有自己的页，因此用户不必滚动。然而，页面加载有两个问题：1），他们需要一段时间（并有明显的闪烁/刷新）和b）这种做法会迫使我做一个数据表插入加多个更新程序（或所有存储在我的会议）。

I am implementing a questionnaire on the web and I'd like for each block of questions to have its own "page" so the user doesn't have to scroll. However, page loads have two problems: a) they take time (and have a noticeable flicker/refresh) and b) such an approach would force me to do a data table insert plus multiple updates (or store it all in my session).

我如何使用jQuery让用户通过页面上的客户端的问卷调查，回答问题，他去？然后我就能够处理的数据存储时，所有的答案都提交在最后。

How can I use JQuery to let the user page through the questionnaire on the client side, answering questions as he goes? I'll then be able to handle the data store when all the answers are submitted at the end.

还有一件事......是有办法，以确保如果用户需要一段时间的会话不会超时？

One other thing...is there a way to make sure that the session doesn't time out if the user takes awhile?

推荐答案

就个人而言，我可能会用简单在这种情况下走。在隐藏层的初始页面加载加载所有内容的前面。然后使用jQuery来显示/隐藏每个调查问卷的页面：

Personally, I'd probably go with simplicity in this case. Load all of the content up front in the initial page load in hidden divs. Then use jQuery to show/hide each of the questionnaire "pages":

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之间的过渡。这可以很简单，比如 $（格＃PAGEONE）。隐藏（）和 $（格＃pageTwo）。显示（） 或者你可以添加一些不错的流畅的动画过渡为一个稍微提升用户体验（不要太过火，因为太多的动画会很快变得喧宾夺主。）

Where gotoPageTwo is a function that utilizes jQuery to make the transition between divs. This can be as simple as $("div#pageOne").hide() and $("div#pageTwo").show() or you could add some nice smooth animated transitions for a slightly enhanced User Experience (just don't go overboard as too many animations can quickly become distracting.)

您还再使用jQuery做AJAX调用回服务器在某个时间间隔（比你的会话超时时间短），使一个简单的请求。在背景简单的要求将确保用户会话保持活着。

You would also then use jQuery to make AJAX calls back to the server at some interval (shorter than your session timeout time) to make a simple request. That simple request in the background will ensure that the User Session stays alive.

这篇关于我怎样才能实现与QUOT;向导＆QUOT;使用JQuery风格的页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！