0

次のURIでjQueryウィザードプラグインに出くわしました。

http://www.techlaboratory.net/labs/SmartWizard/wizard-vertical.htm

それは私の目的を果たしますが、私は1つの小さなことを達成しようとしています。5つ以上のステップを追加すると、明らかにすべてのステップが表示されるわけではありません。代わりに、次をクリックすると、選択したステップを中央に配置しようとしています。したがって、たとえば、ステップ2をクリックすると、ステップ2を示す左側のボックスが中央に配置されます。誰かがこれを行うための良い方法を提案できますか？

4

1 に答える 1

1

私はjsFiddleを作成しました：http：//jsfiddle.net/elektronikLexikon/xWmhh/これ
は次の コードで動作します：

$('.wiz-container').smartWizard();

var ul_height = 400; // default: 400
var link_height = 80; // default: 80

$("#wizard-anchor li a, .btn.next, .btn.back").click(function() {
    if($("#wizard-anchor li").length > 5) {
        var ul_top = $("#wizard-anchor").offset().top;
        var current_top = $(".wiz-anc-current").offset().top-ul_top;
        var first_top = $("#wizard-anchor li:first").offset().top;
        var last_top = $("#wizard-anchor li:last").offset().top;
        if((current_top > ul_height/2-link_height/2 && last_top > ul_height) || (current_top < ul_height/2+link_height/2 && first_top < 0)) {
            $("#wizard-anchor").animate({
                "margin-top": 160-current_top
            }, 700);
        }
    }
});

残念ながら、ボタンをクリックするだけで機能します。左の列の完了したステップをクリックすると、奇妙なことが起こります。

于 2010-10-30T12:49:24.643 に答える