寻找一种“反向”的AJAX-IE:这可能吗?

时间:2010-07-31 01:53:29

标签: php ajax

我有一个网络应用程序,它是一种日历应用程序,顶部有几个选项卡。我目前将这些选项卡打开到新页面,因此用户后退按钮仍然按预期工作。

我最近集成了一个“帮助”框,它是一个位于标题内的div,并且在所有页面中保持不变。在该帮助框中,用户可以单击按钮,并按步骤说明指导用户完成网站的功能。

问题在于,只要用户需要单击选项卡以进入新页面(按照分步指南),该框将自行重置,并且用户需要重新单击该按钮以继续执行说明。

我正在考虑制作基于AJAX的标签,但这会破坏后退按钮,我认为这对用户体验会更糟。

是否有某种方法可以使用会话数据或类似的东西处理帮助框,以便在提供新页面时保持其状态?

帮助框当前是标题中的div,并使用jQuery进行一些淡入淡出效果等:

<div class="helpbox">
     <h2 class="title2a adjust"><a class="nodecoration" href="javascript:animatedcollapse.toggle('collapse1')">Quick Start</a></h2>
     <div id="collapse1" class="helpbox2">

              <ul id="helpbo">
                  <li class="helpchange"><a href="#">Add Items</a></li>
                  <li class="helpchange"><a href="#">Create Timeline</a></li>
                  <li class="helpchange"><a href="#">Set Reminder</a></li>
                  <li class="helpchange"><a href="#">Detailed Help Topics</a></li>
              </ul>
              <hr class="ninetypercent"></hr>

              <div class="instructions helpitems" id="animators">
                <div class="container"><ul>
                <li>Make sure the <b>Monthly</b> tab is highlighted on the top right of the screen.</li>
                <li>Click on the day that you want to add an event.</li>
                <li>You can create a main event-which you can apply a timeline to, or you can create a simple to-do item.</li>
                <li>Fill in the details.  If you are creating a main event, you can add a timeline.  If you don't know how to do that, read the <b>Create Timeline</b> help link above.</li>
                <li>Click <b>Save</b> when you're done.</li>
                <li>Your event or to-do will now show up in your calendar.</li>

                  </ul></div>

                  <div class="container"><ul>
                  <li>Click on the <b>Admin</b> tab on the top right of the screen.</li>
                  <li>In the main display, next to <b>Manage</b> click <b>Add Timeline</b></li>
                  <li>A new blank timeline template will appear.</li>
                  <li>Give a descriptive title of your timeline. You can always go back and edit things later if you need to.</li>
                  <li>The first column, <b>Days From Event</b>, is the number of days before or after the main event that you want the to-do item to happen.  It must be a number-negative numbers for the days before the event and positive number for days after the event.</li>
                  <li>Fill in the <b>Days From Event</b>, the <b>Title</b> and <b>Description</b> of each to-do item you want to create.</li>
                  <li>Click <b>Add More To-Do Items</b> to add another item.  Add as many items as you need.</li>
                  <li>If you have added <b>Team Members</b>, you can assign tasks to members in the <b>assigned to</b> column.</li>
                  <li>When you have finished your new timeline, click <b>Save Timeline</b>.</li>
                  <li>Your new timeline is now ready to be applied to your main events</li>
                  </ul></div>

                  <div class="container"><ul>
                  <li>You can set a reminder for a main event or a to-do item.</li>
                  <li>Make sure the <b>Monthly</b> tab is selected on the top right of the screen.</li>
                  <li>First, <b>Create or Select</b> the event that you want to set a reminder for.</li>
                  <li>If you have selected an existing event, click <b>Edit Event</b>.</li>
                  <li><b>Click</b> the <b>Checkbox</b> next to the word <b>Reminder</b>. </li>
                  <li>Set the date and time you'd like your reminder, and you'll get an email reminder then.</li>

                  </ul></div>

                  <div class="container"><ul>
                                    <li>For more detailed help on specific features, please click on the <b>Help</b> tab at the top right of the screen.</li>
                                    <li>There, you will find several <b>Tutorial Videos</b> That can walk you through more of the complex features.</li>

                  </ul></div>


              </div>
            <div class="closebutton">
                 <a href="javascript:animatedcollapse.toggle('collapse1')">close</a>
            </div>


      </div>
</div>

1 个答案:

答案 0 :(得分:1)

三个可能的解决方案:

  • 帮助框可以是框架,因此其他导航不会影响它
  • 可以使用onLoad / unload处理程序或链接点击的处理程序保存/恢复帮助框状态(是的,查看后退按钮)
  • 单击帮助框可向服务器发出请求,该请求将设置会话变量,使其保持打开以供将来的页面加载