jQuery SmartWizard 구현하기

이번 포스팅에서는 jquery smartwizard를 상세히 파악해보도록 하겠다.

 

웹 애플리케이션에서 wizard를 쓰는 경우는 어떤 절차에 의해서 데이터를 주고받고 할 경우 또는 어떤 파일을 업로드하여 바로 수정하거나 어떤 설정 값에 따라 다른 프로세스를 거쳐야 하는 경우 쓰이는 거 같다.

 

예를 들어 회원가입 후 인증하기 또는 파일 업로드 후 파일에 대한 데이터 설정 등이 있다.

 

이번에는 파일 업로드 후 간단하게 파일명을 설정하는 예제를 해보겠다.

 

어떤 옵션이 있는지 prev, next 버튼 클릭 시 이벤트에 접근하는 방법에 대해 알아보도록 하겠다.

 

먼저 cdn으로 간단히 설치해보자

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>

이제 element를 설정해보자

<div id="smartwizard">
    <ul class="card px-4 pt-3 mb-3"">
        <!--단계별 step ul 리스트 -->
        <li>
            <a href="#smartwizard-step-1" class="mb-3">
                <span class="sw-done-icon ion ion-md-checkmark"></span>
                <span class="sw-icon fas fa-cloud-upload-alt"></span>
                    File upload
                <div class="text-muted small">파일 업로드</div>
            </a>
        </li>
        <li>
            <a href="#smartwizard-step-2" class="mb-3">
                <span class="sw-done-icon ion ion-md-checkmark"></span>
                <span class="sw-icon fas fa-cloud-upload-alt"></span>
                    File upload
                <div class="text-muted small">파일 설정</div>
            </a>
        </li>
    </ul>
    <div class="mb-2 mt-3">
        <div id="smartwizard-step-1">
            <div class="card-body">
                <form enctype="multipart/form-data" method="POST">
                    <div class="fallback">
                        <input name="file" type="file" multiple>
                    </div>
                </form>
            </div>
        </div>
        <div id="smartwizard-step-2">
            <div class="card-body">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label">파일명설정</label>
                        <input type="text" class="form-control" value="" id="dataName">
                    </div>
                </div>
           </div>
       </div>
       <div class="btn-group">
            <button class="btn btn-sm" id="prev-sw-btn">이전</button>
            <button class="btn btn-sm" id="next-sw-btn">다음</button>
       </div>
       <button class="btn btn-sm btn-primary" id="close-sw-btn">닫기</button>
    </div>
</div>

ul element는 각 스텝별 버튼을 나타내고 클릭시 또는 키보드 이벤트를 설정했을 경우 li 밑의 a 태그의 아이디를 찾아서 해당 아이디의 엘리먼트를 보여준다.

 

 

간단하게 파일 업로드 후 해당 파일의명을 설정하는 단계로 설정해봤다. 

 

이제 jquery를 이용해서 실제 구현이 되도록 인스턴스를 생성하고 각 옵션별 어떤 기능이 있는지 알아보자

 

$('#smartwizard').smartWizard({
    autoAdjustHeight: false, //자동 높이 설정
    backButtonSupport: false, //true일 경우 뒤로가기 버튼 시 이전 스텝으로 돌아간다.
    keyNavigation: false, //true 일 경우 키보드 <-,-> keyup이 이벤트로 스텝별로 이동한다.
    toolbarSettings: {
        showNextButton: false,
        showPreviousButton: false,
    }
});

toolbarSetting의 경우 next, prev 버튼을 숨겼다. false로 할 경우 따로 버튼 엘리먼트를 넣어주고 각 버튼에 이벤트를 추가해야 하지만

 

파일이 업로드가 완료됐을 때 버튼의 활성화를 주기 위해 따로 설정했었다.

 

툴바 버튼에 대한 이벤트를 제어하는 방법과 각 스텝별 이벤트로 발생했을 때에 대해 알아보자.

$("#prev-sw-btn").on("click", function() {
	// Navigate previous
    $('#smartwizard').smartWizard("prev");
});

$("#next-sw-btn").on("click", function() {
	// Navigate previous
    $('#smartwizard').smartWizard("next");
});

이전, 다음 버튼을 클릭했을 때 이벤트를 추가해서 이벤트가 발생할 때 필요한 것을 진행하면 된다.

 

그러면 각 스텝별 이벤트에 대해 알아보자

$('#smartwizard').on("showStep",function(e, anchorObject, stepNumber, stepDirection, stepPosition){
	//anchorObject는 각 스텝별 어떤 엘리먼트인지 확인할 수 있다.
    //stepNumber 각 스텝별을 번호로 나타냈다. 0은 첫번째이다.
    //stepDirection은 다음 버튼을 클릭 할 경우 forward, 이전 버튼을 클릭할 경우 previous
    //stepPosition의 경우 현재 스텝을 텍스트로 확인할 수 있다. first,second,final
})

작성자는 부트스트랩과 jquery smartwizard를 활용했다. 각 옵션과 이벤트에 대한 자세한 설명은 아래 링크에서 자세히 확인할 수 있다.

 

techlaboratory.net/jquery-smartwizard

jQuery Smart Wizard - The awesome jQuery step wizard plugin