Bootstrap 5 진행률 표시 줄 jQuery 플러그인으로 모달로드 대기 중

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/bootstrap-5/bootstrap-5-waitingfor-loading-modal-with-progress-bar-jquery-plugin

Bootstrap waitfor는 진행률 표시줄 구성 요소가 있는 Bootstrap 5용 경량 플러그인입니다.

ajax를 사용하여 서버 측에 요청하는 동안 로드를 표시하는 데 유용합니다.



설치:




# NPM
$ npm install bootstrap-waitingfor

# Bower
$ bower install bootstrap-waitingfor


NPM 및 Bower를 사용하여 부트스트랩을 설치하지 않는 경우 대기 중입니다. 여기에서 그들의 저장소를 방문하여 다운로드하십시오.

그런 다음 다음 파일을 볼 수 있는 build/디렉터리 내의 파일을 사용합니다.

bootstrap-waitingfor.js
bootstrap-waitingfor.min.js


그런 다음 HTML 파일에 로드합니다. 부트스트랩 5 통합으로 내 예제 소스 코드를 확인하십시오.

<!doctype html>
<html lang="en">
<head>
    <title>Bootstrap 5 Waitingfor Loading Modal with Progress bar jQuery Plugin</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>

    <br/><br/><br/>
    <div class="container">
        <h3>Simple dialog</h3>
        <pre>waitingDialog.show();</pre>

        <button type="button" class="btn btn-primary" id="simple-dialog">Show dialog</button>

        <br/><br/>

        <h3>Dialog with custom message</h3>
        <pre>waitingDialog.show('Custom message');</pre>
        <button type="button" class="btn btn-success" id="dialog-custom-message">Show dialog</button>

        <br/><br/>

        <h3>Dialog with custom settings</h3>
        <pre>waitingDialog.show('Custom message', {dialogSize: 'sm', progressType: 'warning'});</pre>
        <button type="button" class="btn btn-warning" id="dialog-custom-settings">Show dialog</button>

        <br/><br/>

        <h3>Dialog with some callback firing after it was hidden</h3>
        <pre>waitingDialog.show('Dialog with callback on hidden',{onHide: function () {alert('Callback!');}});</pre>
        <button type="button" class="btn btn-danger" id="dialog-custom-callback">Show dialog</button>
    </div>


    <!-- Must put our javascript files here to fast the page loading -->

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- Bootstrap Waiting For Script -->
    <script src="assets/plugins/bootstrap-waitingfor/bootstrap-waitingfor.min.js"></script>

    <!-- Page Script -->
    <script src="assets/js/scripts.js"></script>

</body>

</html>


기본 기능



1. 간단한 대화

$('#simple-dialog').on('click', function() {
    waitingDialog.show();
    setTimeout(function () {
        waitingDialog.hide();
    }, 3000);
});


2. 사용자 지정 메시지 대화 상자

$('#dialog-custom-message').on('click', function() {
    waitingDialog.show('Custom message');
    setTimeout(function () {
        waitingDialog.hide();
    }, 2000);
});


3. 사용자 지정 설정 대화 상자

$('#dialog-custom-settings').on('click', function() {
    waitingDialog.show('Custom message', {
        dialogSize: 'sm', 
        progressType: 'warning'
    });

    setTimeout(function () {
        waitingDialog.hide();
    }, 2000);
});


4. 숨겨진 후 일부 콜백이 실행되는 대화 상자

$('#dialog-custom-callback').on('click', function() {
    waitingDialog.show('Dialog with callback on hidden',{
        onHide: function () {
            alert('Callback!');
        }
    });

    setTimeout(function () {
        waitingDialog.hide();
    }, 2000);
});


이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/bootstrap-5/bootstrap-5-waitingfor-loading-modal-with-progress-bar-jquery-plugin를 방문하십시오.

행복한 코딩 :)

좋은 웹페이지 즐겨찾기