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

Question

我是一个 jQuery(和 JS)初学者。

对于我的第一次尝试，我想要一个允许用户通过 5 个步骤指定某些内容的页面(带有取消步骤的选项)。

我想水平显示这个过程。

每个步骤都可以选择下一个(组合框、列表框或单选组(哪个？))，选择后将显示一些文本，也许是有关该选择并提供下一个选择的图形。

最初:

<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. 最好的方法是什么？一张 table ？我知道它们可能是一件坏事，但它在这里看起来有点帮助。

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

3. 由于该选择会影响描述性文本(可能还包括图形)，并且这些文本的大小可能不同，因此当做出不同的选择时，如何防止以下文本跳转？或者用户可以接受吗？

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

表格、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 中包含表格。许多人都在插入使用 HTML5 容器，例如节和 header ，但您会发现这些容器在旧版浏览器中很快就会失败。

以下概述了如何安排页面和一些示例 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 跟踪页面渲染时 DOM 中不存在的动态元素。

// 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>');
            }

        });