1

我对这个表格有疑问。这是我的jsFiddle 文件。

这是我的 JS

(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({
            submitButton: ""
        }, options);

        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();

        // 2
        steps.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");



            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });

        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev'>Back</a>");

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show(function() {
                    $('.slide').animate({
                        left: "0"
                    }, 500);
                });
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next</a>");

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show(function() {
                    $('.slide').animate({
                        left: "0"
                    }, 500);
                });
                if (i + 2 == count) $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }

    }
        })(jQuery);

    $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
​

我想要它做的是当我单击下一步时从左（左到右）滑入，当我单击“返回”时我希望它向左滑动（从右到左）。

我在哪里做动画

$("#step" + (i + 1)).show(function() { $('.slide').animate({ left: "0" }, 500); });

当您选择流派然后单击返回时，类似于8 Tracks 。

非常感谢帮助！

4

2 回答 2

1

刚刚看了你的例子。你以错误的方式解决这个问题。

看看 8tracks 上的标记。这 3 张幻灯片从未hidden使用 css 或 jQuery制作.hide()。它们是“隐藏的”，因为它们前面还有另一个 div，所以它们对用户是“隐藏的”，但在技术上是可见的。

他们不是滑动单个“页面”，而是将所有 3 个页面作为一个单元滑动。但是，覆盖先前“隐藏”页面的 div 保持静态。

想象一下，您的表单页面是装配线上的 3 张纸，而您正以鹰的视野向下看。您一次只能看到一张纸（因为有一个隔板挡住了其他纸）。当您想移动到下一页时，您在装配线上按“下一步”。所有 3 个页面都向左移动一个插槽，您现在可以看到下一页。

于 2012-11-26T19:17:06.523 回答
1

要看到来自右边的东西，它实际上需要在那里！您的代码中缺少的是右侧的元素：

$("#" + stepName).animate({
    left: "100%"
}, 0);

这是 jsFiddle ：

http://jsfiddle.net/T8WRM/16/

如果你想让你的前一个元素移动，我离开了动画功能，这样做删除 .show() 和 .hide 以查看完整的移动

编辑 ：

要清楚滑块的事情，它不是这样工作的，这意味着您应该将视图放在一边（大多数时候通过将它们绝对定位在不同的 z-index 上）并通过视图或组合移动所有视图（上一个，下一个，当前）

于 2012-11-26T19:08:57.920 回答