Question

我是一个完整的JQuery（和JS）n00B。

对于我的第一次尝试，我想要一个允许用户以5个步骤指定内容的页面（带有取消步骤的选项）。

我想横向显示这个过程。

每个步骤都可以选择下一个（组合框，列表框或无线电组（哪个？）），当选择它时会显示一些文本＆amp;也许是关于选择的图形并提供下一个选择。

[剧透：坏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>

我希望这很清楚。如果没有，请发帖。

问题：

最好的方法是什么？一张桌子？我知道他们可能是一件坏事，但这看起来很有帮助。
我应该只允许撤消最后一个选项吗？实际上所有5个的所有排列都是有效的，所以也许我应该忘记一个撤销按钮，然后让用户做出任何选择 - 这意味着我不会逐一揭示这些选择 - 它们总是在那里（听起来更简单））
因为选择会影响描述性文本（也许是图形），并且这些可能会有不同的大小，如何在做出不同选择时防止以下文本跳转？或者用户可以接受吗？

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

table，divs或layout for what？

如果你在早餐前做过四件不可能完成的事情，我想和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容器，例如section和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>');
            }

        });

Answer 2

这应该可以满足您的大部分需求。实现和修改非常简单！

关于调整大小和跳转文本，您应该将表单大小设置为用户可以选择的最大选择。

http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

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

2 个答案: