Form Wizard Plugin: jQuery.Steps Kullanımı

Published in

Ada Yazılım

3 min readAug 10, 2023

jQuery Steps, adım adım bir form işlemini (Wizard tipi) veya başka türdeki süreçleri kullanıcı dostu bir arayüzle yönetmek için kullanılan bir jQuery eklentisidir. Kullanıcıların süreci daha rahat bir şekilde takip etmesini sağlamak amacıyla tasarlanmıştır.

jQuery Steps Kullanımı

jQuery Steps eklentisi, çok adımlı bir formun veya iş akışının kullanıcıya daha rahat bir şekilde sunulmasını sağlamak için tasarlanmıştır. Özellikleri arasında adım geçişi, adım kontrolleri, geçerlilik kontrolleri, özelleştirilebilir tasarım, etkileşim ve animasyonlar, olaylar ve geri bildirim bulunur.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Steps Örnek</title>
    <link rel="stylesheet" href="jquery.steps.css">
</head>
<body>
    <div id="wizard">
        <h3>Adım 1</h3>
        <section>
            <p>Adım 1 içeriği</p>
        </section>
        <h3>Adım 2</h3>
        <section>
            <p>Adım 2 içeriği</p>
        </section>
        <h3>Adım 3</h3>
        <section>
            <p>Adım 3 içeriği</p>
        </section>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="jquery.steps.js"></script>
    <script>
        $(document).ready(function() {
            var form = $("#wizard").steps();
        });
    </script>
</body>
</html>

$("#wizard").steps({...}); ifadesi, $("#wizard") ID'ye sahip bir HTML öğesine jQuery Steps eklentisini uygular. Eklentinin ayarlarını bu şekilde belirleyebilir ve adım adım işlem veya form tasarımını özelleştirebilirsiniz.

jQuery Steps’in Steps Seçenekleri/Özellikleri

$(document).ready(function() {
    var form = $("#wizard").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        enableAllSteps: true,
        enablePagination: true,
        enableFinishButton: true,
        labels: {
            finish: "Bitir",
            next: "İleri",
            previous: "Geri"
        },
        onStepChanging: function(event, currentIndex, newIndex) {
            // Adım değişikliği sırasında yapılacak işlemler
            return true; // Adım değişikliğine izin ver
        },
        onStepChanged: function(event, currentIndex, priorIndex) {
            // Adım değişikliği tamamlandığında yapılacak işlemler
        },
        onFinished: function(event, currentIndex) {
            // Tüm adımlar tamamlandığında yapılacak işlemler
        }
    });
});

jQuery Steps ile Kendi Butonlarımızı Yazıp Adım/Step Geçişlerini Nasıl Yönetebiliriz?

<div id="wizard">
    <h3>Adım 1</h3>
    <section>
        <p>Adım 1 içeriği</p>
        <button id="nextBtn">İleri</button>
    </section>
    <h3>Adım 2</h3>
    <section>
        <p>Adım 2 içeriği</p>
        <button id="prevBtn">Geri</button>
        <button id="nextBtn">İleri</button>
    </section>
    <h3>Adım 3</h3>
    <section>
        <p>Adım 3 içeriği</p>
        <button id="prevBtn">Geri</button>
    </section>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.steps.js"></script>
<script>
    $(document).ready(function() {
        var form = $("#wizard").steps();        // İleri butonu tıklanınca
        $("#nextBtn").on("click", function() {
            form.steps("next");
        });        // Geri butonu tıklanınca
        $("#prevBtn").on("click", function() {
            form.steps("previous");
        });
    });
</script>

jQuery Steps ile ileri-geri düğmelerine CSS ile müdahale etme

/* İleri düğmesinin renklerini değiştir */
#wizard .actions [href="#next"] {
    background-color: #007bff; /* Mavi arka plan rengi */
    color: #fff; /* Beyaz metin rengi */
}

/* Geri düğmesinin renklerini değiştir */
#wizard .actions [href="#previous"] {
    background-color: #6c757d; /* Gri arka plan rengi */
    color: #fff; /* Beyaz metin rengi */
}

Belirli bir adımda geri düğmesini gizlemek için ne yapmalıyım?

jQuery Steps’in onStepChanging olayını kullanarak, geri düğmesini gizlemek veya göstermek için bir işlev ekleyebiliriz. Bu olay adım değişikliği sırasında tetiklenir ve gerektiğinde düğmeyi gizleme veya gösterme işlevselliğini sağlar.

$(document).ready(function() {
    var form = $("#wizard").steps({
        onStepChanging: function(event, currentIndex, newIndex) {
            if (newIndex === currentIndex - 1) {
                if (currentIndex === 1) {
                    $("#wizard .actions [href='#previous']").hide();
                } else {
                    $("#wizard .actions [href='#previous']").show();
                }
            }
            return true;
        }
    });
});

Hangi adımda olduğumu nasıl takip edebilirim?

jQuery Steps ile hangi adımda olduğunuzu takip etmek için getCurrentIndex(), getStepCount(), getCurrentStep(), getState() gibi yöntemleri kullanabiliriz. Bu yöntemler mevcut adımın indeksi, toplam adım sayısı, mevcut adımın bilgileri ve durumu gibi bilgileri sağlar.

$(document).ready(function() {
    var form = $("#wizard").steps();

    // İleri butonuna tıklandığında hangi adımda olduğunu göster
    $("#nextBtn").on("click", function() {
        var currentIndex = form.steps("getCurrentIndex");
        alert("Şu anki adım: " + (currentIndex + 1));
    });
});

Projelerimizde kullandığımız bu güzel eklentiyi sizinle paylaşmak istedik. Umarım sizler de verim alırsınız, keyifli kodlar :)