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({ 左: "0" }, 500); });

ジャンルを選択してからクリックして戻ると、8 トラックに似たものになります。

大変助かりました！

4

2 に答える 2

1

右から何かが来るのを見るには、実際にそこにある必要があります！あなたのコードに欠けていたのは、右側にある要素でした：

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

これがjsFiddleです：

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

前の要素を移動したい場合は、animate関数を残しました。移動するには、.show（）と.hideを削除して、完全な移動を確認します。

編集 ：

スライダーのことを明確にするために、これはこのようには機能しません。つまり、ビューを脇に置いて（ほとんどの場合、ビューを異なるzインデックスに絶対的に配置することによって）、ビューホルダーまたは組み合わせ（前、次、現在）

于 2012-11-26T19:08:57.920 に答える
1

あなたの例を見てください。あなたはこの問題に間違った方法で取り組んでいます。

8トラックのマークアップを見てください。3つのスライドはhidden、cssまたはjQueryで作成されることはありません.hide()。それらの前に別のdivがあるため、それらは「非表示」になります。したがって、ユーザーには「非表示」になりますが、技術的には表示されます。

個々の「ページ」をスライドさせる代わりに、3ページすべてを1つの単位としてスライドさせます。ただし、以前の「非表示」ページをカバーするdivは静的なままです。

フォームページが組立ライン上の3枚の紙であり、イーグルビジョンで見下ろしていると想像してください。一度に表示できるのは1つの用紙のみです（他の用紙をブロックする仕切りがあるため）。次のページに移動したいときは、組立ラインで「次へ」を押します。3ページすべてが1スロット左に移動し、次のページが表示されます。

于 2012-11-26T19:17:06.523 に答える