如何在不跟随内容跳转的情况下更改页面内容？

Question

我是一个完整的JQuery(和JS)n00B.

对于我的第一次尝试,我想要一个允许用户以5个步骤指定内容的页面(可以选择取消步骤).

我想横向显示这个过程.

每个步骤都可以选择下一个(组合框,列表框或无线电组(哪个？)),当选择它们时,将显示一些文本,可能还有关于选择的图形,并提供下一个选择.

[扰流板:坏ascii艺术如下]

原来:

<choice>

用户选择的东西......

                         <2nd choice>
<text 
 describing the choice>  <undo option>

<following text, describing what the user has selected so far>

用户选择第二个东西......

                                               <3rd choice>
<text                    <text 
 describing the choice>  describing the choice> <undo option>

<following text, describing what the user has selected so far>

我希望这很清楚.如果没有,请发帖.

问题:

1. 最好的方法是什么？一张桌子？我知道他们可能是一件坏事,但这看起来很有帮助.

2. 我应该只允许撤消最后一个选项吗？实际上所有5个的所有排列都是有效的,所以也许我应该忘记一个撤销按钮,然后让用户做出任何选择 - 这意味着我不会逐一揭示这些选择 - 它们总是在那里(听起来更简单) )

3. 因为选择会影响描述性文本(也许是图形),并且这些选择可能具有不同的大小,如何在做出不同选择时防止以下文本跳转？或者用户可以接受吗？

我想我可以将它们全部尺寸调整到最大尺寸(我不想添加滚动条).但是如何获得呢？如果用户调整屏幕大小(？)或切换CSS表格(极不可能),我不能使用像素数,所以我猜百分比？但同样的问题？

1. 表,div或布局是什么？

如果你在早餐前做了四件不可能完成的事情,我想和HTML 4和CSS 2交叉浏览器.

我希望我不要求太多

Answer 1

jQuery UI是一个很好的选择,用一个Javascript石头杀死尽可能多的鸟.创建阶梯式水平输入过程听起来像是需要标签.有许多jQuery选项卡插件,但我使用jQuery UI获得了最多的跨浏览器成功,虽然设计更改可能更加困难,因为themeroller需要一些习惯.

本文很好地说明了如何使用制表符来制作多步骤表单.http://pathfindersoftware.com/2008/03/jquery-form-and/

从DOM的角度来看,我建议使用DIV作为您的内容容器,因为您可以根据需要定位它们,并轻松更改不同设备的布局和moderinzr等功能检测.您可以根据需要在DIV中包含表格.很多人都在推动使用像section和header这样的HTML5容器,但是你会发现这些容器会在旧浏览器中快速失败.

以下是如何安排页面和一些示例jquery的概述,以向您展示切换用户定义选项的方法,包括图像,视频,文本或任何您想要显示的内容.您甚至可以创建可用选择列表,然后使用CSS隐藏它们,并仅在选择了相应的表单值时显示这些项目.

需要注意的是记住id与类的概念.ID应该是唯一标识符,这意味着每个DOM只应存在一次.在CSS和jQuery ID中,前缀是哈希或井号(#myID).类可以在DOM中多次存在,并以句点(.myClass)作为前缀.

<div id="selectedValues">
    <p>Your progress:</p>
     <ul id="userSelections">
      <li><a rel="one" class="option remove">Option 1</a></li>
     </ul>

  </div>



<form id="tabbedForm">

 <div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Choice</a></li>
        <li><a href="#tabs-2">Second Choice</a></li>
        <li><a href="#tabs-3">Third Choice</a></li>
    </ul>
    <div id="tabs-1">
        <h2>First Choice Form Elements</h2>
            <a rel="one" class="option remove">Option 1</a>
            <a class="next" href="#">Next</a>

    </div>
    <div id="tabs-2">
        <h2>Second Choice Form Elements</h2>
            <a rel="two" class="option add">Option 2</a>
            <a class="next" href="#">Next</a>
    </div>
    <div id="tabs-3">
        <h2>Third Choice Form Elements</h2>
            <a rel="three" class="option add">Option 3</a>
            <input type="submit" value="Submit Form">
    </div>
 </div>

</div>

一旦您更多地参与jQuery,您可以在同一页面上的列表中添加和删除项目,以向用户显示已选择或删除选项.live()函数允许jQuery跟踪页面上呈现页面时不存在的动态元素.

// Basic jquery to show what the user has selected with animation
        $('.option').live('click', function(event) {
            event.preventDefault();

            // Get option/value/offering/product id, which can be stored in element attribute like rel
            var id = $(this).attr("rel");

            if( $(this).hasClass("remove") ){
                // Remove option
                $("#userSelections a[rel='"+ id +"']").fadeOut("fast");
                $("#userSelections a[rel='"+ id +"']").remove();
                // toggle class in the options list
                $("a[rel='"+ id +"']").toggleClass('add');
                $("a[rel='"+ id +"']").toggleClass('remove');
            }
            else {
                // Add option
                $(this).clone().appendTo("#userSelections").append('<li>');
            }

        });