Question

我正在做一个向导表单，其中包含大约5个步骤，您可以通过在每个步骤中选择不同类别的项目来构建产品。在每个步骤中，将向用户呈现多个项目的列表，每个项目具有项目名称，小预览图像和要选择的复选框。在单个项目的鼠标悬停时，我想在向导的每个步骤中存在的“更多信息”区域中显示更大的图像和产品详细信息。

所以我对此的第一个猜测是将所有项目加载到某种类型的集合中，然后在运行时，根据当前步骤，我会将相应的html注入项目列表DIV（我会我的项目javascript类上的项目ID，名称，描述，smallimageurl，largeimageurl，然后将鼠标悬停功能附加到所有这些元素，这将使更大的图像和伴随信息出现在更多信息div。

这看起来像是一种合理的方法，还是我离开基地？我可以看到在某些步骤中我可能想要一个不同的UI ...所以，如果一个人在设计时在单独的div中构建这些不同的UI元素，然后相应地显示它们？

你遇到的好文章的任何指针或链接都会很棒......

Answer 1

如果可以使用wizard plugin，请重新发明轮子。

Answer 2

我最终选择了简单的滑块，没有特别好的理由： http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

这很好，但我不确定它是否支持下一个/上一个按钮，同时显示当前步骤（似乎是一个或另一个）。

所以我会在这里发布我的代码，以防有人帮忙。
基本上，将鼠标悬停在任何单选按钮或复选框上时，我会将该项目的“附加信息”加载到信息div中。出于演示目的，我只是加载一个随机图像，但加载一个上下文正确的图像可能是一个小的改变。（我需要弄清楚如何使用.label，.additionalInfo和.imageURL属性在对象数组中定义所有的radio和checkbox元素，并在运行时适当加载它们，但这是另一天的练习。）

<link href="Scripts/easyslider1.7/css/screen.css" rel="stylesheet" type="text/css" />
<script src="Scripts/easyslider1.7/js/jquery.js" type="text/javascript"></script>
<script src="Scripts/easyslider1.7/js/easySlider1.7.js" type="text/javascript"></script>
<script src="Scripts/jquery.lorem.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function() {
            $("#slider").easySlider({
                prevId: 'prevBtn',
                prevText: 'Previous',
                nextId: 'nextBtn',
                nextText: 'Next',
                controlsShow: true,
                controlsBefore: '',
                controlsAfter: '',
                controlsFade: true,
                firstId: 'firstBtn',
                firstText: 'First',
                firstShow: false,
                lastId: 'lastBtn',
                lastText: 'Last',
                lastShow: false,
                vertical: false,
                speed: 200,
                auto: false,
                pause: 2000,
                continuous: false,
                numeric: true,
                numericId: 'controls'
            });

            // set hover event on the **label** accompanying any radiobutton or checkbox:
            // todo: is it possible to attach this to the actual radiobutton at the same time?  How???
            $(":radio, :checkbox").next().hover(function() {
                // SET THE EXTRA INFO TITLE TO THE TEXT OF THE RADIO/CHECKBOX LABEL:
                $('#extraInfoDetail').html(this.innerHTML);         //innerHTML or innerText would work (i think)

                // SET THE DETAIL ITEM INFO, JUST USING LORUM IPSUM (for demo purposes):
                $('#extraInfoLongText').lorem({ type: 'paragraphs', amount: '2', ptags: true }); 

                // JUST SOME RANDOM NUMBER TO DISPLAY AN ARBITRARY IMAGE:
                var randomNum = Math.floor(Math.random() * 3) + 1;
                var imagesrc
                imagesrc = "~/../Images/" + randomNum + ".jpg"; //todo: wtf is up wit this weird notation??
                $('#extraInfoImage').attr({ 'src': imagesrc });
            },
                // CLEAR EVERYTHING OUT AFTER HOVER OFF:
            function() {
                $('#extraInfoDetail').html('');
            }
        );
        }); 
    </script>

......相关的html：

        <div id="extraInfo" style="width:400px; float: left;">
            <div id="extraInfoTitle" style="background-color:Yellow; font-size:20px">ITEM DETAILS</div>
            <div id="extraInfoDetail" style="background-color:Fuchsia; font-size:20px"></div>
            <img id="extraInfoImage" src="Images/marc-faber.jpg" alt="" /><br />
            <div id="extraInfoLongText"></div>
        </div>

应该为这个向导表单的一般方式提供建议

2 个答案: